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. 


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:

  1. Declare a module dependency in the widget designer controller
  2. Add the selector in the designer view

Common setup

  1. In the MVC/Controllers folder, create the CustomWidgetController.cs widget controller.
  2. In the MVC/Views/CustomWidget folder, create the custom designer view DesignerView.SimpleSelector.cshtml for your widget.
  3. 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:

Increase your Sitefinity skills by signing up for our free trainings. Get Sitefinity-certified at Progress Education Community to boost your credentials.

Get started with Integration Hub | Sitefinity Cloud | Sitefinity SaaS

This free lesson teaches administrators, marketers, and other business professionals how to use the Integration hub service to create automated workflows between Sitefinity and other business systems.

Web Security for Sitefinity Administrators

This free lesson teaches administrators the basics about protecting yor Sitefinity instance and its sites from external threats. Configure HTTPS, SSL, allow lists for trusted sites, and cookie security, among others.

Foundations of Sitefinity ASP.NET Core Development

The free on-demand video course teaches developers how to use Sitefinity .NET Core and leverage its decoupled architecture and new way of coding against the platform.


Was this article helpful?