How can we show different components (table) when we click on a particular tree node in the Treeview component?

I want to show a table component in the 50% width along side treeview component when a tree node is clicked.


To configure this, follow the below steps :

  1. First, we will create a TreeView component(Treeview_parent) and a Table component(Treeview_child). Bind both these components on a Page.
    Column1: TreeView component, Column2: Table component

  2. Then, we will select a mock data source in the TreeView component’s add data source section. We will add the data we want to display in the TreeView.

Mock data example →
[ { “name”: “Parent”, “imageUrl”: “”, “child”: [ { “name”: “Child”, “child”: [ { “name”: “Sub-Child1” }, { “name”: “Sub-Child2” } ] } ] } ]

  1. “If we want to display the child data of a treeview component by clicking on a particular node, we need to add the ‘onnodeclick’ event to the treeview component.” In this event, we will add two tasks.
    a) Task 1 - Invoke Entity Task
    In the first task, use the “invoke entity task.” This task is responsible for adding the
    Treeview_child Table component to a specified Table component ID.
    b) Task 2 - Navigate Task
    In the second task, use the “navigate task” and the subtype will be as a child. Set the source ID to the page layout name, and specify the row and column indices (0, 0). This step determines where the Treeview_child Table component will appear within the layout.
    Also, set the destination to the page layout name and specify the new row and column indices (0, 1).

  2. Configure Table(Treeview_child) -
    In the Table(Treeview_child) component, we will select an object data source for the Table component’s add data source. We will add the data we want to display in the Table.

In summary, you’re building a Treeview where the Treeview_parent component handles node clicks. When a node is clicked, it invokes the Table(Treeview_child) component and also navigates to a specific location in the layout. The Treeview_child Table component then displays the child data based on the path you’ve configured.