ON THIS PAGE:
Overview
The hierarchy control allows a user to select an entity from a specific hierarchy. This control is often used in conjunction with the hierarchy picker. First, the user selects the hierarchy from the hierarchy picker. The hierarchy control reads this event, and then makes the entities in that hierarchy available to the user, who will pick the entities they are interested in.
The following diagram shows a hierarchy control:
| Page Size: |
Sets the number of entities displayed in the hierarchy before paging begins. This is optional, but recommended to improve performance and usability.
|
| Single Selection Mode: | Allows the user to only select a single entity. Multiple selections are not allowed. |
| Selected Entities: | The name of the event that the hierarchy publishes to. This event will contain the entities that are selected, and other controls (such as a chart) can listen to this event. |
| Hierarchy Name: | The name of the hierarchy for which to display entities. |
Tutorial
In this tutorial, we’ll look at adding a Hierarchy to a page, along with a Selection List. When the user selects entities from the Hierarchy, the Selection List displays the selected entities.
Let’s go through this process, step-by-step.
Step by Step: Creating a Hierarchy That Shows the Selected Entities in a Selection List
Before you start, open a new tab in Explorer and click the “Create a New Page in Studio Mode” thumbnail. Choose the grid layout – you can adjust the rows and columns if you like but it’s not important for this exercise.
If you have access to the training environment, you can follow the steps exactly as outlined here. Otherwise, you will need to adjust the configuration to suit your data.
Step 1. Add the Hierarchy to the page
Drag and drop the Hierarchy component onto a grid cell.
Step 2. Configure the Hierarchy
In this step, you’ll notice that the Selected Entities and Hierarchy Name events are already filled in with defaults. You can change this if you like, but you will need to remember your changes and substitute appropriately for the next step. Configure the settings as follows:
- Page Size: (Number) 10
- Single Selection Mode: (unselected)
- Selected Entities: selectedEntities
- Hierarchy Name: (Event) selectedHierarchy
Selected Entities is always an event, so that other components on the page will dynamically update when the Hierarchy publishes the list of entities that the user has selected. This is often used to link components such as charts and tables.
Step 3. Add and configure a Selection List component
Drag and drop the Selection List component onto a grid cell, and configure it as follows:
- List Items: selectedEntities
We want the Selection List to display the entities that are selected from the Hierarchy.
Step 4. Set the event defaults
At the moment, the page shows nothing because the user hasn’t selected anything. Let’s change that and get some default data to display. We do this by creating defaults for the events specified in the components in the previous steps.
- Click the Event Defaults button on the Studio toolbar.
- Add an event called “selectedHierarchy” with the text P2 Energy Solutions. This will set the filter on the Hierarchy to only display entities belonging to that hierarchy.
- Add an event called “selectedEntities” with the following list items: BOSSIER 1, BOSSIER 2.
You should now see the Hierarchy and Selection List populated with the defaults. Note that you can set the event defaults at any time.
Step 5. All done!
Congratulations! You now have a fully functioning Hierarchy that allows the user to select a number of entities. When you select entities from the Hierarchy, the selected entities are displayed in a Selection List.
Don’t forget to save your page!