cloudSampleSolution - how to show/hide nav items

Questions, tips and tricks and techniques for scripting in Servoy

cloudSampleSolution - how to show/hide nav items

Postby dean1645304375 » Sat Feb 19, 2022 11:40 pm

In the Servoy cloudSampleSolution I would like to change the below mainNavMenu loadMenuItems method so each navigation item will have a checkbox on its left. How can I do this?

Code: Select all
function loadMenuItems() {
   /** @type {CustomType<servoyextra-sidenav.MenuItem>} */
   var menuItem;
   var menuItems = [];
   var menuSubItem;
   var menuSubItems = [];

   // HOME
   menuItem = new Object();
   menuItem.id = "homeDashboard";
   menuItem.text = "DASHBOARD"
   menuItem.iconStyleClass = "fa fa-th-large";
   menuItems.push(menuItem);

   // CUSTOMERS
   menuItem = new Object();
   menuItem.id = "customersTableView";
   menuItem.text = "CUSTOMERS"
   menuItem.iconStyleClass = "icon-contacts";
   menuItems.push(menuItem);


My end goal is to have a toggle button at the top of the nav list, that will allow users to hide or show table names based on whether they are checked. All suggestions are welcome.

Dean Westover
Choices Software, Inc.
dean1645304375
 
Posts: 1
Joined: Sat Feb 19, 2022 10:59 pm

Re: cloudSampleSolution - how to show/hide nav items

Postby sean » Tue Mar 29, 2022 9:00 pm

Hi Dean,

What you describe is not directly possible with the sidenav component. It represents a simple view of menu items which can be nested and are clickable.
You can defintely show a checkbox icon, i.e.
Code: Select all
menuItem.iconStyleClass = "fa fa-check";

But that is just decorating th emenu item and is not separately clickable from the item itself.
For this, you would need a custom component.

Best,
Sean
Software Engineer
Servoy USA
sean
 
Posts: 370
Joined: Mon May 21, 2007 6:26 pm
Location: USA


Return to Methods

Who is online

Users browsing this forum: No registered users and 8 guests