Instructions

1. Create the Ztree dependency

Open the Manage Dependencies option and search for zTree. Select from the zTree the elements for your purposes and apply changes.

2. Verify the Structures (already available from the component)

Go to the Data Tab in the top right corner of your Service Studio application module. Verify that there are available the structures from the zTree component that work for your use case:

3. Create the Local Variables

Go to the Interface tab of your application module. Choose the screen you wish. Press CTRL+N to create the following Local Variables. If you pick the same name of the record it automatically gives you the structure you created in the step above

4. Create the input and assign it a new action On Change

Go to the Widget Tree of your screen. This component uses an InputId to show the tree folder structure. You need to use one of the available blocks. Here they are represented in noded, each one has its own records. 

5. Drag the widget to our screen

5.1. In your widget tree: before you use any of the customized web blocks you need to drag the main widget to your screen. The widget has its own preconfigured style. Change it according to your needs.

5.2. Next, drag one of the + 50 available web blocks and start using it in your application:

5.3. Use the API provided with this Demo for Large_xx_BigData web blocks:

5.3.1. Load from the database to the JSON_Node list (a ZtreeData List data type)  list by using the suggested flow:

5.3.2. Use the API endpoint configured above in Large_xx_BigData web blocks:

6. Assign Values to Parameters (in screen preparation)

Under your screen preparation: this is where the zTree data and views will be set according to your specific use cases. You will also need to append data to each record according to the structure that you use.