Navigation list with routing to open menu pages in content area

user525840

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.

John 'JB' Brock-Oracle

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-list

Every 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

user525840

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.

TempBasicProject_Project_menu_page.PNG

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.

appController.ts.txt

index.html.txt

I will come back with new questions as I dive into the JET during my project development.

Thanks,

Yogesh.

user525840

TempBasicProject_Sample_menu_page.PNG

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.

TempBasic_src.zip

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.

John 'JB' Brock-Oracle

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.

user525840

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.

John 'JB' Brock-Oracle

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-list

Every 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

user525840

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.

TempBasicProject_Project_menu_page.PNG

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.

appController.ts.txt

index.html.txt

I will come back with new questions as I dive into the JET during my project development.

Thanks,

Yogesh.