Hierarchy Management Component

Hierarchy Management Component

Create and manage nested hierarchies, and use them for dynamic dropdowns in Apps

Purpose

Hierarchy structures can be difficult to manage or conceptualize in standard Tables. It is often difficult to manage parent-child relationships on a large scale as well. To mitigate these challenges, the Hierarchy component makes it much easier to Create, Read, Update, and Delete relationships from a Hierarchy management table.

Once Hierarchies are made, dropdown menus in any application can be filled with the contents of a hierarchical relationship. For example, you might want a dropdown to dynamically populate with all the tests related to a given product type.

General Process Overview

Using the component makes it quick to add new items to the hierarchy at any specified level. The base level is defined as root. From the root level, items can be added much like file folders in a file directory. You can click through this directory by selecting the desired row to enter, or go back with the back button. At any desired level in the hierarchy, select the Add button to create a new item within the active parent group. The Edit mode can be toggled to gain the options to Update or Delete an Item as well. To do so, toggle edit mode to on, then select the item you would like to edit.

Getting Started - Application Overview

Below is a video that walks through the application in more detail:

Installation

This component requires no immediate action to begin using. However, in order to implement dynamic hierarchical dropdowns, you will need to set up the Tulip Table API. Please continue reading for further explanation on this implementation.

Setting up Hierarchical dropdowns in other apps.

Beyond managing and viewing hierarchies, it's most useful to be able to use the contents of each level of the structure within other apps on your Tulip site. To do so, set up the API access to unlock the use of the connector function, then add a dropdown to display the list.

Setting up the Tulip Table API

First, create a bot using the Tulip Table API by clicking on settings in the top right. You must be an Account Owner in order to complete this step.

Then Create a Bot

Grant the Bot all Scopes

This will generate credentials for you to set up your API connector. It is a good idea to save these somewhere. Leave this window open while you open up a new window.

In your other window, navigate to your connectors and select the new HTTP connector called "Table API" and edit the connection settings

Choose "Cloud Connector Host" and enter in your tulip instance as the host. Then click edit headers.

Choose Basic Auth and enter in your API Key (from the previous window) as the Username and your Secret as your Password.

Your table API is now set up!

Using the Connector Function to populate a dropdown

In any app you'd like to create a dropdown, you can choose to populate the dropdown with a selected level of your hierarchy. The following example will get a list of all the items in the Root > Quality Tests category.

First, run the Get Child List connector function on App Start to ensure the dropdown is populated when the application begins.

When: app is started

Then: Run Connector Function - connector: Table API - Get Child List - Parent: Static Value - Quality Inspection - and save result as: Inspection List.

In the above trigger, the connector function searches the table for all relationships where the Parent is given as Quality Inspection, effectively giving a list of all the Items under that grouping. When saving the result, save the output as a Variable to most easily access the array of strings collected.

Next, add a Single Select Input widget to your App.

In the Context Pane of the input widget, select the options to have the selection stored to a variable, and the source to be from the array of items given by the connector function.

From top down:

• Variable will allow the selection to be stored in a variable to be used throughout the app.
• Display allows you to choose between the dropdown or menu views.
• Options - Variable allows the list to be populated by the given Array variable, which will be the output of the connector function.

If you update the Hierarchy table from the same app with any new values via a button, make sure to re-run the connector function to get the updated list of values into your dropdown.

The dropdown will now populate with all of the items in the specified group!