Problem

[Manoj Kanade]

Hello team,

             I have two checkbox in my web  interface. In which if its checked it enables a dropdown  but on unchecked the drop down should be disabled again 

Can help me to remove the value of the checkbox  value variable once we deselect the check box.

             

please find the below demo script

var pf = RMPApplication.get("area_2");
console.log(pf);
if (pf =='["AGR"]'){
    id_agr_list.setVisible(true);
id_agr_list.setRequired(true);
//id_agr_list.setActive(true);
//id_tpol_list.setVisible(false);
 
}
else {
    id_agr_list.setVisible(false);
       

}

 

where "area_2" is value variable of check box and AGR is label of checkbox

Thanks and Regards

Manoj Kanade

[Zdravko Lazarevski]

Hello Manoj,

As I have understood, you have a checkbox and you need to implement listeners in order to make the dropdown box visible.

I think you can do it in two ways, depending on the kind of check box you are using (static or dynamic)

A. with a static checkbox 

In your web interface the values of the checkbox can be "true" or "false" depending if it is checked or not

So, the procedure is fairly straightforward, there will be direct listener on the dropdown list widget for the values of that checkbox:

and the checkbox widget has RMP variable "static_checkbox"

for your list in the js file (js list dropdown - on the picture), I am using the following code:

function rmp_set_vb_list_dropdown(vb_name,vb_value) {
var a = new RMP_List();  
a.fromArray(vb_value);
RMPApplication.setList(vb_name,a);  
return true;  
}

rmp_set_vb_list_dropdown("list_var",[{"label":"item1","value":"value1"},{"label":"item2","value":"value2"},{"label":"item3","value":"value3"}]);

where in the callback function I have the list_var => List variable of the dropdown widget as the first parameter (check the first image above)

and the second parameter is hard coded an array of objects labeled as item1, item2, item3... you can also include instead a dynamic variable (P_computed.<variableName>) which from the interface/process will fill the list labels and values.

Then back in the dropdown you put the condition for visibility, the values that will take from the checkbox (visible only when true)

That is all, it should work as it was in my case:

B. Dynamic checkbox

Well, this is more complex approach. I have also JS file that fills the content of the checkboxes. (I am not sure if you need this, but I will say few things anyway... :)) 

which is to analogous as for the dynamic dropdown list:

and the List Variable, as you see, is list_checkbox. I have used the naming of the variables, as in your case:

However, you will need here another javascript customized listener file, since a direct listener in the widget would likely not work... 

It is named js_listener in my test, with the following code:

RMPApplication.addListener(listenCheckboxes);

function listenCheckboxes(variable, value, index, widget) {
    console.log("variable",variable);
    console.log("value",value);

    var Arr_value = Array.from(value);

    var slice_arr = Arr_value.slice(2,7);
    console.log("ARR:", slice_arr); 
    var strg = slice_arr.join("");
    console.log("Str:", strg);
   
    switch (strg) {
           
        case "name1":
            console.log("inside_case- make dropdown widget visible");
        break;
        case "name2":
            console.log("inside_case2: make dropdown visible");
        break;
       
        default:
            console.log("remove visibility from dropdown");
}
}

Use the RMPApplication.addListener method then then in a function specify the VariableHandler(name, value, index, widget)

I have then did some array/string manipulation to extract the string of the checkbox value and used the switch statement to implement the logic of dropdown visibility.

You can modify and adjust the content, based  upon your needs, also use multiple checkboxes for one or more dropdown lists, use names/values of the checkboxes from a process etc. It is all up to you...

last important step is to include the dynamic variable area_2 into this js file:

   

Once you put the id_list_value.setVisible(true) or false inside the switch statement the desired result as this:

   

So, that's all. Let us know how did it go. Have a nice day.

Kind regards,

Zdravko Lazarevski

Akorbi Digital - RMP