How to make a repeating group checkbox single select

Hi,

What I’m trying to achieve
My goal is to uncheck a user’s previous selection when they select a second selection (single select not multiple select) within a repeating group.

The current setup
I have a simple repeating group with a name and an empty checkbox element in each row. The user can select a name from the list by tapping the empty checkbox. A workflow will trigger when the empty checkbox is clicked, which:

  1. Updates a selected-name custom state with their selection
  2. Shows a full checkbox (selected checkbox UI) for the current row
  3. Hides the empty checkbox for the current row

Once a user then selects a second empty checkbox, the above workflow still triggers. This is intended. A second workflow will trigger when the full checkbox (selected checkbox UI), which:

  1. Removes the selection from the selected-name custom state
  2. Shows an empty checkbox for the current row
  3. Hides a full checkbox (selected checkbox UI) for the current row

My issue is that the user can select more than one option within the list, and consequently trigger the first workflow (this is fine). However, I need the second and third step to occur for when the user attempts to select a second option. At the moment, the full checkbox of their first selection is still visible. I think it’s a great UX if the user has selected a choice, selects a second choice then the system unchecks their first choice, rather having to add extra steps for the user.

I tried referencing the index of the first selection but had no luck as I couldn’t find a way to access an element using from some of index search within a repeating group.

Any help much appreciated.

When they check something is it storing their selection in the database? Or is this purely just changing a custom state?

1 Like

Hi there, @John245859… if I understand your post correctly, I made a quick example that does what you described, and a custom state should work just fine. By the way, my custom state is on the index page, it is called selected checkbox, and it has a state type of number.

In my example, both checkbox icons are not visible on page load. The empty checkbox icon has the following condition on it.

empty

The full checkbox icon has the following condition on it.

full

Finally, when the empty checkbox icon is clicked, this workflow runs.

When the workflow runs, a previously selected row (which is showing its full checkbox icon) will become unselected (showing its empty checkbox icon again), and the newly selected row will show its full checkbox icon.

Hope this helps.

Best…
Mike

2 Likes

Hi @mikeloc,

Really appreciate your detailed response. I did implement your method and it has worked, so thank you.

However, I now have another issue. My repeating group is actually dynamically displayed based on a user search.

If a user inputs a search, selects a name (and index), then clicks back into the input search and changes their input value, the list displayed is therefore dybamically changed, the index is kept and the icon is visible on the incorrect name.

I’m not sure how to go about this.

Thanks.

1 Like

Just a custom state

Can you just clear the custom states when a search is performed?

1 Like

Sounds like instead of storing the index in a custom state you should just store the actual Thing itself. Then you can search without clearing the custom state

1 Like

@mikeloc @tylerboodman Thank you both. It’s working as intended now.

1 Like

This topic was automatically closed after 70 days. New replies are no longer allowed.