Skip to Content
Author's profile photo Zahid Yener

Sorting in Descending order for Listboxes and Dropdowns

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:

 

Assigned Tags

      11 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Mustafa Bensan
      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.

       

       

      Author's profile photo Zahid Yener
      Zahid Yener
      Blog Post Author

      That's great. Yours is simpler.

      Thanks for your valuable comment.

      Author's profile photo chandra koduri
      chandra koduri

      Hi Mustafa,

       

      Thanks for sharing valuable script for the sorting.

      I have used above script it is working, but here how to show the "ALL" year/Month in drop down.

       

      Please help me in the above scenario.

       

      Thanks,

      Chandrasekhar

       

       

       

       

       

       

       

      Author's profile photo Krishna Boga
      Krishna Boga

      Hi, Are you able to get this figured out? I am also having the similar scenario.

      Author's profile photo Mohd Fahad
      Mohd Fahad

      Thanks for the smart code Zahid and Mustafa.

      Author's profile photo Giulia Sogaro
      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

      Author's profile photo Zahid Yener
      Zahid Yener
      Blog Post Author

      Hi Giulia,

       

      This is even better. 🙂  I think I need to pay attention more to help dialogs 🙂

      Author's profile photo jing zhang
      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

      Author's profile photo Zahid Yener
      Zahid Yener
      Blog 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:

       

      Author's profile photo jing zhang
      jing zhang

      Hi Zahid.

      I'm sorry I didn't get right what you said.You're right,in this scenario,my code will false.Maybe this due to our habit,we like to use "201711".

       

      Author's profile photo Sherri Blandford
      Sherri Blandford

       

      Is there a way to sort based on numerical value - for an example an array of values that looks like this [1500,1,200,6000,870,15]