Implementing a mobile optimized navigation menu

Contents[Hide]

1. Overview

As mobile usage for business applications is increasing in popularity, more users may view the same dashboard on different devices with different screen sizes (for example, large wall displays, desktop monitors, laptops, tablets, and smartphones). When designing a dashboard for different screen sizes, the best practice is to set the dashboard Re-Size mode to Responsive, Resize, or Scale. These will automatically adapt the dashboard to the browser window size. This article explains how to add a hamburger menu (also known as the menu button or navigation drawer) on smaller devices to navigate between dashboards and optimize user experience.

Mobile view of the above dashboard with hamburger menu button
Mobile view of the above dashboard with hamburger menu button

2. Understanding the Browser Window Resizing Event

To be able to switch between the original navigation buttons and the hamburger menu button, it is important to understand when the dashboard window resizing event is fired. When the dashboard loads for the first time, Dundas BI detects the browser’s window size and adjusts the dashboard canvas to fit. For this example, it is required to detect the browser window size when loading the dashboard and hide or show the navigation buttons accordingly.

When using smaller screen devices (such as tablets and smartphones), users tend to rotate the device to change the display orientation between portrait and landscape mode. The change of display orientation triggers the browser window resize event. This is another case to consider for hideing or showing different navigation buttons. This case can be handled via the dashboard Re-size action using similar steps to the ones detailed below.

3. Example Dashboard

Consider a simple dashboard based on the template grid example.

Sample dashboard with button navigation
Sample dashboard with button navigation

For the above dashboard, the default settings are given below:

  • Re-Size Mode: Responsive
  • Width: 1024
  • Height: 500

The dashboard also has two layers:

  • MainLayer, which contains two charts.
  • NavigationLayer, which contains three navigation buttons (Operations, Management, and Dispatch).

Note
The NavigationLayer buttons are inside a single cell and are not attached to any cell within the template grid, while the MainLayer charts are attached to different cells.

When the dashboard is viewed on a large monitor, it looks fine. However, when the dashboard is viewed on a smaller screen, the button texts are scrambled due to the space constraints.

Sample dashboard shown on a small screen
Sample dashboard shown on a small screen

4. Adding the Hamburger menu

To enhance the user experience shown above, add a new layer (HamburgerLayer) to the dashboard and add a Hamburger Menu image component to that layer. 

Sample dashboard with hamburgerLayer (NavigationLayer is hidden)
Sample dashboard with hamburgerLayer (NavigationLayer is hidden)

Next, add another layer (DropdownLayer) and add three buttons to that layer. The intention is to construct a menu that appears when a user clicks the Hamburger menu button. 

Sample dashboard with dropdownLayer
Sample dashboard with dropdownLayer

5. Adding the scripts

For this example, assume a minimum width of 1020 for the browser window. If the window width is less than 1020, you want to show the HamburgerLayer and hide the NavigationLayer. Otherwise, you want to show the NavigationLayer and hide the HamburgerLayer.

To achieve this, use the following script under the Ready action of the dashboard:

// Get the current window width
var WindowWidth = $(window).width();
// Get the current view object var currentView =this.getService("BaseViewService").currentView;
// Get the navigationLayer object var navigationLayer = currentView.layerAdapters.toEnumerable().first(function(la){ return la.friendlyName ==="NavigationLayer"; });
// Get the hamburgerLayer object var hamburgerLayer = currentView.layerAdapters.toEnumerable().first(function(la){ return la.friendlyName ==="HamburgerLayer"; });
// Check the window width and show/hide appropriate layers if(WindowWidth <1020){ if(hamburgerLayer.hidden){ hamburgerLayer.hidden=false; navigationLayer.hidden=true; } }else{ if(navigationLayer.hidden){ navigationLayer.hidden=false; hamburgerLayer.hidden=true; } }

While the dashboard is being viewed on a smaller screen, you want to show a dropdown menu if the user clicks/taps on the hamburger menu button. The idea is to show the DropdownLayer if it is hidden, and vice versa. To achieve this, add the following script under the Click action of the Hamburger menu button image.

var currentView =window.dundas.context.getService("BaseViewService").currentView;
var dropdownLayer = currentView.layerAdapters.toEnumerable().first(function(la){
    return la.friendlyName ==="DropdownLayer";
});
if(dropdownLayer.hidden)
    dropdownLayer.hidden=false;
else
     dropdownLayer.hidden=true;

6. Testing the Hamburger menu button

If you open the dashboard on a small screen device, it will detect the browser window size when the dashboard is at the Ready state and will show the Hamburger menu button on the top left corner, as per the design.

If you tap the Hamburger menu button, a dropdown menu with three buttons will appear underneath the Hamburger button.

7. See Also

Dundas Data Visualization, Inc.
500-250 Ferrand Drive
Toronto, ON, Canada
M3C 3G8

North America: 1.800.463.1492
International: 1.416.467.5100

Dundas Support Hours: 7am-6pm, ET, Mon-Fri