/

The Tree element is a powerful visualization element that enables hierarchical data structures to be presented to the user in a layered and organized manner. This structure, which allows users to expand and collapse an item’s subitems, enhances the user experience by displaying complex datasets 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 the Initial Action to bind the GetCategoryTree action to your page. Then, drag the “Tree” element onto your page. In the Options section, define the fields for Action, Field to display, Field to Use as Key, Field to Use as Parent, and Field to Use as Checked. Enable the “Checkable” setting to allow users to check boxes and filter.

Add the GetProducts action to the Tree element and configure it so that products are filtered when a category is 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.