/

The Tree element is a powerful visualization element that allows hierarchical data structures to be presented to the user in a layered and organized manner. This structure, which enables users to expand and collapse an item’s sub-items, enhances the user experience by displaying complex data sets in an easy-to-understand format.

To use this element, create the ProductCategories and Products table structures in the Tables section of the Data Sources module as shown on the screen. Then, create the action named InsertProductCategories. When applying it, delete the text “ProductCategories” and “Products,” retype them, and press Enter. Test and save. This will add the correct schema name before the table name. Follow the Actions > New SQL Action steps to create the GetCategoryTree and GetProducts actions. Repeat the same steps.

Switch to the UI Design module. Use Initial Action to connect the GetCategoryTree action to your page. Then, drag the “Tree” element onto your page. In the Options section, configure the Action, Field to display, Field to Use as Key, Field to Use as Parent, and Field to Use as Checked fields. Enable the “Checkable” setting to allow users to check boxes and filter data.

Add the GetProducts action to the Tree element and configure it so that products are filtered when categories are clicked. From the “Action Tree” section in the left sidebar, drag and drop the icon next to the “GetProducts” action onto the page.

When the application is tested, a hierarchical Tree structure appears on the left side of the screen. Through this structure, users can view product categories along with their parent and child levels and select multiple categories.