Dynamic selection in Listbox – using Arrays in Design Studio 1.3
More often than not, we get dashboard and report requirements having two or more cascading filters wherein the list of values of one dimension depends on the value chosen in the other. Recently, I came across one requirement – to have a two-level cascading filter with City and Customer and to have the first 10 Customers of the chosen city, selected by default – and hence plotted on a 10-series-chart.
Shown below are the two multi-select listboxes.
In Design Studio, since there is no direct method to retain the first 10 Customers as default selection for a dynamically changing list, I had to think of a workaround – The Arrays feature in DS 1.3 was the perfect solution !
The list of cities in the first listbox is static and the customer list in the second (LISTBOX_2) is dynamic – the customer list is filtered by the city selection made in the first. This is the code segment I used, to select the first 10 customers by default.
/*Load the first 10 customers in an array variable*/
var arr=DS_1.getMembers(“ZR_CUSTOMER”, 10);
/*Define a string variable*/
/* Use a forEach loop on the array variable to concatenate the 10 customers, in str*/
- arr.forEach(function(element, index)
/*Use split function to split the string into individual values */
The forEach function, requiring two parameters, element and index, simply iterates through all the elements in the array.
Note that if you want only the first 3 customers in the array, then use 3 instead of 10.
var arr=DS_1.getMembers(“ZR_CUSTOMER”, 3);
An empty string variable str is used to append the first 10 customers using comma as the delimiter. For every iteration of the forEach loop, the str variable is appended with the internal key of the customer.
At the end of 10th iteration the str variable will be
Then the string is split into individual elements using str.splitfunction and is used to setSelected Values for LISTBOX_2.
Arrays are still primitive in Design Studio 1.3, but they can be capitalized really well through workarounds. This is just one example of how they can be used to easily achieve an often asked functionality.