One of the examples of JET Router API usage - sign-in/sign-out implementation. After sign-in we need to change menu structure and allow access to application modules, on sign-out menu structure should be changed again. JET Router API allows to manage application navigation and menu structure from JavaScript. Check complete API methods list here - JSDoc: Class: Router.
Sample application code is available on GitHub - JETPlaygroundApp. This application is generated with JET NavDrawer template and is runnable in NetBeans and from command prompt with Grunt. I was using such Yeoman command to generate it:
yo oraclejet JETPlaygroundApp --template=navdrawer
I have changed index page to stretch to entire width and hamburger button to be always available. This is how sign-in module looks like:
After sign-in, user gets hamburger icon to access menu structure:
Oracle Developer Cloud service UI looks similar, it also gets menu list on the left, user can open it with hamburger icon:
Sign-out is available in the drop-down list:
Router API is used in three places in my sample app:
1. Initial sign-in module setup in appController.js. This is executed when application is initialized. Router is configured here with single module - login. Developer should get root instance, configure it with module list and define array with description how each menu item will look like:
2. On sign-in, when login function is called - we get the same root instance of the router. Configure it with new set of modules, one of them is marked as default, define array with descriptions and reset current navigation. At the end we should sync all changes with Router instance, this is done through sync() method call:
3. On sign-out, when logout functionality is called. We reset router configuration with single login module. Login module is set as default. Here we call Router API method go(). Method doesnt need parameter, it will navigate to default module, if no parameter specified. Depending on URL state, if current module before sign-out is default one, URL will not change - this would require to call sync() method to force sign-in module display. If user is on any other module, not the default one - go() method will navigate to sign-in module automatically:
Sample application code is available on GitHub - JETPlaygroundApp. This application is generated with JET NavDrawer template and is runnable in NetBeans and from command prompt with Grunt. I was using such Yeoman command to generate it:
yo oraclejet JETPlaygroundApp --template=navdrawer
I have changed index page to stretch to entire width and hamburger button to be always available. This is how sign-in module looks like:
After sign-in, user gets hamburger icon to access menu structure:
Oracle Developer Cloud service UI looks similar, it also gets menu list on the left, user can open it with hamburger icon:
Sign-out is available in the drop-down list:
Router API is used in three places in my sample app:
1. Initial sign-in module setup in appController.js. This is executed when application is initialized. Router is configured here with single module - login. Developer should get root instance, configure it with module list and define array with description how each menu item will look like:
2. On sign-in, when login function is called - we get the same root instance of the router. Configure it with new set of modules, one of them is marked as default, define array with descriptions and reset current navigation. At the end we should sync all changes with Router instance, this is done through sync() method call:
3. On sign-out, when logout functionality is called. We reset router configuration with single login module. Login module is set as default. Here we call Router API method go(). Method doesnt need parameter, it will navigate to default module, if no parameter specified. Depending on URL state, if current module before sign-out is default one, URL will not change - this would require to call sync() method to force sign-in module display. If user is on any other module, not the default one - go() method will navigate to sign-in module automatically:
Any idea why when trying to implement this I keep getting "Cannot read property 'label' of undefined" in the login.js file when trying to login? It seems to throw this error when evaluating the self.router.configure({
ReplyDelete'dashboard': {label: 'Dashboard', isDefault: true},
'incidents': {label: 'Incidents'},
'customers': {label: 'Customers'},
'about': {label: 'About'}
});
Can't seem to get around this?
Is it possible to force a refresh of a page if your currently on it. ie if your on dashboard and click dashboard it wont reload the content.
ReplyDeleteGood question, I will check it.
ReplyDeleteBtw, I have one more recent post on JET Router: https://andrejusb.blogspot.lt/2017/07/oracle-jet-router-state-control.html
Andrejus
Hi Ash,
ReplyDeleteJET ojNavigationList doesnt seem to support the option to be able to click on already selected menu option. Probably you should change template implementation and replace ojNavigationList with something else.
Regards,
Andrejus
Hi,
ReplyDeleteMy login module is saying "Uncaught TypeError: Cannot read property 'navDataSource' of undefined".
How do I solve this?
This means navDataSource from appController is not visible. Make sure you are referencing appController module correctly.
ReplyDeleteAndrej