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(); = "homeDashboard";
   menuItem.text = "DASHBOARD"
   menuItem.iconStyleClass = "fa fa-th-large";

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

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.
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.

Software Engineer
Servoy USA
Posts: 346
Joined: Mon May 21, 2007 6:26 pm
Location: USA

Return to Methods

Who is online

Users browsing this forum: No registered users and 2 guests