avatar image
Former Member

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: http://scn.sap.com/community/technology-innovation/blog/2012/05/04/using-neo-and-sapui5--part-2--hi-sap-ui5-may-i-introduce-you-to-neo

But that code does not seem to work.

This is my current code: http://pastie.org/5447548

Kind regards,


Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

2 Answers

  • Best Answer
    Nov 29, 2012 at 12:12 PM

    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

    Add comment
    10|10000 characters needed characters exceeded

    • Former Member

      Thanks for your reply Andreas! This makes it clear to me and other people.

      Kind regards,


  • Oct 09, 2015 at 11:18 AM

    Thanks both. It helped me as well😊

    Add comment
    10|10000 characters needed characters exceeded

Skip to Content