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. 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:

  ```html
<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](Use-a-generic-collection-directive#create-custom-template).
  
### 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:


 ```html
<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.