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.
sfTree
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:
sf-request-children
sf-model
null
sf-identifier
sf-expand-on-select
sf-deselectable
sf-template-url
sf-template-assembly
sf-item-template-url
sf-item-template-assembly
sf-has-children-field
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:
DesignerView.YourView.json
JSON
designerview-yourview.js
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.
DesignerView.YourView.cshtml
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.
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.
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.
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.
To submit feedback, please update your cookie settings and allow the usage of Functional cookies.
Your feedback about this content is important