Break down your dashboard in several pieces

Imagine that you are building an Xcelsius dashboard which includes multiple tabs. The dashboard will need more logic and will contain more data as the amount of tabs expands, which affects the performance and complexity in a negative way. Instead of creating one huge dashboard, it is also possible to break a dashboard up into smaller pieces.

There are several benefits of breaking up your dashboard:

  • Better performance;
  • It is easier to extend your dashboard;
  • You can reuse parts of your dashboard;

This article describes how to split your Xcelsius dashboard into smaller pieces. Attached to this article, you will find a ZIP file that contains the source files of the example.

The image below shows a dashboard (called the Master dashboard) that contains a label based menu bar. In this sample we want to load a separate dashboard (called the child dashboard) for each of the menu items. Therefore, we add a slideshow component in which the separate dashboard will be loaded. We also want to demonstrate how to pass data from the master dashboard to the child dashboard. For that reason we add two text boxes (parameter 1 and parameter 2) that will contain the values that need to be passed.

To determine whether the dashboard is opened from InfoView or from an HTML file, we add the CELogonToken flash variable. This variable will be filled with the token provided by InfoView when the dashboard is opened from InfoView. If this variable is empty, we can assume that the dashboard is opened from an HTML file.

Before we can assign the URL property of the slideshow component pointing to the child dashboard, we first need to create the child dashboards.

For each of the menu items, we create a new Xcelsius dashboard. These dashboards should have the same width and height as the slideshow component on the master dashboard:

On this child dashboard we add some labels which will be used to display the values of the parameters that are sent from the master dashboard. To retrieve the parameters from the master dashboard, we add a flash variable connection. We define the following three different Flash Variables:

  • CELogontoken » containing the CELogonToken from InfoView;
  • Param1 » the first value entered in the text box in the master dashboard;
  • Param2 » the second value entered in the text box in the master dashboard;

Note that the CELogonToken is only required for dashboards that are published to InfoView. When publishing a dashboard to HTML, this flash variable will be empty.

For each of the flash variables we need to define a range (one cell). The text property of the three labels should be assigned to the right cells. Now that the child dashboard is done, it can be exported. You can either export it as an SWF file or publish the dashboard on InfoView.

Because we want to have one dashboard for each menu item, we need to create two other child dashboards as well. For this example I have just copied the child dashboard created above and changed the background color and title. Also export these files.

Now that the child dashboards are created, we can finish the master dashboard.

We need to tell the slideshow component in the master dashboard which URL to use for loading the child dashboard. We need to add some logic to change the URL based on the selected menu-item. Also we need to add the parameters created in the master dashboard. Depending on the way of exporting the dashboard (as SWF or on InfoView), the URL that should be used in the slideshow component is different:

Exported as SWF (or HTML)

If the dashboard is exported as SWF, you can use the relative URL to the child dashboards.

If the master dashboard is stored in folder ‘sample_master_child’ and the sub dashboards are stored in the folder ‘sample_master_child \ sub’, the following URLs can be used for each of the menu-items:

  • Menu-item 1 » sub\tab_1.swf
  • Menu-item 2 » sub\tab_2.swf
  • Menu-item 3 » sub\tab_3.swf

The selected parameters in the master dashboard can then be sent to the child dashboards by URL parameters. We have defined three flash variables in the child dashboards: “CELogonToken”, “Param1” and “Param2″. The CELogonToken is a variable provided by InfoView. Because we are not publishing the dashboard to InfoView, we don’t need to provide this parameter via the URL. An example of the URL to one of the child dashboards will be:

[notification type=”notification_info_tiny”]sub\tab_2.swf?Param1=first_param&Param2=second_param[/notification] Below the result:

Exported to InfoView

If the dashboards are published to InfoView, the relative URL to the child dashboard will not work anymore. In that case the URL to the child dashboards are defined via a JSP of Business Objects called ‘documentDownload’.

The CUIDs of the child dashboards are required in order to construct the URL for the slideshow component. The CUID of a file on InfoView can be found in the General Properties section of the file. We will also need to specify the kind of document as URL parameter (sKind) which is always ‘Flash’ for Xcelsius.

The URL to the tab_1 child dashboard will be as follows:

[notification type=”notification_info_tiny”]documentDownload?iDocID=AYkkVBaU4qBKp_8zr0mxuUM&sKind=Flash[/notification]

The parameters to the child dashboard can be sent via URL parameters as well. The CELogonToken will not be provided by Business Objects for the child dashboards, so this variable can be passed from the master dashboard to the child dashboards as a flash variable.

An example of the URL via documentDownload is:

[notification type=”notification_info_tiny”]documentDownload?iDocID=AYkkVBaU4qBKp_8zr0mxuUM&sKind=Flash&CELogonToken=am3he194@1355469Jww7Al7y3RufGZfH1355413JpdHrtYq8ovxMJWdONEOFF&Param1=test1&Param2=test2[/notification]

The result of the dashboard in InfoView is shown in the following image:

Some notes:

  • It is possible to send data from the master dashboard to one of the child dashboards, but it is not possible to send it from the child to the master. Thus, selections made in one of the child dashboards cannot be used in the master dashboard. If filters on the different child need to be applied, I recommend to set the filters on the master dashboard.
  • If you need to pass the CELogonToken as URL parameter, take care that you filter out the colon. The CELogonToken is build up like [host]:[port]@[token]. I recommend to take off the “:[port]” part.
  • If the URL to the slideshow component is changed, your screen will flicker one moment before the child dashboard is being displayed.
This article belongs to
Author
  • Ivo Moor