I want to show a table component in the 50% width along side treeview component when a tree node is clicked.
4 Likes
To configure this, follow the below steps :
-
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 -
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”: “https://img.lovepik.com/element/40111/1416.png_300.png”, “child”: [ { “name”: “Child”, “child”: [ { “name”: “Sub-Child1” }, { “name”: “Sub-Child2” } ] } ] } ]
-
“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). -
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.
3 Likes