In my use case there is requirement to navigate to JET module, without displaying it in menu structure. Navigation is a simple task, more complex is to make sure current menu item will be unselected after navigation to invisible module (so that later we are able to re-open it).
There is accounts module in JET sample app (download it from GitHub - JETModularArchitecture):
Accounts module is included into router, but not included into array of visible menu items:
On button click (dashboard module) we call function, where router navigation happens to accounts module:
Let's see how this functionality works. I click on Accounts button to call a function and force router navigation:
Accounts module will be opened (through router navigation), but currently highlighted menu item will stay as it was (Dashboard). This makes it impossible to navigate back to Dashboard (unless we navigate to another module and then navigate to Dashboard):
Solution for this problem is to change selection property of ojNavigationList component in HTML:
Instead of pointing to router stateId directly, we should point to computed function. This will help to control currently selected menu item. But we still need to update router state, when menu item is selected. For that reason I'm using beforeSelect property, which points to function, where router state is changed:
Selection property value is calculated by function, which returns NULL, if accounts is currently selected module. This allows to remove focus from Dashboard menu item, after navigation to accounts. Once focus is removed, we can click back on Dashboard and navigate. For all other modules - current router state ID is returned. Select handler call router API to navigate to the module:
Navigation to accounts module from dashboard. Dashboard menu item doesn't remain focused anymore:
Navigation back to dashboard work too:
There is accounts module in JET sample app (download it from GitHub - JETModularArchitecture):
Accounts module is included into router, but not included into array of visible menu items:
On button click (dashboard module) we call function, where router navigation happens to accounts module:
Let's see how this functionality works. I click on Accounts button to call a function and force router navigation:
Accounts module will be opened (through router navigation), but currently highlighted menu item will stay as it was (Dashboard). This makes it impossible to navigate back to Dashboard (unless we navigate to another module and then navigate to Dashboard):
Solution for this problem is to change selection property of ojNavigationList component in HTML:
Instead of pointing to router stateId directly, we should point to computed function. This will help to control currently selected menu item. But we still need to update router state, when menu item is selected. For that reason I'm using beforeSelect property, which points to function, where router state is changed:
Selection property value is calculated by function, which returns NULL, if accounts is currently selected module. This allows to remove focus from Dashboard menu item, after navigation to accounts. Once focus is removed, we can click back on Dashboard and navigate. For all other modules - current router state ID is returned. Select handler call router API to navigate to the module:
Navigation to accounts module from dashboard. Dashboard menu item doesn't remain focused anymore:
Navigation back to dashboard work too:
No comments:
Post a Comment