SvyNavigationUX change to be top nav & flex layout?

Forum to discuss the new web client version of Servoy.

SvyNavigationUX change to be top nav & flex layout?

Postby pitc » Sat Nov 07, 2020 11:38 pm

Is it possible to change the svyNavigationUX template to be a flex layout instead of css layout?
I am examining the possible use of the svyNavigation for switching in and out forms which are all NG Client forms and all flex layout.
Currently my view of the svyNavigationUX shows it is css position layout. I am not sure I can use it so maybe just use the svyNavigation (its methods) as a base for my own form. I am in particular want to use a top nav rather than a side nav.
If anyone has tips on how to proceed please let me know.
Tom
prospect-saas.com
pitc
 
Posts: 115
Joined: Thu Nov 14, 2019 2:22 pm
Location: Ottawa, Ontario, Canada

Re: SvyNavigationUX change to be top nav & flex layout?

Postby paronne » Mon Nov 09, 2020 2:02 pm

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
paronne
 
Posts: 202
Joined: Fri Nov 02, 2012 3:21 pm

Re: SvyNavigationUX change to be top nav & flex layout?

Postby pitc » Wed Nov 11, 2020 5:33 pm

Thanks for these tips.
I am proceeding with the option of extending the abstract form.
However the fix that you refer to may not be sufficient. The new NavigationItem always creates a new UUID and therefore the new navigationItem is never matched.
So I think I have to either change the check for an existing form in the stack or create a new function to check for an existing form in the stack but not using the UUID.
Is my interpretation correct or way off?
Tom
prospect-saas.com
pitc
 
Posts: 115
Joined: Thu Nov 14, 2019 2:22 pm
Location: Ottawa, Ontario, Canada

Re: SvyNavigationUX change to be top nav & flex layout?

Postby paronne » Thu Nov 12, 2020 11:10 am

Hi,

your interpretation is correct, every navigation item has a new UUID indeed and therefore results always into a new navigation item.
The implemented template is limited to switch the active form and load the specified data ( if any data is given at the onOpen );
Therefore it doesn't matter if an existing navigation item is re-used or if a new navigation item is created and wouldn't be a problem to keep creating new Navigation Items.
Hope this clarifies it

Regards,
Paolo
paronne
 
Posts: 202
Joined: Fri Nov 02, 2012 3:21 pm


Return to Servoy NGClient

Who is online

Users browsing this forum: No registered users and 4 guests