Use components to resolve script dependencies

Each client-side component requires you to describe all scripts that it depends on, so you can use it. For example, if you want to use the sf-image-selector in your designer view, you need to describe the 26 scripts the selector depends on. For details, see Use-an-image-selector.

Sitefinity CMS will automatically resolve and populate the components you rely on by analyzing your designer view. If no other designer views with explicitly set priority exists, your analyzed designer view will be set priority 1. This eliminates the need for you to have DesignerVIew.YourView.json file, unless you have dependencies to custom scripts. If you have a JSON file that matches the convention (even if empty), this automatic scripts registration will not occur.

You can also specify the component you rely on as a single alias, instead of having to describe all component's script dependencies. What you do is add just one dependency to the component. For example, you add a dependency to the sf-image-selector and as a result, your DesignerView.YourView.json has the following content:

JSON
{
     "priority": 1,
     "components": ["sf-image-selector"]
}

Of course, you can still list in your DesignerView.YourView.json all the scripts you want to load. You can even combine both scripts and components, thus loading your custom scripts while in the same time working with the built-in components.

The following list describes all components you can use:

ComponentDescription

sf-collection

Displays a collection of selectable items.

sf-tree

Displays a hierarchical collection of selectable items.

sf-infinite-scroll

Infinite scrolling through items.

sf-search-box

Interface for user input used by the searching functionality.

sf-sort-box

Functionality for displaying sort options.

sf-drag-drop

Add drag and drop functionality to an HTML element.

sf-flat-taxon-field

Select and create taxons by typing their name in a text box.

sf-image-field

Select and display an image from the existing libraries in your website.

sf-media-field

Select and display a document or a video from the existing libraries in your website.

sf-news-selector

Select news from your Sitefinity CMS application.

sf-page-selector

Select pages from your Sitefinity CMS application.

sf-multisite-page-selector

Select pages, based on the sites and available languages in your Sitefinity CMS application.

sf-taxon-selector

Select taxa from a flat taxonomy like Tags or a custom classification.

sf-hierarchical-taxon-selector

Select taxa from a hierarchical taxonomy like Categories or a custom classification.

sf-dynamic-items-selector

Select dynamic content items from your Sitefinity CMS application.

sf-date-time-picker

Simple way of selecting date and time.

sf-timespan-selector

Select period by concrete dates or time interval.

sf-site-selector

Select different sites defined in your Sitefinity CMS application.

sf-language-selector

Select different culture defined in your Sitefinity CMS application.

sf-link-selector

Generate hyperlinks to a website, a page from this site, an anchor in the text or an email.

sf-library-selector

Select from a list of all existing libraries in your website.

sf-image-selector

Display and retrieve one or several selected images.

sf-document-selector

Display and retrieve one or several selected documents.

sf-role-selector

Display and select from a list of all existing roles defined in your website.

sf-user-selector

Display and select from a list of all existing users defined in your website.

sf-feed-selector

Display and select from a list of the existing feeds defined in your website.

sf-mailing-list-selector

Display and select from a list of the existing mailing lists defined in your website.

Want to learn more?
Enhance your Sitefinity skills by enrolling in free training sessions. Become Sitefinity certified through Progress Education Community to strengthen your professional credentials.
New to Sitefinity?