Option for Choice Field to select/deselect all other Options

Wishlist Form Builder
1

Add an option for Choice Field to select/deselect all other options for the field at once.

Perhaps this could be done with a separate conditional logic.
Instead of show and hide Choice Field → Select and deselect Options from the Choice Field.

image
image317×445 10.3 KB

Select all

image
image465×226 2.34 KB

Deselect all

image
image464×238 2.06 KB

2 Likes
2

is there any way to add another action bc for me i dont have multiple choice

2 Likes
3

Hi @Jak_Hanchett
currently yes but only for show and hide.

You have to set it to any. Then works another Conditional with other action

image
image320×176 5.2 KB

1 Like
4

Hi there, @Sina :waving_hand:

Thanks for the idea!

Could you please specify the name of the Form Builder widget, where you’d like to implement it? I’ll gladly check if there is a custom solution for this :slightly_smiling_face:

1 Like
5

Hi @Max

Thank you for asking if a workaround is possible.
It’s the “Glynt Bestellung” Page 3 und 4 in the Form Builder.
A large number of choice options :blush:

2 Likes
6

Thank you!

Here is a what’s been done by our devs:

We've added Paragraph fields to the 3rd and 4th page of your form

We’ve pasted a special code through the Code Editor of the Paragraph field to create a button with custom event:

<button class="choice-reset"
    onclick="window.dispatchEvent(new CustomEvent('es-reset-choices', {detail:{fields:['[auswahl-nach-produkten]', '[stylingprodukte]', '[pflegeprodukte]', '[farbprodukte]']}}));">Alle Auswahl zurücksetzen</button>

image
image332×976 20.7 KB
image
image327×457 9.68 KB


Custom JS code 
window.addEventListener('es-reset-choices', (e) => {
	e.detail.fields.forEach((field) => {
	  widget.setFieldValue(field, '');
	});
});

Custom CSS code 
.choice-reset {
  margin: 10px 0;
  border: none;
  padding: 10px 25px;
  cursor: pointer;
  border-radius: 5px;
  background-color: #f44;
  color: white;
  font-size: 18px;
  font-weight: 700;
  width: 100%;
}

.choice-reset:hover {
  background-color: #f66;
}

.choice-reset:active {
  outline: 2px solid #f44;
  background-color: transparent;
  color: #f44;
}

We’ve saved these changes in your widget, but haven’t published them yet. Please test it out and let me know how it works :slightly_smiling_face:

8

Hi @Max, WOW! Another good solution is to reset it with a button. Looks great. I’m impressed. :folded_hands:

However, I would still like to leave the suggestion as described.

1 Like
9

Sure! We’ll have it in mind and see what other users think about this feature :wink: