In case of bookmarks.Hash routing not working with SAPUI5

Question

Hi All,
I have the below code with in SAPUI5
The issue is that the url is correctly set when navigation from entry screen to detailed screen and also proper navigation happens, but when detailed screen is bookmarked the navigation always takes back to entry screen.
For example:
In my entry screen below I enter 'hi' then press enter to navigate to deatiled screen and you can see that both URL and navigation are fine
But now if I bookmark or enter the URL 'http://localhost:8001/#/detailedScreen/1234' directly then instead of navigating to detailed screen, I am taken to entry screen.
Below is the code.
    App.js
    (function () {
        'use strict';   
        //registering the module path
        jQuery.sap.registerModulePath('appointy', 'javascript/appointy');   
        $.sap.require('sap.ui.core.routing.HashChanger');
        $.sap.require('sap.ui.core.routing.Route');
        $.sap.require('sap.ui.core.routing.Router');
        //Somewhere at the start of your application
        var oRoutes = {
            // name used for listening or navigating to this route
            "searchScreen": {
                "pattern": "detailedScreen/{id}" // will be the url and from has to be provided in the data
            "catchAll": {
                "pattern": ":all*:"
        var oRouter = new sap.ui.core.routing.Router(oRoutes);
    //this is used to retrieve the instance again
        oRouter.register("appRouter");
    //starts reacting on the hashchange + parses the current hash and notifies callbacks
        oRouter.initialize();
        //var iRouter = sap.ui.core.routing.Router.getRouter("appRouter");
        oRouter.attachRouteMatched(function (oEvent) {
            if (oEvent.getParameter("name") == "searchScreen") {
                _selectItemWithId(oEvent.getParameter("arguments").id);
            if (oEvent.getParameter("name") == "catchAll") {
                _setContent(mContent.home);
            //bind the this pointer to the callback
        }, this);
        var _selectItemWithId = function (id) {
            //implementation eg: select an item in a list
            var homeNext = sap.ui.view({
                type: sap.ui.core.mvc.ViewType.JS,
                id: 'homeNext',
                viewName: 'appointy.HomeNext'
            homeNext.getController().parameterId = id;
            sap.ui.getCore().byId("oShell").setContent(homeNext);   
        // build the application root view and place on page
        var oRootView = sap.ui.view({
            type: sap.ui.core.mvc.ViewType.JS,
            id: 'mainView',
            viewName: 'appointy.Main'
        var _setContent = function (oContent) {
            iShell.setContent(oContent, true);
        var mContent = {};
        var iShell = sap.ui.getCore().byId("oShell");
        mContent.home = sap.ui.view({
            type: sap.ui.core.mvc.ViewType.JS,
            id: 'homeView',
            viewName: 'appointy.Home'
        //setting initial content for oSHELL
        _setContent(mContent.home);
        //switching contents of oSHELL
        iShell.attachWorksetItemSelected(function (evt) {
            var key = evt.getParameter("key");
            iShell.setContent(mContent[key]); // switch content
        oRootView.placeAt('content');  
Main.view.js
    (function () {
        'use strict';
        sap.ui.jsview('appointy.Main', {
            getControllerName: function () {
                return 'appointy.Main';
            createContent: function (oController) {
                var oShell = new sap.ui.ux3.Shell('oShell');
                oShell.addWorksetItem(new sap.ui.ux3.NavigationItem({
                    key: "home",
                    text: "Home"
                return oShell;
            //local handling of events of this View
        sap.ui.controller('appointy.Main', {
            onInit: function () {
            onBeforeRendering: function () {
            onAfterRendering: function () {
            onExit: function () {
            model: null   
Home.view.js
(function () {
    'use strict';
    sap.ui.jsview('appointy.Home', {
        getControllerName: function () {
            return 'appointy.Home';
        createContent: function (oController) {
            var oSearchField = new sap.ui.commons.SearchField('js-business-search', {
                search: [ oController.onSearch, oController ]
            //oSearchField.attachSearch(oController.onSearch);  --> Alternative way to attach event trigger to the searchField
            var oLayout = new sap.ui.commons.layout.VerticalLayout({
                width : "100%"
            oLayout.addContent(oSearchField);
            return oLayout;
    sap.ui.controller('appointy.Home', {
        onSearch: function(oEvent) {   
            //using Routing example
            var changeURL = new sap.ui.core.routing.HashChanger ();
            var hash = 'detailedScreen' + '/' + oEvent.getParameter("query")
            changeURL.setHash(hash);
        onInit: function () {
        onBeforeRendering: function () {
        onAfterRendering: function () {
        onExit: function () {
        model: null
HomeNext.view.js
(function () {
    'use strict';
    sap.ui.jsview('appointy.HomeNext', {
        getControllerName: function () {
            return 'appointy.HomeNext';
        createContent: function (oController) {
            var oLabel = new sap.ui.commons.Label("l2");
            //oLabel.setText(sap.ui.getCore().byId('js-business-search').getValue());
            oLabel.setDesign(sap.ui.commons.LabelDesign.Bold);
            var oLayout = new sap.ui.commons.layout.VerticalLayout({
                width : "100%"
            oLayout.addContent(oLabel);
            return oLayout;
      sap.ui.controller('appointy.HomeNext', {
        onInit: function () {
        onBeforeRendering: function () {
            var that = this,
                oLabel = sap.ui.getCore().byId('l2');
            oLabel.setText(that.parameterId);
        onAfterRendering: function () {
        onExit: function () {
        showAlert: function(sChannelId, sEventId, oParam) {
            alert(oParam.searchQuery);
        parameterId: null,
        model: null
Regards,
Chidan

Answer 1

You can open the JSBin in "Output Only (with live reload)" mode in a separate window, and in that window (tab) the URL can change.
Here is a incomplete routing sandbox on JSBin (open each in a separate window, note that JSBin may want to update the revision from 3 to 4):
Edit URL: http://jsbin.com/bamuh/3/edit?js
Output URL: http://jsbin.com/bamuh/3#square
(change the hash manually to #circle to see the routing trigger)
Enjoy,
Shawn