Feather: Use multiple content items selectors

With Feather, you can implement in a widget designer a multiple items selector for various items, such as dynamic items, news items, pages, taxonomies, and so on.

To use the selector in multiple selection mode:

1. In your DesignerView.YourView.json file add the following path to the scripts array:
   "client-components/selectors/common/sf-selected-items-view.js"
2. For the page selector, add the sf-multiselect="true" attribute as demonstrated by the code below:
   <sf-list-selector sf-page-selector sf-multiselect="true" sf-sortable="true" sf-selected-ids="ids" sf-selected-items="slectedItems"></sf-list-selector>
3. To access the arrays of pages and their IDs, you must use the sf-selected-ids and sf-selected-items attributes. You must have scope properties added in your widget's controller as demonstrated below:
   public string SelectedItems

   {

       get;

       set;

   }

    

   public string SelectedIds

   {

       get;

       set;

   }
4. Add the following code in the designer's controller:
   var designerModule = angular.module('designer');

   angular.module('designer').requires.push('sfSelectors');

   designerModule.controller('CustomCtrl',[ '$scope', 'propertyService', function ($scope, propertyService) {

       $scope.feedback.showLoadingIndicator = true; propertyService.get().then(function (data) {

           if (data) {

               $scope.properties = propertyService.toAssociativeArray(data.Items);

           }

       },

       function (data) {

           $scope.feedback.showError = true; if (data) $scope.feedback.errorMessage = data.Detail;

       }). finally (function () {

           $scope.feedback.showLoadingIndicator = false;

       });

       $scope.$watch('properties.SelectedItems.PropertyValue', function (newValue, oldValue) {

           if (newValue) {

               $scope.selectedItems = JSON.parse(newValue);

           }

       });

       $scope.$watch('selectedItems', function (newValue, oldValue) {

           if (newValue) {

               $scope.properties.SelectedItems.PropertyValue = JSON.stringify(newValue);

           }

       });

       $scope.$watch('properties.SelectedIds.PropertyValue', function (newValue, oldValue) {

           if (newValue) {

               $scope.ids = JSON.parse(newValue);

           }

       });

       $scope.$watch('ids', function (newValue, oldValue) {

           if (newValue) {

               $scope.properties.SelectedIds.PropertyValue = JSON.stringify(newValue);

           }

       });

   }]);