Skip to content

Hierarchical selection

Insight supports hierarchical selections out of the box that are needed in many usecases. Hierarchical selections here mean having one attribute with a selectFromTree that then filters the next attribute with a selectFromTree that then filters the next attribute, and so on. This behaviour can be reproduced as well with custom attributeControlls but it is much easier to use the hierarchySelectionComponent. To use a hierarchical selection, use the following notation:

{
    "name": "my-example-node",
    "label": "${myLabelAttribute}",
    "icon": "icon-site-map",
    "hierarchySelection": {
        "label": "Selection label ${myLabelAttribute}",
        "levels": [
            {
                "attribute": {
                    "name": "internalNameA",
                    "label": "A",
                    "selectFromTree": {
                        "tree": "tree-a",
                        "node": "root",
                        "attribute": "id"
                    }
                },
                "filterAttribute": "id"
            },
            {
                "attribute": {
                    "name": "internalNameB",
                    "selectFromTree": {
                        "tree": "tree-b",
                        "node": "root",
                        "attribute": "id"
                    }
                },
                "filterAttribute": "id"
            },
            {
                "attribute": {
                    "name": "internalNameC",
                    "selectFromTree": {
                        "tree": "treeC",
                        "node": "root",
                        "attribute": "id"
                    }
                }
            }
        ]
    }
}

The hierarchySelection label defines the overall label of the hierarchySelection. Each hierarchySelection is rendered as it's own section in the UI. Each hierarchySelection can have as many levels as you want. Each level consists of two parts: The attribute configuration, and the filterAttribute. The attribute configuration is the regular Insight attribute configuration. All configuration from there apply. Here, attribute.name is the internal name of the created attribute within the usecase you are creating the hierarchySelection in, while attribute.selectFromTree governs what tree to select the data from. All regular configurations from selectFromTree do apply. filterAttribute defines in what attribute in the next level the current value of each level will filter against. This means, that the last level does not have any filterAttribute.

To support a smooth workflow, the hierarchySelection component has a few additional features: - If you select a value in one level, it automatically loads, filters and opens the next level - If there are no resulting records for the next level, it is not opened automatically - If you change a level value within the level hierarchy chain, all subsequent level's values are cleared - All levels that do not have a value yet and are not the first unanswered level are hidden, only showing all the answered levels as well as the first unanswered level

Please note, that the resulting attribute models are full native attribute models, which means that they can still have attributeControls and be manipulated from other attributeControls.