416.467.9100 | Dundas Data Visualization | Login
Welcome Guest
This is the support page for the legacy Dundas Dashboard application. For assistance with the current Dundas BI application please click here.
Dashboard v5.0

This site makes extensive use of JavaScript.

Please enable JavaScript in your web browser and reload the page before proceeding.

Using Tabs to Navigate to Different Dashboards

Hide navigation
RSS
Modified on Mon, 21 Apr 2014 10:11 AM Categorized as Navigation, Samples, Scripting
Click to return to: Documentation

Overview

This article shows how to create a Tab-like look and feel to navigate to different dashboards.

The idea is to use a Label or Button control and define its Click Interaction to achieve the desired navigation. The first section describes how to navigate using text labels on each of the dashboards. The second section describes how to navigate between tabs using a template.

The section on template describes the use of buttons for navigation as well as additional functionalities such as changing the cursor shape and highlighting the tabs on load as well as on click. The concepts described in these methods can be applied to text labels as well and can be used even when not using a template.

The article also describes how to pass parameters when navigating by grabbing the parameters of the current dashboard and passing them to the next dashboard.

We recommend the use of buttons instead of text labels if the dashboard is going to be used in HTML version as well and not just Silverlight version.

Tip: watch the how to video: Handle Navigation

Download Sample Project

This examples in this article is based on the Sonatica Sample Project and can be downloaded from here: Download Sample

The sample includes all the scripts described in the article and you can modify the values and properties according to your scenario.

The online sample can be viewed at http://www.dundas.com/dashboard/online-examples/demos/Executive-Dashboard.aspx

Sonatica Executive Dashboard - Using Labels to Navigate to Other Dashboards.

Sonatica Executive Dashboard - Using Labels to Navigate to Other Dashboards.


Setup

Prerequisites

Make sure you already have the necessary Dashboards. For our sample, we have the following 3 Dashboards with the corresponding GUID. Simply obtain the GUID of any existing dashboard on your Dundas Dashboard server. Save the GUID value in Notepad for later use.

Tip: Refer to this article for instruction on how to obtain the GUID of the Dashboard.

Dashboards and their corresponding GUID:
  • Executive (Object Id = 7bcebd59-d425-4f29-9ea4-73033d50d515)
  • Sales (Object Id = de3fc12b-e5ea-40de-85f9-1d56631b6751)
  • Support (Object Id = 013b0749-2a63-4619-b303-805471a1d54f)

Steps

  • For the Executive Dashboard, add 3 Text Label controls:
    • Text Label # 1
      • Name = lblnav_exec
      • Text = EXECUTIVE
      • Border Brush = #FFA09E9E (highlighted, to indicate current dashboard)
      • Font Brush = #FFA09E9E (highlighted, to indicate current dashboard)
    • Text Label # 2
      • Name = lblnav_sales
      • Text = SALES
      • Border Brush = #FF056492
      • Font Brush = #FF056492
    • Text Label # 3
      • Name = lblnav_sup
      • Text = SUPPORT
      • Border Brush = #FF056492
      • Font Brush = #FF056492

Repeat the above for the Sales and Support dashboards. Change the Brush properties as needed to indicate current dashboard.

Code samples

The code below will add a functionality to Navigate to other Dashboards.

Add the following script in the Click Interaction of the control lblnav_sales in the Executive Dashboard.

Script inside the Label's Click Interaction to Navigate to the Sales Dashboard.

Script inside the Label's Click Interaction to Navigate to the Sales Dashboard.




services.NavigateToDashboard("de3fc12b-e5ea-40de-85f9-1d56631b6751");



Add similar script for the lblnav_sup label control's click interaction using the Support Dashboard's GUID.

Add similar script for the other 2 dashboards' label controls.

Note: For the SALES Dashboard, add script on the lblnav_exec and lblnav_sup label controls. For the SUPPORT Dashboard, add script on the lblnav_exec and lblnav_sales. Make sure to change the Dashboard's GUID depending on the Label control clicked.

Navigate using a Template

Tip: This sample is based on the Sonatica sample project. If you have not included this project during the installation of Dundas Dashboard, you can install the sample project from the Deployment Center to see firsthand how the sample below works. You can find more information on installing samples here.


The above method describes how to navigate between dashboards when the tabs are present on each dashboard. This section describes how to navigate between dashboards using a template. The advantage of using a template is that you can use the same theme, elements and tabs including formatting and scripting and apply it for navigation. You don’t have to recreate them on each dashboard. You can also apply the same template and navigate between a different set of dashboards instead of recreating the elements.

You can also pass parameters between the dashboards using the template and retain its value on navigation.

To read more about Dashboard Templates and how to set them up, please see: Using Templates

We will use the Sonatica dashboard project as an example which has three dashboards to navigate to: Executive, Sales and Support.

Setup

Create a new template and drop buttons or labels on it, one for each of the dashboards you want to navigate to. In case of Sonatica, there are three buttons: Executive, Sales, Support

Buttons used in Sonatica

Buttons used in Sonatica


On each button’s tooltip property, enter the object id of the corresponding dashboard:

  • Executive.ToolTip = 7bcebd59-d425-4f29-9ea4-73033d50d515
  • Sales.ToolTip = de3fc12b-e5ea-40de-85f9-1d56631b6751
  • Support.ToolTip = 013b0749-2a63-4619-b303-805471a1d54f

The id is retrieved when navigating using the sender.ToolTip property on button click as shown in the Click of a Tab section below. The advantage of using the tooltip is that when there are different set of dashboards you only have to change the object ids in the tooltip property of the button instead of changing it in the click interaction.

Hover over changes on the buttons: If you want the color of the buttons to change on hovering change the Hover-over Fill of the button. For example, a darker shade of the button background.

If you want the cursor to change, then change the Mouse Cursor property. For example, setting this to Hand, cursor changes to a hand shape whenever the mouse hovers over it and changes back to Arrow when the mouse leaves.



Template Load

In the Load interaction of the template, get the name of the dashboard that is currently loaded using services.CurrentDashboardTemplateChild.Name and store the name of the parameter whose values you want to pass to the next dashboard into a global variable using services.Globals() method.

For example: services.Globals"ParameterName" = "Parameter1";

Highlight the current dashboard You can highlight the currently loaded dashboard by changing the fill color of the dashboard that is loaded using the Fill property of the button:

DashboardSolidColorBrush buttonfill = new DashboardSolidColorBrush(); buttonfill.Color=Colors.Blue; buttonfill.Opacity=0.3; Button1.Fill=buttonfill;

Highlighted button

Highlighted button


If you have three tabs, such as in Sonatica, use the code similar to the one below on load and replace the button name and parameter name according to your scenario:

  1. UNSUPPORTED UNLIMITED
    if (services.CurrentDashboardTemplateChild.Name == "Executive")
    {
    //Highlight the button whose dashboard is currently being viewed
    DashboardSolidColorBrush buttonfill = new DashboardSolidColorBrush();
    buttonfill.Color=Colors.Blue;
    buttonfill.Opacity=0.3;
    MenuExecutive.Fill=buttonfill;

//Change the cursor shape MenuExecutive.Cursor=DashboardCursor.Arrow;

//Assign the parameter to the global variable services.Globals"ParameterName" = "DateRange"; }

else if (services.CurrentDashboardTemplateChild.Name == "Sales") { //Highlight the button of the dashboard is currently being viewed DashboardSolidColorBrush buttonfill = new DashboardSolidColorBrush(); buttonfill.Color=Colors.Blue; buttonfill.Opacity=0.3; MenuSales.Fill=buttonfill;

//Change the cursor shape MenuSales.Cursor=DashboardCursor.Arrow;

//Assign the parameter to the global variable services.Globals"ParameterName" = "Date";

}

else if (services.CurrentDashboardTemplateChild.Name == "Support")

{ //Highlight the button of the dashboard is currently being viewed DashboardSolidColorBrush buttonfill = new DashboardSolidColorBrush(); buttonfill.Color=Colors.Blue; buttonfill.Opacity=0.3; MenuSupportTab.Fill=buttonfill;

//Change the cursor shape MenuSupportTab.Cursor=DashboardCursor.Arrow;

//Assign the parameter to the global variable services.Globals"ParameterName" = "Date"; }


Click of a tab

When a tab button is clicked, get the parameter name from the global variable and get its parameter value and the grain level using the services.CurrentDashboardTemplateChild.GetDashboardParameterByName( ) method.

string parametername = services.Globals"ParameterName"; services.CurrentDashboardTemplateChild.GetDashboardParameterByName(parametername).GrainLevel; services.CurrentDashboardTemplateChild.GetDashboardParameterByName(parametername).FilterValues;

Now pass the name of the parameter along with the value and the grain level to the dashboard you are navigating to using the services.NavigateToDashboard() method

Change the color of the button when it is clicked by changing its fill color or the opacity. DashboardSolidColorBrush buttonfill = new DashboardSolidColorBrush(); buttonfill.Color=Colors.Blue; buttonfill.Opacity=0.2; sender.Fill=buttonfill;

For example, on click interaction of the Executive tab, add the following script which executes as soon as the button is clicked:

  1. UNSUPPORTED UNLIMITED
    if (sender.ToolTip == "") //check if there is a dashboard id associated with the button by checking its ToolTip property
    {
    services.ShowMessage("Coming Soon"); // show this message if no id is found
    }

else { try { /******* Pass Parameters *********/ string parametername = services.Globals"ParameterName";

ParameterInfoCollection params = new ParameterInfoCollection(); ParameterInfo param = new ParameterInfo();

param.ParameterName = "DateRange"; // Name of the target parameter param.GrainLevel = services.CurrentDashboardTemplateChild.GetDashboardParameterByName(parametername).GrainLevel; param.FilterValues = services.CurrentDashboardTemplateChild.GetDashboardParameterByName(parametername).FilterValues; params.Add(param);

//Navigate to the dashboard. services.NavigateToDashboard(sender.ToolTip, params);

/******** Apply color to button ********/ DashboardSolidColorBrush buttonfill = new DashboardSolidColorBrush(); buttonfill.Color=Colors.Blue; buttonfill.Opacity=0.2;

sender.Fill=buttonfill; } catch {} }


Use the above script on the click interaction of the other buttons as well and change the corresponding parameter name



Related Topics


Click to return to: Documentation

  Name Size
- Sonatica_Project.rar 0 B

About Dundas | Contact Us Follow us on Twitter! | Privacy Statement | Report Site Issues

Copyright © 2009-2014 Dundas Data Visualization, Inc.