Use a hierarchy card to display hierarchical data from lists. You can build and display organizational charts, product hierarchy charts, and value driver trees. 

 Each list item is displayed as a node, and the nodes can be connected based on your hierarchy. Nodes in your hierarchy can be context-aware. This enables users to select a node and update its page context. Each node in your hierarchy supports up to three line items. 

You can build hierarchy charts with two different data structures:

  • List Hierarchy: You must have a hierarchy set from lists in your modules. The list hierarchy must be set in rows. You must set line items as columns in the underlying view. You can also use hierarchy charts to aggregate texts and images .
  • Data List: Use a flat data list and specify a line item as a parent. This allows you to have different hierarchical structures per dimension, such as scenario, version, or time.

To edit cards, select Edit to open your page in designer mode.  

Select Save to save as a draft, or Publish to publish the page. 

To build a hierarchy chart:

  1. Select Hierarchy on a new card, or hover over your card, and select Edit . 
  2. On the Overview tab of the Card configuration panel, you can:
    • Enter a Title and Description for your card, and select a Title color.
    • Link the card's title to a page from the Link to a page dropdown.
    • Set the Data Structure: 
      • List Hierarchy: This is the default setting, and builds your chart with the list hierarchy from your model. 
      • Data List: Select this option to build your hierarchy chart with a flat list, and specify line items as parents. This enables you to have different hierarchical structures per dimension. 

Note: For hierarchy charts configured with the Data List structure, you must select a parent line item from the Data hierarchy line item dropdown in the Hierarchy tab.

    • Select Card settings to: Allow comments, Allow maximizing, and Display Card Background on or off.
    • Switch Allow Pagination on or off. Enabling this setting paginates the nodes on your chart when there are more than three nodes on a hierarchy level. 
  1. In the Hierarchy tab, you can:
    • Set the Data source.
    • For hierarchies built from a Data List structure:
      • Select a parent line item for your hierarchy from the Data hierarchy line item dropdown. 
      • Set the Secondary edit line item. This setting enables you to set an editable line item as an override when the parent line item selected in the Data hierarchy line item dropdown is read-only. For example, if it is a formula-driven line item. Use the formula line item to build in logic to look at previous periods for the value to support effective dating. If a secondary line item isn't selected, users will be unable to edit the hierarchy chart. 
    • Pick an image in the Node image dropdown from the image library or use a URL-formatted line item. You can display up to three line items on a node. 
    • Set the Node conditional formatting from the dropdown.
    • Set the Node Identity color from the dropdown (Palette or Single color).
    • Select Add line item, and select an item from the Line item 1 dropdown Value. Then select for Line items 2 and 3. Optionally, you can set a Label or Conditional formatting for each line item. You set the conditional formatting in View Designer (previously), when you created the module view. 
    • Select List Edit Settings to:
      • Allow editing: Switch on to enable users to edit the hierarchy chart by dragging and dropping the nodes. For 
      • Enable node create: Switch on to enable users to add new nodes to the hierarchy chart. 
        You must then create a form via > Configure actions to choose the list, module, and line items for your created nodes. 
      • Allow deletion: Switch on to enable users to delete nodes. Select In-built model deletion to delete the item from the model, or Boolean deletion for a soft delete.

There's a limit of 30,000 rows and 10 columns in the underlying data view for hierarchy cards. Any data outside this limit gets ignored. To avoid this omission, you can filter the data to be within these boundaries in the view designer. The hierarchy card renders the first 500 nodes of the data returned.

Conditional formatting

You can use conditional formatting to clarify differences between hierarchy levels. Example: On an organizational chart, managers could be coded as red, while their direct reports might be blue. You set conditional formatting in the view designer and apply it to the hierarchy card.

Toggle the switch on to apply Conditional formatting.

Set context selectors

By default, context selectors display on the bottom of a card. With Context location, you can place the context selector to be at the top or the bottom of the card. This feature can be useful when you have a large grid. 

  1. You can also select the down chevron beneath Rows to
    Sync on selection or apply a Hierarchy filter. 
  2. Select the chevron beneath Columns to Sync on selection.