Use a generic tree directive

The 'sfTree' directive provides functionality for displaying items in a hierarchical manner. It also provides mechanism for retrieving the currently selected item (if any).

Main attributes

sf-request-children

The 'sf-request-children' attribute accepts a callback function that should provide a promise with array of items(i.e. the items which will be displayed). The callback should return the child items of the currently selected node, or the root items if there is no selected item. Note that the callback function is invoked during the initial load of the 'sfTree' and also when an item is expanded and its childs have not been retrieved yet.

sf-model

The 'sf-model' attribute accepts the scope variable that will have reference to identifier field of the selected item or null if there is no selected item.

sf-identifier

The 'sf-identifier' attribute exposes API for specifying the property's name of the selected item (i.e. the one specified via the 'sf-model' attribute). Note that the 'sfTree' will use the 'Id' property by default (i.e. in case that the 'sf-identifier' is not explicitly specified).

sf-expand-on-select

The 'sf-expand-on-select attribute' attribute specifies that tree should be expanded when an item is selected. In other words you should add this attribute if you want to apply the behavior in question.

sf-deselectable

The 'sf-deselectable' attribute specifies that the tree allows to deselection. To deselect an item you need to click an already selected item. Note that the scope's variable that is specified via the 'sf-model' will be set to null when an item is deselected.

sf-template-url and sf-template-assembly

Those two attributes allow to override the template of the tree.

sf-item-template-url and sf-item-template-assembly

Those two attributes allow to override the item template of the tree.

sf-has-children-field

The 'sf-has-children-field' attribute accepts the name of the field that determines whether a node has children. Note that if the attribute's value is not specified then it is always assumed that a node has children (until one actually request it's children and receive an empty array as response).

Events

The ‘sfTree’ directive emits a custom selection event in order to provide notification when item is selected. Follow the code bellow in order to subscribe to the event:

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

Usage:

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

Markup:

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

Angular JavaScript:

   scope.requestChildrenCallback = function (parentObj) {
            parentObj = parentObj || {};
            var parent = parentObj.parent;
            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: parent.Key + '#1', Title:'1st child of '+ parent.Key, IsParent:true }, { Key: parent.Key + '#2', Title:'2nd child of '+ parent.Key, IsParent:false }]);
            }

            return result.promise;
        };

This example adds 2 root elements to the tree and the first one (as each first child successor) always has 2 children. The above tree will expand when an item is selected (if it has children (IsParrent === true)) due to the presence of sf-expand-on-select attribute. When sf-has-children-field attribute is present, the property that shows if an item has children will be evaluated. If it wasn't there, all items will visually appear as if they have children (until you try to expand the tree and you get a response with empty array - after this the item will no longer appear that it has children).

Adding sfTree in a designer view:

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.

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');