cloudSampleSolution - how to show/hide nav items

[dean1645304375]

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.

[sean]

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