Hi, interesting question from you.
The svyNavigation module is meant to facilitate implementation of Navigation templates and Navigation best practices.
Navigation best practices allow to easily intercept navigation events and interrupt navigation when needed (for example prevent navigation when there are pending edits, see
https://github.com/Servoy/svyNavigation ... ion-events)
It comes with a Navigation API backbone and a default UI template implemented on top of the Navigation API.
Is possible to customize the template in the extended form or creating a custom UI template (extending the abstract form svyAbstractNavigationUX).
Using Flex layout form isn't a concern. Note there is no problem in nesting Responsive Forms (using Flex Layout) within Simple CSS forms and viceversa. The Sidenav navigation use the
sidenav component as a tabless container, switching the containedForm depending on the clicked menu item. As long your inner flex layout form make use of 100% height the outer form can be Simple CSS.
I can recommend one of the following options:
OPTION 1: You can still use the svyNavigationUX$Sidenav and hide the sidemenu items.
A. To hide all menu items set the following properties in the sidenav element:
- open: false
- slideAnimation: SLIDE-MENU
- togglePosition: HIDE-TOGGLE
B. Populate the Navbar with menu items instead of the sidenav.
Use the function loadNavbarItems for it, the itemId should be the name of the form to navigate to.
- Code: Select all
function loadNavbarItems() {
var menuItems = [];
/** @type {CustomType<bootstrapextracomponents-navbar.menuItem>} */
var menuItem;
// HOME
menuItem = new Object();
menuItem.itemId = "homeDashboard";
menuItem.text = "DASHBOARD"
menuItem.iconName = "fa fa-th-large";
menuItems.push(menuItem);
// CUSTOMERS
menuItem = new Object();
menuItem.itemId = "customersTableView";
menuItem.text = "CUSTOMERS"
menuItem.iconName = "icon-contacts";
menuItems.push(menuItem);
// ORDERS
menuItem = new Object();
menuItem.itemId = "ordersTableView";
menuItem.text = "ORDERS"
menuItem.iconName = "icon-box";
menuItems.push(menuItem);
menuItem = elements.navbar.createMenuItem('Search', DEFAULT_NAVBAR_ACTIONS.SEARCH, 'RIGHT');
menuItem.displayType = 'INPUT_GROUP';
menuItem.styleClass = 'closed searchbar';
menuItem.inputButtonStyleClass = "btn-default";
menuItem.iconName = "fa fa-search";
menuItems.push(menuItem);
if (security.getUserName()) {
menuItem = elements.navbar.createMenuItem(security.getUserName(), DEFAULT_NAVBAR_ACTIONS.USER, 'RIGHT');
menuItem.displayType = 'MENU_ITEM';
menuItem.iconName = 'fas fa-user';
menuItem.styleClass = 'no-border';
var submenuItems = [];
var logout = elements.navbar.createMenuItem('Logout', DEFAULT_NAVBAR_ACTIONS.LOGOUT);
//logout.iconName = "fas fa-sign-out-alt";
submenuItems.push(logout);
menuItem.subMenuItems = submenuItems;
menuItems.push(menuItem);
}
return menuItems;
}
C. To let the Top Navbar swith active form you need to apply a
fix i just pushed today (which will be available with the next release of December).
In the svyNavigationUX$Sidenav.js within the onNavbarMenuItemClickedHandler function.
Replace the following line of code
- Code: Select all
scopes.svyNavigation.open(menuItemId)
with these 2 lines
- Code: Select all
var item = new scopes.svyNavigation.NavigationItem(menuItemId, menuItem.text);
if (scopes.svyNavigation.open(item)) {
OPTION 2: Create your own UI Navigation template extending the svyAbstractNavigationUX form. You can copy most of the codefrom the svyNavigationUX$Sidenav form since can have a similar setup; you can use a tablesspanel container instead of the sidenav to switch the active form during navigation.
Regards,
Paolo