Use a hierarchy card to display hierarchical data from lists. The chart visualizes the model list hierarchy with a node for each list item. You then connect the nodes 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 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.

Example: You can build and display organizational charts and value driver trees. You can map the relationships between the different list elements that show business value. Then you get a clear view of the most important focus areas. See this demo video of hierarchy cards.

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. From the Node image dropdown, you can pick an image from the image library or use a URL-formatted line item. You can display up to three line items on a node. Optionally, you can also:
    • Set the Node conditional formatting from the dropdown.
    • Set the Node Identity color from the dropdown (Palette or Single color).
  3. 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. 

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 right 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 down chevron beneath Columns to Sync on selection.