Adding URL adresses to views in SAPUI5

Question

I have SAPUI5 application where I am using Shell. I have different views in my Shell and I am able to navigate from one view to another. The problem is that I don't know how can I create or change URL adress to each view. I need to set URL adresses to be able to use "back" button in a browser. I want to add unique URL adress to each view inside my Shell to use "back" and "forward" buttons.

Thanks!

Answer 1

Take a look at this simple sap.ui.core.routing.Router example it shows how to easily set up and use routes and a hash changer with an app Shell container.

sap.ui.core.routing is a javascript routes utilty, it handles URL changes and dispatches control based on pattern logic to views and event handlers, part of routing is HashChanger and History functionality.

if you are using the desktop shell this routing example with sap.ui.ux3.Shell

A lot of examples use jQuery.sap.history.js IMO it doesn't properly support bookmarks and has limited features which means you have to use it with other techniques

Answer 2

Unfortunately, History API presents in modern browsers only. For IE6+ I recommend you to use "hashchange" event of window:

    function router(){
        var sViewName = window.location.hash.slice(1),
            oView = sap.ui.getCore().byId(sViewName) || new sap.ui.view.XMLView({id : sViewName, viewName : sViewName});
        sap.ui.getCore().byId("uxShell").setContent(oView);
        return false;
    }

if("onhashchange" in window){
    if(window.attachEvent){ //IE8
        attachEvent('onhashchange', router);
    } else if(window.addEventListener){ //IE9+, Chrome, Opera, Firefox
        addEventListener('hashchange', router);
    }
} else { //IE6-7
    var oldHref = window.location.hash;
    setInterval(function(){
       var newHref = window.location.hash;
       if(oldHref !== newHref){
          oldHref = newHref;
          router();
       }
    }, 100);
}

But to make it work you need to set href property to navigation items like this: #catalog.viewName