Use content item selectors
When working with MVC widgets and widget designers, you may need to implement selectors for single or multiple items. The following article explains the basic principles of using such item selectors for various items, such as dynamic items, News items, taxa from a flat taxonomy. Selectors use standard Sitefinity CMS services to get the corresponding items. For example, the NewsService is used to get all created News items. Selectors also set the selected items into the designer properties.
The following example demonstrates how to use the News selector and is divided in two sections - selecting a single News item and selecting multiple News items.
PREREQUISITES:
You created a widget with a custom designer view and an AngularJS controller for the widget. For more information, see Create widgets.
Use selectors
Selectors are part of the Telerik.Sitefinity.Frontend assembly. Selectors are implemented as AngularJS directives. To use selectors, you need to:
- Declare a module dependency in the widget designer controller
- Add the selector in the designer view
Common setup
- In the MVC/Controllers folder, create the CustomWidgetController.cs widget controller.
- In the MVC/Views/CustomWidget folder, create the custom designer view DesignerView.SimpleSelector.cshtml for your widget.
- In the MVC/Scripts/CustomWidget folder, create the AngularJS controller designerview-simpleselector.js for the custom designer view.
Single News item selector
The controller must have two properties:
- SerializedSelectedItemId
- SerializedSelectedItem
The following code demonstrates how to implement the CustomWidgetController_SingleSelector.cs controller:
Next, you implement the custom designer view:
Finally, implement he AngularJS controller:
Multiple News items selector
The controller must have two properties:
- SerializedSelectedItemsId
- SerializedSelectedItems
NOTE: The controller properties are not the same as the ones for the single item selector since they are in plural.
The following code demonstrates how to implement the CustomWidgetController_MultipleSelector.cs controller:
Next, you implement the custom designer view:
In the code above, to enable selection of multiple items for the selector, you set the sf-multiselect attribute true. Take notice that the attributes that bind the collections of items and item IDs are also different than the ones for a single item selector: sf-selected-ids and sf-selected-items. The selector model properties need to correspond to the ones you defined in the widget designer controller.
Finally, implement he AngularJS controller: