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: