Page History
...
- The data structure should have a clear parent-child relationship, with each node containing a unique identifier and a field that references its children.
- The component automatically handles the expansion and collapse of tree nodes.
- When a node is selected, the ON_TREE_ITEM_CLICK event is triggered, passing the selected node's data to any configured actions.
- The component supports both flat and hierarchical data structures, as long as the appropriate expressions are set to map the relationships.
- For large datasets, consider implementing server-side filtering or pagination through the request parameters.
(Configured in General Properties)
- displayName – Sets the display name of the component shown in the structure panel. For example, "Category Tree" allows for easy identification of the component's purpose in the component structure. This name is used to reference the component in the editor and does not affect the front-end display.
(Configured in Visibility)
- displayConditions – Defines conditions for displaying the component based on context values. For example, { key: "showCategoryTree", operator: "equals", value: "true" } would only show the tree view when the context contains a "showCategoryTree" property set to "true". This allows the tree view to be shown or hidden dynamically depending on the state of the application.
...
- dataSourceId – Specifies the data source ID for retrieving tree data. For example, "api/categories" connects the tree view to a categories API endpoint.
- getEntityCollectionHttpRequestParametersMap – Configures HTTP parameters for data fetching. This object maps additional parameters needed for the data request, such as filters or sorting options. For example, {"headers": {"Content-Type": "application/json"}, "pathParams": {"tenantId": "{{tenantId}}"}} allows you to pass dynamic path parameters to the API.
Styling
(Configured in General Properties)
...
(Configured in Visual Properties)
...
- id — Specifies a unique identifier for the component used for programmatic access. For example, "productCategoryTree" enables targeted manipulation of this specific component in scripts or for automated testing.
- dataTestId — Sets the testing hook ID for automated testing. For example, setting it to "product-category-tree" allows test scripts to reliably locate this component during test execution.
- enableAsHotspot — Enables the component as a guided tour hotspot. When set to true, this component can be highlighted in guided tours to help users understand its navigation functionality.
- guidedTourHotSpotTitle — Sets the title for the guided tour hotspot with support for multiple languages. For example, {"en-US": "Category Navigation", "fr-FR": "Navigation par Catégorie"} ensures proper localization of the hotspot title.
- guidedTourHotSpotDescription — Sets the description for the guided tour hotspot with language support. For example, {"en-US": "Use this tree to navigate between different product categories", "fr-FR": "Utilisez cet arborescence pour naviguer entre différentes catégories de produits"} provides localized guidance about how to use the component.
Authorization
(Configured in Authorization)
- visibilityPolicySetId — Determines the visibility of the component based on specified policy sets. For example, setting to "categoryAdminPolicy" restricts the tree view to users with category management privileges. This enables role-based access control for the component, ensuring only authorized users can see and interact with certain hierarchical data.
Links
- Link to Figma: tbahttps://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=11600-87979&t=ExcQFUXKvr1QdxTm-1
- Live style guide: https://e1-dev.k8s.myapp.de/live-style-guide/id2/9-tree
...
