Client components

Sitefinity CMS provides an assortment of built-in, reusable client components you can use on widget designers' frontend. Client components allow flexible widget designer implementation that reflect various requirements of the UI of widget designers, for example, having a search box or a date and time picker.

The following types of client components are available out-of-the-box:

You use client components in the widget designer views either as an HTML element attribute, or as an HTML element. However, just adding components in the view is not enough. You also need to specify the dependency in the widget designer JSON config file, as well as in the widget controller.

The following example demonstrates how to use the Event selector in the Simple view of a widget designer. You have the following widget designer files:

• DesignerView.Simple.cshtml - represents the designer view, located in the Views folder
• DesignerView.Simple.json - represents the designer configuration, located in the Views folder
• designerview-simple.js - represents the designer controller, located in the Scripts folder

To use the Event selector, you need to have the following code in the respective files, listed above:

DesignerView.Simple.cshtml:

<sf-list-selector sf-event-selector sf-selected-item-id="properties.SelectedItemId.PropertyValue"></sf-list-selector>

DesignerView.Simple.json:

{
  "priority": 1,
  
  "components": [ "sf-list-selector", "sf-event-selector" ],
  "scripts": []
}

designerview-simple.js:

(function () {
    // The 'sfSelectors' module needs to be pushed into the 'designer' module.
    // The 'designer' module is the module that is responsible for the current widget designer.
    angular.module('designer').requires.push('sfSelectors');

    angular.module('designer')
        .controller('SimpleCtrl', ['$scope', 'propertyService', function ($scope, propertyService) {
            propertyService.get()
                .then(function (data) {
                    if (data) {
                        // Get all widget controller properties
                        $scope.properties = propertyService.toAssociativeArray(data.Items);
                    }
                });
        }]);
}());