Feather: Use a generic collection directive

Feather's sfCollection directive enables you to display a collection of items and provides you with the functionality to select single or multiple of those items.

The following tutorial demonstrates how to add a generic collection directive in a widget designer's view. Keep in mind that you are free to use Feather selectors and directives outside of widget designers. For more information, see Use content selectors outside of a widget designer's view.

Add generic collection directive

To add the generic collection directive:

1. Feather automatically registers the scripts you need and, if no other designer view with explicitly set priority exists, Feather sets your designer view priority 1. In case you need to have full control over the scripts that are loaded or you want to set custom priority, you can alternatively create your own DesignerView.YourView.json file. If you have a JSON file that matches the convention (even if empty), this automatic scripts registration will not occur. In your DesignerView.YourView.json file, add a scripts array. As a result, the file content looks similar to the following:

   {
   "priority": 1,
   "components" : ["sf-collection"]
   }

2. In your DesignerView._YourView.js file, right before the definition of your custom view controller, place the following code:

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

3. Your designer controller exposes the following scope items, so that it binds them to the sfCollection directive.

      angular.module('designer')
            .controller('SimpleCtrl',
                       ['$scope', 'propertyService', 'serverContext',
                        function ($scope, propertyService, serverContext) {
   
                            $scope.items = [{ Id: '1', Title: "Folder1" },
                                            { Id: '2', Title: "Folder2" },
                                            { Id: '3', Title: "Folder3" }];
                        }]);

4. In your DesignerView.YourView.cshtml file, place the following tag where you want to render the sfCollection directive:

   <sf-collection 
      sf-data="items"
      sf-model="[selectedItem]"
      sf-multiselect="[false/true]"
      sf-identifier="[Title]" 
      sf-deselectable="[false/true]"
      sf-template-url="[path to your template]"></sf-collection>

   The sf-collection tag exposes the following attributes:

   • sf-data
     Represents the items loaded by the sfCollection directive. This is a required attribute.
   • sf-model
     Provides the selected item or items when in single or multiple selection mode, respectively.
   • sf-multiselect
     Configures the directive in single or multiple selection mode. This attribute is optional.
   • sf-identifier
     Specifies which property value is to be exposed in the sf-model collection. If you do not specify this attribute, the sfCollection directive exposes the item itself in the sf-model collection.
   • sf-deselectable
     Specifies whether the selected item must be removed from the array of selected items. Set this value to true if you want to remove the item from the collection.
   • sf-template-url
     By default, the sfCollection directive does not expose any visual representation. To set the HTML template view, you must provide value for the sf-template-url attribute. For example, if your template view is named SfCollectionTemplate.html and it is located in the same folder as the DesignerView.YourView.cshtml, the value of the attribute looks similar to this:
     sf-template-url="SfCollectionTemplate.html"
     For more information, see Create custom templates.

Subscribe to selection event

To provide notification when item is selected, the sfCollection directive emits a custom selection event. To subscribe to the selection event, use the following code in your desinger's controller:

$scope.$on('sf-collection-item-selected', function (event, item) { });

Create custom template

In the markup of your custom sfCollection template, add the following code snippet:

<div id="grid">
    <li ng-repeat="item in items" class="col-md-4" ng-click="select(item)">
        {{::item.Title}}
    </li>
</div>

<div id="list">
    <li ng-repeat="item in items" ng-click="select(item)">
        {{::item.Title}}
    </li>
</div>

<div>
    <button ng-click="switchToGrid()">Grid</button>
    <button ng-click="switchToList()">List</button>
</div>

<style>
    .sf-collection-grid > div#list {
        display: none;
    }

    .sf-collection-list > div#grid {
        display: none;
    }
</style>

The sfCollection directive’s scope provides 2 additional methods for switching between the Grid and List modes:

• switchToGrid()
• switchToList()

To use these 2 methods, you must provide 2 CSS files in the custom sfCollection template:

• sf-collection-grid - the CSS applied when sfCollection is in Grid mode
• sf-collection-list - the CSS applied when sfCollection is in List mode.