Forum Documentation Showcase Pricing Learn more

Selecting max of 1 cell (using Ionic Checkbox) in a repeating group


#1

HI All,

Have a bit of a seemingly easy challenge here. When using the ionic checkbox plugin in a repeating group, I’m trying to find a way to limit the # of selected checkboxes to 1.

i’ve tried everything (that I can think of), including custom states and/or conditions, but can’t seem to figure it out.

Can anyone please please provide some guidance? Thank you!

-Christopher


#2

If you’re limiting it to 1, then you probably want to use a radio button UI instead of a checkbox (because checkboxes imply that users can select options independent of what else is selected which makes checkboxes confusing in this scenario).


#3

Hi @christopher.lyon :slight_smile: I’m not sure if something has been changed, but it looks like the dynamic preset status is working differently than it used to for the Ionic Checkbox element (there may be a bug, but I’m not sure). Here is an example which sets it up slightly differently, without the ‘dynamic’ preset status as that part looks like it’s not working as expected:

Preview:

Editor:

When previewing this page, Users can select a single Color in a Repeating Group of Colors. The custom state is set on the Repeating Group Colors element here:

Custom state: “SelectedColor” (type: Color, list: no).


The custom state would not be a list since we only want the User to choose one Color.

The “SelectedColor” custom state is set using these two workflows. The first being:
When: This IonicCheckbox is checked and Parent Group's Color **is not** Repeating Group Color's SelectedColor —>


This workflow runs when the Current User ‘checks’ a checkbox to select a Color. For example, if the Current User selects their favorite color is Aqua, and Aqua is not the current value of the SelectedColor custom state, this workflow would run.

The first action of this workflow sets the SelectedColor custom state value to be the Parent Group’s Color:

And the second action of the workflow resets “Group B” which contains the Repeating Group:


(Previously, I don’t think this reset action was necessary, but it seems that it’s needed now to ensure the checkboxes display the checked/unchecked states accurately)

The second workflow occurs when the Current User’s de-selects a Color. For example, if the Current User originally checked Aqua as their favorite Color, then clicking that checkbox again would de-select Aqua as their favorite Color – setting the “SelectedColor” custom state value to empty. The workflow is:
When: This IonicCheckbox is checked and Parent Group's Color **is** Repeating Group Color's SelectedColor —>

Since we need to ‘remove’ the Color from the custom state, the first action sets the SelectedColor custom state back to empty:

And like the first workflow, the Group B element is reset again to ensure the checkboxes display correctly:

Then, the checkboxes need two conditionals, so that the checkbox is checked when when the Parent Group’s Color is equal to the Repeating Group Color’s “SelectedColor” custom state:

And unchecked when the Parent Group’s Color is not equal to the Repeating Group Color’s “SelectedColor” custom state:

Last but not least! :slight_smile: There is a conditional on the Group Color element, which is within each Repeating Group Color cell:

This just darkens the background color of the current, selected Color in the repeating group:

That should work, but feel free to let me know if you have any questions! :slight_smile:


#4

Hi FayeWatson,

Thanks so much for this! This has probably been one of the most difficult workflows I’ve been trying to tackle. I wouldn’t have been able to figure this out if it weren’t for your guidance.

All the very best,

-Christopher


#5

So glad to hear it was helpful, Christopher! :smiley: It’s my pleasure!