Use a generic tree directive

You use Feather sfTree directive when you create a custom designer for your widgets. This directive enables you to displaying items hierarchically and provides you with the functionality to retrieve the selected item.

The sfTree is a directive with an isolated scope that is defined in a module with the same name: sfTree.

For AngularJs to link the sfTree directive in your custom designer view the script of the directive has to be loaded and a dependency to the module has to be added.

Add generic tree 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": [
        "client-components/collections/sf-tree.js"
        ]
   }

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

   var designerModule = angular.module('designer');
   angular.module('designer').requires.push('sfTree');

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

  <sf-tree 
      sf-model="selectedItemId" 
      sf-request-children="requestChildrenCallback(parent)" 
      sf-identifier="Key" 
      sf-has-children-field="IsParent" 
      sf-expand-on-select/>

The **sfTree** directive exposes the following attributes:

* **sf-request-children**  
Accepts a callback function that must provide a promise with the array of items that are going to be displayed. The callback must return the root items or the child items of the currently selected node. The callback function is invoked during the initial load of the **sfTree** directive. The callback function is also invoked for each subsequent expansion if the child nodes of the selected item have not been retrieved yet.
* **sf-model**  
Accepts a scope variable that references the identifier field of the selected item. If there is no selected item the value of this variable is _null_. 
* **sf-identifier**  
Specifies the property name of the selected item. If this attribute value is not explicitly specified the **sfTree** uses the **Id** property by default.
* **sf-expand-on-select**  
Specifies whether the tree should be expanded when an item is selected.
* **sf-deselectable**  
Specifies whether the tree allows selected items to be deselected when they are clicked again. If an item is deselected the value of the **sf-model** is set to null.
* **sf-template-url**  
Allows you to override the template of the tree.
* **sf-template-assembly**  
Specifies the assembly where the template of the tree is located.
* **sf-item-template-url**  
Allows you to override the item template of the tree.
* **sf-item-template-assembly**  
Specifies the assembly where the item template of the tree is located.
* **sf-has-children-field**  
Accepts the name of the scope variable that determines whether a node has children. If this attribute value is not explicitly specified the **sfTree**  assumes that a node has children. When requesting the children of a node that has none an empty array is revieced as a response.

4. In your designer's controller, add the following code:

designerModule.controller('SettingsCtrl', ['$scope', '$q', function ($scope, $q) { $scope.requestChildrenCallback = function (parentObj) { parentObj = parentObj || {}; var parent = parentObj.IsParent; var result = $q.defer();

		if (!parent) {
			result.resolve([{ Key: '1', Title: 'Title Root 1', IsParent: true },
							{ Key: '2', Title: 'Root 2', IsParent: false }]);
		}
		else {
			result.resolve([{ Key: parentObj.Key + '#1', Title: '1st child of ' + parentObj.Key, IsParent: true },
							{ Key: parentObj.Key + '#2', Title: '2nd child of ' + parentObj.Key, IsParent: false }]);
		}

		return result.promise;
	};

}]); ``` The code above is invoked during the initial load of the sfTree directive and two root elements are added to the tree. If you select an item which is a parent, the tree expands and invokes the function. As a result two more elements are added under the currently selected node. If the sf-has-children-field attribute is present, its scope variable is evaluated. If the attribute is not present, all elements of the tree will visually appear as they have children. If you try to expand such an element the response is an empty array and the item no longer appears as it has children.

Subscribe to selection event

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

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