Utilizing Global Script in Design Studio

[Former Member]

Utilizing Global Scripts in Design Studio

Global Script Component has been available for a while since Design Studio 1.4 and has been a powerful tool to write scripts that are easy to understand and maintain. But most importantly, it gives the dashboard developers a creative space with endless possibilities. I’d like to discuss a few simple use cases that Global Scripting comes in very handy, especially at the point when you give up counting the number of components in your dashboard. Hope everyone can join the discussion and help each other become more efficient in building DS applications.

1. Setting Global Filters

Most often time, setting a filter on the dashboards means setting a filter on several datasources. Soon you would be tired of writing DS_1.setFilter over and over again. Things get complicated when your target datasources change, and you have to go back to add or remove datasource in each component’s script. (Ouch!) By creating a Global Script names, for example, globalFilter(Dimension,Value), you can maintain all the filtered datasources in one place and just use the script to pass the filtering dimension and values. In the following example, I have a function called globalFilter to set the same filter to all of my datasources within the dashboard. From an information hierarchy perspective, I want to have a central control of all my datasources so that the scope of the data stays consistent.

DS_1.setFilterExt(filterDim,filterVal);

DS_2.setFilterExt(filterDim,filterVal);

DS_3.setFilterExt(filterDim,filterVal);

DS_4.setFilterExt(filterDim,filterVal);

DS_5.setFilterExt(filterDim,filterVal);

DS_6.setFilterExt(filterDim,filterVal);

Let’s say you want to set filter by selection on a chart, simple call the script:

FILTERS.globalFilter("SEND_CATEGORY", CHART_1.getSelectedMember("SPEND_CATEGORY"));

This function lets you add or remove datasources to your dashboard without having to go back and editing the scripts of each filter-setting components. You can have different scripts to control different groups of datasources if each group share the same filter control.

2. Navigating Between Different Views

If your navigation is as simple as PAGE_BOOK.setSelectedPageIndex(), there is no need for Global Script. But the scenario we’re talking about is when you need to manipulate components or datasources for a specific view. One example is when you use the same datasource for different visualizations in separate views (for the sake of performance). This list of use cases is never ending. So are the changes. That is why setting up a Global Script is very useful.

In this case, you can create a parent Global Script Component with functions orchestrating all events for each page initiation, for example:

These functions in most cases don’t need parameters. They simple include events or changes in component’s CSS classes and provide a single source repository for your code.

3. Drilldown Functionality on Chart

If you are using Visual BI Extensions VBX, which comes with a built-in drilldown functionalities and requires no scripting, skip this section. Otherwise, drilling-down on a single chart can make your script difficult to read, even for yourself.  Just a side note, you can by all means keep all your script in On Selection event of your chart, but it’s not going to look pretty. Global script not only helps you write cleaner code but also help you think more efficiently. Here is an example of how it can be done.

Here is what the code on global script looks like:

// Set filter fromDim

var filterValues ="";

chart.getSelectedMembers(fromDim).forEach(function(element, index) {

 filterValues = filterValues + ";"+element.externalKey;

});

//remove the first semicolon:

filterValues = filterValues.substring(1);

source.setFilterExt(fromDim,filterValues);

// Swap dimensions

source.swapDimensions(fromDim, toDim);

// Change level status

level = toDim

We keep a global variable level to keep trach of which level the visualization is on, so that we don’t have to request this information from the datasource when needed. There can be many more script on changes of UI element such as chart title, icons, etc. In addition, you can reuse this script on different visualization. Example of script execution:

If (level == “REGION”){

GLOBAL_SCRIPT.drilldown(“REGION”, CHART_REGION,”COUNTRY”,DS_GEOGRAPHY)

}

1. 4. Search Function

When it comes to a bit more complex script like this, utilize global script so you can reuse. Let’s say you save several Search Boxes using Input fields to search for different dimension values. You can utilize one function called search() in Global Script for all input fields with the following parameters:

var filteredList = [""];  // Search Result Set

if (keyword !="") // If the search key is not empty

{      var memberList = searchDatasource.getMembers("searchDim", 50000); // List of first 50 000 values from posted data

       memberList.forEach(function(element, index) {

         if (element.text.indexOf(keyword)!=-1)

         { // Add value with search key to Array of result set

              filteredList.push(element.externalKey);

         }

       });

                 

       target.removeAllItems();

       target.addItem("", "All");

    

       // Populate listbox with result set

       filteredList.forEach(function(element, index) {

       target.addItem(element, element);

       });

}

else {

       // If search key is empty

       // Populate listbox with all values (first 100)

       GET_MEMBERS.Listbox_loadItems(searchDatasource, "searchDim", target, 100);

       // Utilizing the loadItems function demonstrated previously.

}

An example of script execution On Value Change of an Input Field, returning list of Spend Category with the key word “corporate” and load to LB_CATEGORY:

GLOBAL_SCRIPT.search(“corporate”, DS_1,”SPEND_CATEGORY”,LB_CATEGORY)

1. 5. Convert strings to Uppercase / Lowercase

Since there isn’t any built-in function in DS to convert strings to upper case or lower case, we need to build them manually. Yes, that means going through the whole alphabet. This function is called uppercase(). This function is helpful when you need to reformat the search key before passing to the search function, since it is case-sensitive.

inputString=Convert.replaceAll(inputString, "a", "A");

inputString=Convert.replaceAll(inputString, "b", "B");

inputString=Convert.replaceAll(inputString, "c", "C");

// repeat till the end of the alphabet

……

inputString=Convert.replaceAll(inputString, "x", "X");

inputString=Convert.replaceAll(inputString, "y", "Y");

inputString=Convert.replaceAll(inputString, "z", "Z");

return inputString;

You can implement lowercase() the same way. Execute the function by calling

GLOBAL_SCRIPT.uppercase(inputString)