Generic tree directive

ThesfTree directive enables you to display items hierarchically and provides you with the functionality to retrieve the selected item. You can use the directive to display hierarchical tree in the frontend, as well as in the backend. For example, on a page, as well as in a widget designer.

The sfTree is a directive with an isolated scope that is defined in a module with the same name: sfTree
For more information, see Isolating the Scope of a Directive.


The sfTree directive exposes the following attributes:

Attribute Description
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.
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.
Specifies which property value is to be exposed in the sf-model collection. If you do not specify this attribute, the sfTree directive exposes the item itself in the sf-model collection.
Specifies whether the tree will be expanded when an item is selected.
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.
Allows you to override the template of the tree.
Specifies the assembly where the template of the tree is located.
Allows you to override the item template of the tree.
Specifies the assembly where the item template of the tree is located.
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 no children, an empty array is returned.

Add the generic tree directive

The following example demonstrates how to add a generic tree directive in a widget designer's view.

To enable AngularJs to link the sfTree directive in your custom designer view, you must load the script of the directive and add a dependency to the module.
Perform the following:

  1. Sitefinity CMS automatically registers the scripts you need and, if no other designer view with explicitly set priority exists, Sitefinity CMS 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.
    Use the following code:
  2. In your designerview-yourview.js file, place the following code snippet:

    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 visually appear as if they have children. If you try to expand such an element, the response is an empty array and the item no longer appears as a parent.

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

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 code in Step 2 of the above procedure.

Increase your Sitefinity skills by signing up for our free trainings. Get Sitefinity-certified at Progress Education Community to boost your credentials.

Get started with Integration Hub | Sitefinity Cloud | Sitefinity SaaS

This free lesson teaches administrators, marketers, and other business professionals how to use the Integration hub service to create automated workflows between Sitefinity and other business systems.

Web Security for Sitefinity Administrators

This free lesson teaches administrators the basics about protecting yor Sitefinity instance and its sites from external threats. Configure HTTPS, SSL, allow lists for trusted sites, and cookie security, among others.

Foundations of Sitefinity ASP.NET Core Development

The free on-demand video course teaches developers how to use Sitefinity .NET Core and leverage its decoupled architecture and new way of coding against the platform.


Was this article helpful?