Routing in Oracle JET - Know how to navigate between pages

Routing is very useful in JET when we want to navigate between pages or modules. Following is the step-by-step procedure to configure the routing in Oracle JET.

·       Open main.js under sr/js folder

·       Search for function init() . By default, you see the below statements when you create a new project in this function

ko.applyBindings(new MainViewModel(), document.getElementById('globalBody'));

app.adjustContentPadding();

·       Replace these lines with the below statements in the function

oj.Router.sync().then(

                            function () {

                                // Bind your ViewModel for the content of the whole page body.

                                ko.applyBindings(app, document.getElementById('globalBody'));

                            },

                            function (error) {

                                oj.Logger.error('Error in root start: ' + error.message);

                            }

                    );

  

·       Open appController.js under src/js folder

·       In the function ControllerViewModel(), add the following code

self.router = oj.Router.rootInstance;      

                self.router.configure({

                    'home': {label: 'Home', isDefault: true},

                    'dashboard': {label: 'Dashboard'}

                });

                oj.Router.defaults['urlAdapter'] = new oj.Router.urlParamAdapter();

function mergeConfig(original) {

                    return $.extend(true, {}, original, {

                        'animation': oj.ModuleAnimations.switcher(switcherCallback)

                    });

                }

                self.moduleConfig = mergeConfig(self.router.moduleConfig);               

·       We need to configure all the pages for which we need to apply the routing. In the above code, observe the highlighted lines under self.router.configure(). Similarly, replace these pages with your pages

·       Open index.html under src folder. Copy and paste the below line under div tag with id "globalBody" where the routing will be applied

<div data-bind="ojModule: moduleConfig"></div>

·       Now the router is ready

·       Whenever you want to navigate to another page, then call the below method.

self.router.go(<page id>);

Ex: if you want to go to dashboard, then use self.router.go('dashboard');