UiPath Forms Tutorial - Check / Uncheck All Select Boxes

[Praga_Vivek (Pragadeeswaran Vivekanandan)]

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
   

3. Edit the ‘Check / Uncheck All’ button and change the Action to Event and provide an event name.
   
   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);
}

6. Save and test the workflow.

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

Happy automation

Thanks,
Praga

[Nithinkrishna]

Pretty useful @Praga_Vivek

I came across many forum queries with this case.

Thanks
#nK

[phong_huy]

@Praga_Vivek

Check / Uncheck All

thank you. its wokrs like a charm

[ngweijie97]

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!

[Praga_Vivek (Pragadeeswaran Vivekanandan)]

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.