Skip to Content
Author's profile photo DJ Adams

Jump to Shell Workset Item from URL

During SAP TechEd 2012 I attended CD163 “SAP HANA – Application Services Basics” which really helped firm up my knowledge of XS, thanks to the great presentation and exercises. What was interesting was that not only was SAPUI5 used for the UI components of the demos and exercises, but even the code snippets that the attendees would have to type in were made available to copy-n-paste, via a simple SAPUI5 Shell interface.

On reviewing the exercise text today, I noticed this bit:

/wp-content/uploads/2013/01/urlsub2_173826.png

The URL that pointed to the SAPUI5 Shell that contained the code to copy-n-paste had a query string in it, and that sub=3.1 caused the browser to go straight to a subitem in the Shell’s workset item collection:

/wp-content/uploads/2013/01/sub3_2_173827.png

(please ignore the 256-colour quality of that shot)

I thought that was a nice touch, and dug around to see what they’d done. I was pretty certain I hadn’t seen that as a feature described in the official and comprehensive SAPUI5 docu, so was curious.

What they’d done is added a small function to parse out the value of the “sub” parameter in the query string, and set the selected workset item accordingly. Here’s that small function, getURLParameter:

function getURLParameter(name) {

    return decodeURI(

        (RegExp(name + ‘=’ + ‘(.+?)(&|$)’).exec(location.search)||[,null])[1]

    );

}

(In case you’re wondering, the ||[,null] bit towards the end just makes sure there’s no exception when the requested parameter isn’t found by the regex).

The workset items were defined in the Shell object like this:

oController.oShell = new sap.ui.ux3.Shell(“myShell”, {

  appIcon : “./images/sap_18.png”,

  appIconTooltip : “SAP”,

  appTitle : “CD163 Exercise Templates”,

  showInspectorTool : false,

  showFeederTool : false,

  showSearchTool : false,

  content: html21,

  worksetItems: [new sap.ui.ux3.NavigationItem(“NI_2″,{key:”ni_2″,text:”Exercise 2”, subItems:[

    new sap.ui.ux3.NavigationItem(“NI_2_1″,{key:”ni_2_1″,text:”2.1 Hello World”})]}),

    new sap.ui.ux3.NavigationItem(“NI_3″,{key:”ni_3″,text:”Exercise 3”, subItems:[

      new sap.ui.ux3.NavigationItem(“NI_3_1″,{key:”ni_3_1″,text:”3.1 Simple OData”}),

      […]

and the requested workset item was set as selected, with the corresponding content, in a large switch statement like this:

  switch (getURLParameter(“sub”)){

    case “2.1”:

      oController.oShell.setSelectedWorksetItem(“NI_2_1”);

      oController.oShell.setContent(html21);

      break;

    case “3.1”:

      oController.oShell.setSelectedWorksetItem(“NI_3_1”);

      oController.oShell.setContent(html31);

      break;

    case “3.2”:

      oController.oShell.setSelectedWorksetItem(“NI_3_2”);

      oController.oShell.setContent(html32);

      break;

    […]

Nice effect.

I wanted to confirm this for myself, and try to use fewer lines of code than SAP had done, as it looked a little bit verbose. So I wrote a little standalone snippet, available in my Github repo ‘sapui5bin‘. The snippet is https://github.com/qmacro/sapui5bin/blob/master/snippets/shell_wsi_nav.html and defines a Shell with a few items / subitems like this:

  var oShell = new sap.ui.ux3.Shell({    

      appTitle: “Shell WorksetItem Navigation”,

      worksetItems:[

        new sap.ui.ux3.NavigationItem(“id_wsiA”, {key:”wsiA”,text:”A”,subItems:[ ]}),

        new sap.ui.ux3.NavigationItem(“id_wsiB”, {key:”wsiB”,text:”B”,subItems:[

          new sap.ui.ux3.NavigationItem(“id_wsiB.1″, {key:”wsiB.1″, text:”B.1”}),

          new sap.ui.ux3.NavigationItem(“id_wsiB.2″, {key:”wsiB.2″, text:”B.2”}),

        ]}),

      ]

    });

Note that my convention is to name the IDs the same as the keys, but with a prefix of ‘id_’.

I used the same getUrlParameter() function, but then used a simpler method to dynamically set the selected workitem and content based on the value of the ‘sub’ query parameter, like this:

  var subId = “id_wsi” + getUrlParameter(“sub”);

    var wsi = sap.ui.getCore().byId(subId) ? subId : ‘id_wsiA’;

    oShell.setSelectedWorksetItem(wsi);

    oShell.setContent(getContent(wsi));

In the second of these 4 lines, I’m just making sure I handle the case where the user hacks the URL query string to specify a sub item that doesn’t exist: I make sure that I can find an element with the ID specified (knowing that if it begins ‘id_wsi’ then it’s a workset item) and defaulting to the first workset item if I can’t.

/wp-content/uploads/2013/01/b2_173831.png

And that’s it. Not a huge deal, but I was intrigued, and thought you might be too. For more info, see the complete snippet shell_wsi_nav.html.

Share and enjoy!

Assigned tags

      6 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Mark Teichmann
      Mark Teichmann

      Nice tip, thank you!

      Author's profile photo John Patterson
      John Patterson

      thanks for sharing, always happy to see SAPUI5 code on Github

      hopefully some kind of hash based navigation/routing/eventing feature is introduced in UI5 soon, something simple to use like Sammy,js.

      jsp

      Author's profile photo John Patterson
      John Patterson

      DJ

      Was playing around with the example above and managed with little code to get hash based bookmarks working, something i wanted to do in for a long while.

      http://jsbin.com/ewocas/1#wsiB.2

      Including the jQuery hashchange event allows for address bar changes without reloading.

      Cheers

      JSP

      Author's profile photo DJ Adams
      DJ Adams
      Blog Post Author

      That's fab, nice work John.

      I've incorporated your mods into the code, in a new commit on sapui5bin, too:

      https://github.com/qmacro/sapui5bin/blob/master/snippets/shell_wsi_nav.html

      cheers

      dj

      Author's profile photo Former Member
      Former Member

      Hi DJ,

      When tried to access your github link for sample code its giving page not found error.

      Please share alternate url to access the sample code.

      Thanks and regards,

      Akhilesh

      Author's profile photo DJ Adams
      DJ Adams
      Blog Post Author

      Did you try to search for it at all? A quick browse of the Github repo would have led you to it, alternatively, there's this thing called Google 🙂

      https://www.google.co.uk/search?q=shell_wsi_nav+github+qmacro