Skip to Content

Archived discussions are read-only. Learn more about SAP Q&A

Add Controls & Content to NavigationItems

Hello SAP People,

I want to make an SAPUI Application with multi NavigationItems. These NavigationItems are already in place and on the first item I've added content.

But the question now is, how to add content to the second item + format it?

Via: " mContent[key] = new sap.ui.commons.Button({text:"This Button is the content of the Sales Orders Workset"});"  a single button is added but I'm not able to add more items or to place the items in a specific location (formatting).

All the online examples that I've found are only 1 paged SAPUI sites.

Except for this example:

But that code does not seem to work.

This is my current code:

Kind regards,


Former Member

Hi Vincent,

as a sort of intro explanation: the sap.ui.ux3.Shell is supposed to be used flexibly in very different ways. An application may choose to display entirely different content for each NavigationItem, or alternatively to just use these items as filters and modify the data displayed in the content. Or an application may completely destroy content that is currently not displayed (to save memory) or just use CSS to make that content invisible, without even really removing it from the Shell (to save re-rendering time or avoid other problems).
Hence there is no direct connection between NavigationItems and the content which belongs to them. Instead, the Shell just fires events and the application can/must do whatever is required to display the right content.

So what you want to do is to write a handler for the "worksetItemChanged" event of the Shell and then act depending on the selected item. It is good practice to set the "key" of all the items and to then read it in the event handler.
The getContent() method and the mContent[key] map is one suggestion how to manage/lazycreate/cache the different sets of content.
Your pastie code already does this, actually works fine, and already displays different content for different NavigationItems, so you seem do do it right...

To add another toplevel item, you could add it in the Shell constructor:

worksetItems:[                                          // add some items to the top navigation
  new sap.ui.ux3.NavigationItem({key:"wi_people",text:"People",subItems:[  // the "Home" workcenter also gets three sub-items
    new sap.ui.ux3.NavigationItem({key:"wi_people_overview",text:"Overview"}),
    new sap.ui.ux3.NavigationItem({key:"wi_people_add",text:"Add"})
  new sap.ui.ux3.NavigationItem({key:"wi_mine",text:"My Own")

And in getContent() you just add another else-if:
   } else if (key == "wi_mine") {
and return the appropriate content.

If you want to display more than one Button and to lay out those controls, you should look into the Layout controls provided by SAPUI5.

Best regards

2 View this answer in context
Not what you were looking for? View more on this topic or Ask a question