Skip to Content

The other day, I was working on a dashboard and I received requirement that dropdown box filled with calendar month should show the current year-month at the top of the list.

The reason for this requirement was the list was too long and the users needed to scroll all the way down to get the latest period.

Design Studio doesn’t have this kind sorting option for members when filling dropdowns and listboxes.

However, this can be done through scripting.

This is what I have done:

  1. Define array for members.
  2. String variables get the members
  3. Counter for number of items in a list
  4. Loop 1 to get the number of items and member names
  5. Define string variables for descending order.
  6. Loop 2 to sort items in descending
  7. Assign sorted items to  arrays variables.
  8. Loop 3 to assign items to listbox or dropdown

In the first loop we get the list of the items and number of items.

member.forEach(function(element, index) {
  str_asc_key = str_asc_key + element.internalKey + ";";
  str_asc_txt = str_asc_txt + element.text + ";";
  count = count + 1;
});

 

As a second step we create array variable for string_key and string_text

//Assign the member list from above to array variable
var str_asc_key_ary = str_asc_key.split(";");
var str_asc_txt_ary = str_asc_txt.split(";");

 

We need another loop to get the items sorted in descending order. For that, define string variables for items.

We are using the array variable above to get items. To get last item first, we used COUNT variable defined in the beginning. This will give the max item number and we will be subtracting INDEX in the loop. This way, we will be getting the last item in an array first and first item last.

//Define string variables for descending order
var str_desc_key = "";
var str_desc_txt = "";

//Loop 2 to sort in descending order and assign to descending string variables
member.forEach(function(element, index) {
  str_desc_key = str_desc_key + str_asc_key_ary[(count-1) - index] + ";"; //Last item first
  str_desc_txt = str_desc_txt + str_asc_txt_ary[(count-1) - index] + ";"; //Last item first
});

 

At last, we loop again to add items to listbox and dropdown.

//Assign descending strings to array variables
var str_desc_key_ary = str_desc_key.split(";");
var str_desc_txt_ary = str_desc_txt.split(";");

//Loop 3 to assign values to Lisbox and Dropdown
str_desc_key_ary.forEach(function(element, index) {
  if(element != ""){
  	LISTBOX_2.addItem(element, str_desc_txt_ary[index]);
  	DROPDOWN_2.addItem(element, str_desc_txt_ary[index]);
  }
});

 

The code:

//Define members
var member = DS_1.getMembers("0CALMONTH", 1000);

//define a counter to get number of items in a member list
var count = 0;

//define string variables for regular order
var str_asc_key = "";
var str_asc_txt = "";

//Loop 1 to get number of items and item list and assign them to string variables
member.forEach(function(element, index) {
  str_asc_key = str_asc_key + element.internalKey + ";";
  str_asc_txt = str_asc_txt + element.text + ";";
  count = count + 1;
});

TXT_COUNTER.setText("Number of Members: " + count); //See the number of items

//Assign the member list from above to array variable
var str_asc_key_ary = str_asc_key.split(";");
var str_asc_txt_ary = str_asc_txt.split(";");

//Define string variables for descending order
var str_desc_key = "";
var str_desc_txt = "";

//Loop 2 to sort in descending order and assign to descending string variables
member.forEach(function(element, index) {
  str_desc_key = str_desc_key + str_asc_key_ary[(count-1) - index] + ";"; //Last item first
  str_desc_txt = str_desc_txt + str_asc_txt_ary[(count-1) - index] + ";"; //Last item first
});

//Assign descending strings to array variables
var str_desc_key_ary = str_desc_key.split(";");
var str_desc_txt_ary = str_desc_txt.split(";");

//Loop 3 to assign values to Lisbox and Dropdown
str_desc_key_ary.forEach(function(element, index) {
  if(element != ""){
  	LISTBOX_2.addItem(element, str_desc_txt_ary[index]);
  	DROPDOWN_2.addItem(element, str_desc_txt_ary[index]);
  }
});

 

The result:

 

To report this post you need to login first.

7 Comments

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

  1. Mustafa Bensan

    Hi Zahid,

    For more compact code with less loops and variables you can try this for the same result 🙂

    var membersAsc = DS_1.getMembers("0CALMONTH", 1000);  // Initialise ascending member array
    var membersDesc = [membersAsc[0]];                    // Initialise descending member array
        membersDesc.pop();
    	
    var memberCount = membersAsc.length;	
    
    // Build descending member array
    membersAsc.forEach(function(element, index) {
      membersDesc.push(membersAsc[memberCount - index - 1]); 
    });
    
    // Populate Listbox and Dropdown
    membersDesc.forEach(function(element, index) {
      LISTBOX_2.addItem(element.internalKey, element.text);
      DROPDOWN_2.addItem(element.internalKey, element.text);
    });

     

    Regards,

    Mustafa.

     

     

    (1) 
  2. Giulia Sogaro

     

    Hi,

    I use this script to create a listbox with elements in descending order

    var membersAsc = DS_1.getMembers("0CALMONTH", 1000);  // Initialise ascending member array
    
    // Populate Listbox
    membersAsc.forEach(function(element, index) {
      LISTBOX_1.addItem(element.internalKey, element.text, 0);
    });

    regards,

    Giulia

    (1) 
  3. jing zhang

    Hi Zahid.

    I use this code to realize dropdown DESC sorting.

    DROPDOWN_1.setItems(JR.getMemberList(“CALMONTH”, MemberPresentation.INTERNAL_KEY, MemberDisplay.TEXT, 100));

    DROPDOWN_1.sort(false);

     

    Regards.

    Jing

    (0) 
  4. Zahid Yener Post author

    Hi Jing,

     

    I know that code, but that doesn’t work as the way I described here. It sorts based on month values first then year values. See the screenshot below:

     

    (0) 

Leave a Reply