1.4 new features: Using the checkbox group

[jeroenvandera]

In this second blog about the new features, I thought I would try and look if I could have a little fun with the checkbox group. The main advantage of this component over the old one that you do not have to set each checkbox individually.

Additionally it has methods for adding and removing elements as well as a method for updating the values that are selected.

In my tryout I wanted to see if I was able to manage a menu with checkboxes programmatically in script by using variables.

The endresult was this :

When you click a menu item you open a submenu with a checkbox group. The values in the checkbox group, including the check, is being populated from variables that were set at startup.

This kind of menu can be a nice way to enable a light form of OLAP navigation. The option to add or remove filters from your dataset.

Button

When you click the button it stays in a clicked status, additionally the script will position the submenu underneath the clicked button. If the button already was in a clicked position the submenu will hide and the clicked status disappears.

In the menu itself there are two methods referring to a global script function :

GLOBAL_SCRIPTS_1.setSubMenu("dim1",MENU1);

GLOBAL_SCRIPTS_1.setButtons(MENU1);

The first function will set the checkbox group, the second one will set or reset the clicked status of the button itself.

The variables

As you cannot work with array variables I used separators to create two dimensions. The , sign was the separator between rows, the : sign was the separator between columns.

Dim1 = "1:North,2:East,3:South:X, 4:West:X";

Dim2 = "1:Blue,2:Green,3:Black,4:Red:X";

Dim3 = "1:Adagio,2:Largo,3:Presto:X,4:Grave";

Dim4 = "1:Mozart,2:Beethoven,3:Locatelli,4:Mendelsson Bartoldi:X";

In the list above you see that a row can hold two or three fields. A third field is added when the field should start as Selected.

(re)setting the buttons

to set or reset the buttons I created a function with the input parameter “clickedPanel” type Panel. I use the input parameter to check the current CSS class. If the css class wasn’t already clicked it will at the end set the status to “clickedbutton”.

Before the last line all the buttons (including the clicked one) are set to standard button setting.

var orgCSS = clickedPanel.getCSSClass();

MENU1.setCSSClass("button");

MENU2.setCSSClass("button");

MENU3.setCSSClass("button");

MENU4.setCSSClass("button");

if (orgCSS != "clickedbutton") {clickedPanel.setCSSClass("clickedbutton");}

Using the variable to set up the menu.

Reading the variable

To read the variable I used a nested forEach loop. One at row level and within the row one at field level.  At the end of each loop at row level a new checkbox is added using the addItem method. The key and value were derived by splitting the and assigning the 0 index row and 1 index row to key and value respectively.

var arr = inputstring.split(",");



arr.forEach(function(element, index) {

                arr2 = element.split(":");

                arr2.forEach(function(element, index) {

                                if (index == 0) { key = element;}

                                if (index == 1) { value = element;}

                                if (index == 2) {

                                if (selectedKeys.length > 0)

{newInput = ",";} else {newInput = "";}

                                               selectedKeys = selectedKeys + newInput + key;

                                                                                              }

                });

                CHECKBOXGROUP_1.addItem(key, value);

});

You also see that when a third field is present (index 2) then the key value is added to the selectedKeys string variable. Using the same split technique I’ve created a new array and used this to set the selected values with the method :

CHECKBOXGROUP_1.setSelectedValues(selectedArr);

The Entire Code as it was set in the global Script Object:

Conclusion

With the checkbox group you have options to create large menus. The best way is using lists from your data source, but you can use variables internally in the applications to achieve a large amount of control over your components.

I like the new component but I am looking forward to the addition of global variables. I used a lot of crooked methods of splitting strings to achieve things that are straightforward with a few added possibilities that are standard in JavaScript.

Although this is not one of the big additions, I am happy enough to have it in my arsenal. It does give options to easier create options for users.

Note: I do not say you have to build applications like this. This was just something I thought of trying to find a way to test the waters with new functionality. Ideas may vary from useful via not so useful to outright crazy :wink: