Section 1: Installing the asset

1. Click install so that the Multilevel Organizational Chart asset becomes available in your environment

2. In your application, go to the dependency manager, search for Multilevel Organizational Chart, check all available options and click Apply

Then the OrganizationalChart block will be available for use in your application.

Section 2: Using the OrganizationalChart block to generate a dynamic Multilevel Organizational Chart in your application

1. Go to the Interface tab and look for the MultilevelOrganizationalChart dependency. Drag the OrganizationalChart block to the location where you want to display your chart

After that, you will need to provide the necessary information for the organization chart to be created. In this example, we will provide fixed values, but you can create a list or an aggregate to fill in the necessary data.

Let's then generate an example organization chart, using the OnInitialize event to organize the necessary data.

2. Create a local variable of type Str_OrganizationalChart

3. In the OnInitialize event, drag an Assign to the flow and now we will define the fixed values of the organization chart (Title and Subtitle) associating the values with the local variable that we created in the previous step

4. Now we need to fill in the information for the organizational chart nodes. For this we will use a ListAppend for each node. Importantly, this step defines which are the parent nodes and which are the child nodes, thus making it possible to manage the graph hierarchy

Note that in this demo, the CEO node is the parent of the Head of Sales node. This was defined using the ParentId information.

Let's test what we have built so far. To do this, it is necessary to inform the local variable OrganizationalChartData to the input parameter of the OrganizationalChart block, as shown in the following image:

5. Now, click publish so that the changes are reflected in the environment. The result should be as shown in the following image:

6. Let's now add one more child node to check the behavior of the organization chart. Insert another ListAppend into the OnInitialize event flow with the following information:

Note that we added a node and defined Id 1 as its parent, which in our example is the node that displays the CEO's information.

After publishing the changes, the result should be the following:

This way, we can have several multilevel hierarchies just by defining the ID of the parent of a given node, thus generating a Multilevel Organization Chart.