UiPath Forms Tutorial - Check / Uncheck All Select Boxes

Hi,

Recently, I came across a customer requirement where we need to check / uncheck all select boxes in an UiPath form. I am able to come up with a working solution after doing some R&D. I wanted to share the solution for the benefit of others.

Below are the steps to build Check/Uncheck All option for select boxes in an UiPath form.

  1. Create a form and add a Select box and Button component

  2. Add few values to the select boxes and rename the button component like below
    formDesign

  3. Edit the ‘Check / Uncheck All’ button and change the Action to Event and provide an event name.
    buttonSettings
    Note: Event name and the field key should not be the same.

  4. Under logic, create a new logic and event trigger as shown below

  5. Add new Action of type ‘Custom Action’
    Enter the below Javascript and Save the logic.

instance.emit('updateData', {});

if(Object.values(data.selectBoxes)[0]){//Check if the first select box is checked
  //Uncheck all if already selected
 Object.keys(data.selectBoxes).forEach((prop) => data.selectBoxes[prop] = false);
       }else{
  //select all if unselected
  Object.keys(data.selectBoxes).forEach((prop) => data.selectBoxes[prop] = true);
}
  1. Save and test the workflow.

Sample project can be found here
Sample Project.zip (14.1 KB)

Happy automation :slightly_smiling_face:

Thanks,
Praga

5 Likes

Pretty useful @Praga_Vivek :innocent::+1:

I came across many forum queries with this case.

Thanks
#nK

thank you. its wokrs like a charm

Hi, understand that this works with ‘Select Boxes Component’, can I check if you have solutions if I need to have a button that can check or uncheck all checkbox component in the datagrid in UiPath Form? Thank you very much!

You can follow the above blog post and use this code to check all the checkboxes inside a datagrid component instead of the code given in Step 5.

instance.emit('updateData', {});

//Uncheck if the first checkbox is checked
if(data.dataGrid[0].checkbox){
  data.dataGrid.forEach(item => {
    item.checkbox = false;
  });
}else{ // Check all checkboxes
  data.dataGrid.forEach(item => {
    item.checkbox = true;
  });
}

Note: dataGrid is the field key of the data grid component and checkbox is the field key of check box component.

This topic was automatically closed 3 days after the last reply. New replies are no longer allowed.