Skip to Content

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.

Global Script.png


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.


Changeview.png


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:

Search.png


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.

/wp-content/uploads/2016/05/lower_965171.png


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)
To report this post you need to login first.

2 Comments

You must be Logged on to comment or reply to a post.

  1. D D

    Hello,

     

    I have tried the global filter. but I am facing the following script error. May you inform me how I could solveĀ it?

    Error Message: can not convert from member to string.

    Source Code – Events – On Select

    Test 1

    var V_calmonth = CHART_2.getSelectedMember(“0CALMONTH”);

    GLOBAL_SCRIPTS.globalFilter(“0CALMONTH”,V_calmonth);

    Test 2

    var V_material = CHART_3.getSelectedMember(“0MATERIAL”);

    GLOBAL_SCRIPTS.globalFilter(“0MATERIAL”,V_material);

     

    Thanks,

     

    (0) 

Leave a Reply