How to Properly Structure a Grouped/Hierarchical Navigation Data Source

[Hsiao_Min_Shyh]

• Goal: When using the navigation component, starting with manual mode allows for setting open page actions and icons per item and defining items with grouping characteristics. However, what is the correct data structure when switching to mapped mode? The goal is to dynamically generate this structure from the backend so that items can be conditionally hidden using mapped mode.

• Steps: My initial approach was to export data from manual mode using JavaScript. I found that the data is an array of objects with keys: itemType, appTarget, label, caption, tooltip, hidden, disabled, icon, iconPosition, highlight, screenTarget, and screenTargetId. I also noticed that items within the same group share the same parentKey value. After generating the object array, I used {{ item. }} to dynamically fill in labels, icons (obtained from the manual mode), icon positions, and interaction settings on the UI. The interaction was configured with click=open_page() and passed {{ item.screenTargetId }} as a parameter.

• Details: After setting up the options above, the labels, icons, and event handlers work as expected in navigation. However, there’s an issue with grouping. Only one option, the parent label, is unclear. I tried setting item.key, but the grouping (dropdown) did not appear. When I tried item.parentKey, the label disappeared. I suspect there is an issue with the structure somewhere.

• Screenshots:

• App json export: (here's how to get a json export)

[Hsiao_Min_Shyh]

The format I expect is as shown in the attached image.

[Tess]

Hi @Hsiao_Min_Shyh,

Thanks for reaching out!

I believe this should work