Creating Dashboard Navigation with an HTML Widget

<< Click to Display Table of Contents >>

Navigation:  Enterprise > Widgets > HTML >

Creating Dashboard Navigation with an HTML Widget

The HTML widget has the ability of being a dashboard navigator using buttons to navigate to specific dashboards. A button can be configured to go to any dashboard with only the Dashboard ID. The Dashboard ID can be found in the URL (i.e., ...Default.aspx?d=dashboardId). Each button can be clicked to navigate to the dashboard or can also be clicked with the CTRL key pressed to open the dashboard in a new tab.


Adding Dashboard Navigation Buttons

1.Add an HTML widget to a dashboard.

2.Open the widget editor and copy and paste the following line of code in the HTML tab using the plain text editor:

a)<input type="button" class="md-button md-raised" onclick={openDashboard(myDashboardId)} value="myButtonName" />

b)Change myDashboardId, in the code from Line a, to the desired dashboard destination.

c)Change myButtonName, in the code from Line a, to the desired 'Name' on the button.

d)Repeat Steps a-c for each button.

3.Copy and paste the following code after the buttons:

function openDashboard(dashboardId) {
  if(event.ctrlKey){"default.aspx?d=" + dashboardId);
  } else {
    location.href="default.aspx?d=" + dashboardId;

4.Save the changes.



Color Coding Individual Dashboard Navigation Buttons


1.Add the following code snippet inside the button that needs color: style="background-color: myButtonColor"

2.Change myButtonColor to the desired color or hexadecimal of the desired color.

a.Example: <input type="button" class="md-button md-raised" style="background-color: lightgreen" onclick={openDashboard(178)} value="Admin" />


b.Example with hexadecimal: <input type="button" class="md-button md-raised" style="background-color: #98e293" onclick={openDashboard(178)} value="Admin" />

To get hexadecimal values of colors, google "hexadecimal color picker" and use Google's hexadecimal color picker.

3.Save the changes.


Hint: If the button text is not visible because of the background color, add color: myButtonTextColor to your style separated with a semicolon after the background color. Example: <input type="button" class="md-button md-raised" style="background-color: black; color: white" onclick={openDashboard(178)} value="Admin" />