Discussions
Categories
- 196.8K All Categories
- 2.2K Data
- 239 Big Data Appliance
- 1.9K Data Science
- 450.3K Databases
- 221.7K General Database Discussions
- 3.8K Java and JavaScript in the Database
- 31 Multilingual Engine
- 550 MySQL Community Space
- 478 NoSQL Database
- 7.9K Oracle Database Express Edition (XE)
- 3K ORDS, SODA & JSON in the Database
- 544 SQLcl
- 4K SQL Developer Data Modeler
- 187K SQL & PL/SQL
- 21.3K SQL Developer
- 295.9K Development
- 17 Developer Projects
- 138 Programming Languages
- 292.5K Development Tools
- 107 DevOps
- 3.1K QA/Testing
- 646K Java
- 28 Java Learning Subscription
- 37K Database Connectivity
- 155 Java Community Process
- 105 Java 25
- 22.1K Java APIs
- 138.1K Java Development Tools
- 165.3K Java EE (Java Enterprise Edition)
- 18 Java Essentials
- 160 Java 8 Questions
- 86K Java Programming
- 80 Java Puzzle Ball
- 65.1K New To Java
- 1.7K Training / Learning / Certification
- 13.8K Java HotSpot Virtual Machine
- 94.3K Java SE
- 13.8K Java Security
- 204 Java User Groups
- 24 JavaScript - Nashorn
- Programs
- 439 LiveLabs
- 38 Workshops
- 10.2K Software
- 6.7K Berkeley DB Family
- 3.5K JHeadstart
- 5.7K Other Languages
- 2.3K Chinese
- 171 Deutsche Oracle Community
- 1.1K Español
- 1.9K Japanese
- 232 Portuguese
Navigation list with routing to open menu pages in content area

I have developed an left sided menu using oj-navigation-list using json file which shows child menu as well.
My requirement is to have this main page displayed on screen all the time and user clicks on menu option to open the respective screen on right hand side content area. Just similar to jet home page.
However i am not able to achieve this. I tried to refer to routing cookbook example but i was only able to display the screen name on content area instead of displaying respective html page.
I have created an app based of basic template and then used navigation list to display vertical menu.
Any working example of this will be helpful for me to achive this requirement.
Best Answers
-
If you create a temporary project using the "navdrawer" starter template, you will see that there is an oj-navigation-list element inside of an oj-drawer-popup in the index.html file. This is what gets displayed when the template application is in a small or Mobile screen size.
The appController.js file is the viewModel for the index.html file. In there, you will see a variable named "selection". this is set to a value of
new KnockoutRouterAdapter(router)
and the "selection" attribute in the oj-navigation-list is also bound to the "path" attribute of the selection object.selection="{{selection.path}}"
This is what connects the Router state and the value of the oj-navigation-listEvery time the oj-navigation-list selection state changes, that value is also set for "selection.path" which is what the router is watching and it will try to load a new a Router state with that same name.
Hope that helps
-
Thank you John for nice explanation.
I modified the navDrawer template code to display only left side menu using oj-drawer-layout component and its working fine. Find attached screenshot for reference.
I will come back in case of any additional questions.
Also attached herewith appController.ts and index.html script code. Kindly let me know in case of any suggestions in the code and screen layout, etc.
I will come back with new questions as I dive into the JET during my project development.
Thanks,
Yogesh.
Answers
-
Find attached sample menu project screenshot based on basic starter template. Need help to know how to open menu options html pages in the content area of same screen.
Also find attached src scripts for your reference which has the oj-navigation-list code along with json script used to display the left side vertical menu.
-
The JET starter template (navdrawer) will show how this can be done. The Navlist is only used in a Mobile scenario, but you can set the off-canvas or oj-drawer (depending on version of JET used) to be always open instead of hiding if you like. Either way, the code is still there.
-
Thanks John for your response. As you had suggested i had already gone through the navdrawer starter template code and replaced the default screens with my project screens and navigation worked as expected.
However i want the menu to be vertical instead of top in the header position. So i tried to change the navlist to be vertical as per cookbook demo code but it didn't work for me.
If you can help with sample code of having the vertical menu with routing of respective menu item html pages to open in content area , it will be helpful for me.
Appreciate your response.
Thanks,
Yogesh.
-
If you create a temporary project using the "navdrawer" starter template, you will see that there is an oj-navigation-list element inside of an oj-drawer-popup in the index.html file. This is what gets displayed when the template application is in a small or Mobile screen size.
The appController.js file is the viewModel for the index.html file. In there, you will see a variable named "selection". this is set to a value of
new KnockoutRouterAdapter(router)
and the "selection" attribute in the oj-navigation-list is also bound to the "path" attribute of the selection object.selection="{{selection.path}}"
This is what connects the Router state and the value of the oj-navigation-listEvery time the oj-navigation-list selection state changes, that value is also set for "selection.path" which is what the router is watching and it will try to load a new a Router state with that same name.
Hope that helps
-
Thank you John for nice explanation.
I modified the navDrawer template code to display only left side menu using oj-drawer-layout component and its working fine. Find attached screenshot for reference.
I will come back in case of any additional questions.
Also attached herewith appController.ts and index.html script code. Kindly let me know in case of any suggestions in the code and screen layout, etc.
I will come back with new questions as I dive into the JET during my project development.
Thanks,
Yogesh.