CODEWITHSUNDEEP
hashroutesnavigationsapui5
Rahul
Rahul

Reputation: 151

Navigation without Component.js?

I need to know - HashChanger and Router concept without Component.js as I am not able to find in SAPUI5 SDK - Developers Guide.

Can someone provide a simple example where one can navigate to another page by changing the Hash?

~Rahul

Upvotes: 1

Views: 984

Answers (2)

jpenninkhof
jpenninkhof

Reputation: 1920

The routing concepts are very well explained in the SAPUI walk-through tutorial: https://sapui5.hana.ondemand.com/sdk/#docs/guide/e5200ee755f344c8aef8efcbab3308fb.html

A good and simple example can be found in the UI5 explored app: https://sapui5.hana.ondemand.com/explored.html#/entity/sap.ui.core.routing.Router/samples

To launch the example in a separate page to see the hash portions in your browser, you could use this link: https://sapui5.hana.ondemand.com/test-resources/sap/ui/core/demokit/sample/RoutingFullscreen/RoutingFullscreen.html

Upvotes: 1

schnoedel
schnoedel

Reputation: 3948

Have you tried the example given in the documentation you have linked? I have copied and expanded it a little:

var router = new Router(
// Routes
[
    {
        // no view creation related properties are in the route
        name: "startRoute",
        //no hash
        pattern: "",
        // you can find this target in the targetConfig
        target: "welcome"
    },
    {
        // no view creation related properties are in the route
        name: "productRoute",
        //no hash
        pattern: "product/{productId}",
        // you can find this target in the targetConfig
        target: "productTarget"
    }
],
// Default values shared by routes and Targets
{
    viewNamespace: "my.application.namespace",
    viewType: "XML"
},
// You should only use this constructor when you are not using a router with a component.
// Please use the metadata of a component to define your routes and targets.
// The documentation can be found here: sap.ui.core.UIComponent#.extend.
null,
// Target config
{
     //same name as in the route called 'startRoute'
     welcome: {
         // All properties for creating and placing a view go here or in the config
         viewName: "Welcome",
         controlId: "app",
         controlAggregation: "pages"
     },
     productTarget: {
         // All properties for creating and placing a view go here or in the config
         viewName: "Product",
         controlId: "app",
         controlAggregation: "pages"
     }
});

// You can navigate to a route programmatically too.
// This is the same as entering the url ...index.html#product/P12345 in your browser window.
router.navTo("productRoute",{productId: "P12345"});

Upvotes: 0

Related Questions