Use a generic collection directive

The following article demonstrates how to use Feather's sfCollection directive in your custom designer. This directive can display a collection of items and provides the functionality to select single or multiple of those items.

Adding a generic collection directive

1. In your DesignerView.YourView.json file you have to add a scripts array. The content of the file should be similar to:

{ "priority": 1, "scripts": [ "Mvc/Scripts/Angular/angular-resource.min.js", "client-components/selectors/common/sf-services.js", "client-components/collections/sf-collection.js" ] } ```

2. In your designerview-yourview.js place the following snippet right before the definition of your custom view controller:

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

3. Your designer controller may expose the following scope items in order to bind them to the 'sfCollection'.

   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** place the following tag where you want to render the _sfCollection_:

  ```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 attribute is required.
  * _sf-model_  
  Provides the selected item or items when in single or multi select mode, respectively.  
  * _sf-multiselect_  
  Used to configure 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 this attribute is not specified the _sfCollection_ directive initialize this property to _Id_. 
  * _sf-deselectable_  
  Specifies if the selected item should be removed from the array of selected items. Set this value to _true_ if you want to remove the item from collection.
  * _sf-template-url_  
  The _sfCollection_ directive doesn’t expose any visual representation by default. You must provide a value for the _sf-template-url_ attribute in order to set the html template view. For example, if your template view is named **SfCollectionTemplate.html** and it's located in the same folder as the **DesignerView._YourView_.cshtml**, the value of the attribute should look like:  
  `sf-template-url="SfCollectionTemplate.html"`  
  For more information, see [Creating a custom template](Use-a-generic-collection-directive#creating-a-custom-template).
  
### Subscribing to a selection event

The _sfCollection_ directive emits a custom selection event in order to provide notification when item is selected. Use the following code in your desinger's controller in order to subscribe to the event:

`$scope.$on('sf-collection-item-selected', function (event, item) {
     });
`
### Creating a custom template

Add the following code snippet in the markup of your custom _sfCollection_ template

 ```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’s scope provides two addition methods for switching between ‘Grid’ and ‘List’ mode:

• switchToGrid()
• switchToList()

In order to utilize this functionality you must provide two CSS styles in the custom sfCollection template:

• sf-collection-grid - the CSS apllied when sfCollection’s is in 'Grid' mode
• sf-collection-list - the CSS apllied when sfCollection’s is in 'List' mode.