You are viewing limited content. For full access, please sign in.

Question

Question

Select All option button in New Form

asked on January 18, 2024

Hi Community,

 

We have a business process to create that had a button that selects and clears all checkboxes.

We already created this button in classic form but want to use the new designer form.

How can we translate the JavaScript used in the classic designer form to the new designer form?

 

Thank you

0 0

Answer

APPROVED ANSWER SELECTED ANSWER
replied on January 19, 2024 Show version history

This requires Forms 11 Update 5 (Version 11.0.2311) or later, because prior to that, it was not possible to have a button on the form call a function in the sandboxed Javascript.

I have tested this successfully on version 11.0.2311.50553.

Add some checkbox fields to your form.  Give them CSS Class name of selectAllCheckboxes.

Add a custom HTML element to your form, add this HTML to it: 

<button onclick="markAllCheckboxes()">Mark All Checkboxes</button>
<br><br>
<button onclick="unmarkAllCheckboxes()">Unmark All Checkboxes</button>

 

Then add this script to the Javascript (JS) section of the form: 

//When the button is clicked to mark all boxes, run this function.
//Loop through each field with the selectAllCheckboxes class, then loop through
//each checkbox on the field to lookup its value.
//Then set all values on the checkbox field.
window.markAllCheckboxes = function () {
  var allCheckboxes = LFForm.findFieldsByClassName("selectAllCheckboxes");
  allCheckboxes.forEach(function(el) {
    var allCheckboxesOptions = el.options;
    var allCheckboxesValues = [];
    allCheckboxesOptions.forEach(function(el) {
      allCheckboxesValues.push(el.value);
    });
    LFForm.setFieldValues(el, {value: allCheckboxesValues});
  });
};

//When the button is clicked to unmark all boxes, run this function.
//Loop through each field with the selectAllCheckboxes class and clear all values.
window.unmarkAllCheckboxes = function () {
  var allCheckboxes = LFForm.findFieldsByClassName("selectAllCheckboxes");
  allCheckboxes.forEach(function(el) {
    LFForm.setFieldValues(el, "");
  });
};

 

Now you have two buttons that will mark all checkboxes or unmark all checkboxes on the form.

     

3 0
replied on January 19, 2024

This is the correct approach. I know this is for self hosted, but this functionality is not available in cloud if anybody were to try this.

1 0
replied on January 21, 2024

Hi Matthew Tingey,

Thank you for answering our query and giving us a code to use.

Appreciate it.

Thank you

1 0
replied on January 22, 2024

You're very welcome!

0 0
replied on January 22, 2024

Thank you again.

0 0

Replies

replied on January 29, 2024

Thank you for solving this problem. I  struggled to get a button to trigger my LaserScript and this post gave me the tools I needed to do it. Bravo!

button properties onclick="myFunction()"

window.myFunction = function (){
}

1 0
replied on January 29, 2024

Yeah, I'm really glad they added this functionality in 11 Update 5 - it opens some great options.

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.