Creating Nested Checkbox Groups 📋

Hey.

So this is a video to show you how to create unlisted checkboxes and checkbox groups.

so here we have a base here which is not repeated yet.

so it's built like.

So we have one group here and we have the main categories, the main category checkbox and we have its subcategories which is a div that holds another checkbox.

And basically we're going to duplicate this group for each group that we have and each of them we have their subcategories that will be also duplicated.

so the data that we want is looking like this.

so it differs a bit from what I've shown on previous comments.

but it's basically the same.

so we have for each category you have a label, value and a list of subcategories.

Each subcategory is an object with a label and a value.

if the category has no subcategories then you can just leave the array empty instead.

Totally fine.

So what we want to do is basically copy this.

and we want to create a new variable here.

I've already done it, I have a new category here which is of type array and we can just pass that inside of the default value.

so we have here the value, the current value of my variable.

And what we want to do is go back to our flexbox or container of our group.

And we want to repeat that when I toggle on the repeat item property we can see that by default we have these items, we can see that for each of them, my group is duplicated.

But what we want is not having a static item but we want to bind that to the variable that we just created it.

and now to have some more clarity on what we are doing, I'm going to grab my category checkbox, I'm going to select the label and I'm going to bind the text to label of the context in this instance is item data label and for each of my groups we have different label so is looking great.

I'm going to do the same for the subcategories here.

We want to repeat those items, bind that to the subcategories of each context categories that have been created we want to bind that to its own label context here.

so I guess now we have something that can be used depending on the use case, but it's already usable.

We can select or unselect any of those, checkbox.

So you can see here that my group here, my checkboxes are inside of the form container element.

And what that does is that if I select my checkboxes you can have this field name inside of the settings panel we have this field name property and I bound that to the label.

I've done the same here for the for the main category.

And what that does is if I go to let's say the form container here on the unsubmit workflow, if I go to the formula panel, if I open any formula panel here, we have this form and we have access to any of the values of the checkbox that have been created.

And I guess you can have that also on the page variables.

And if I select my container here, the form data and we have also the.

All of the checkboxes.

So basically we'll use those values to pass on any of the requests you want to make.

That's just part one.

If this behavior is okay, you can just stop now and it will work fine.

so the next thing we might want to do is that whenever the user is clicking on any of the subcategories we want to check also the The parent category of If all of these categories are all unchecked, we want to uncheck the parent category so the logic here is located on the workflow on each of the subcategories.

But first what we need to do is to bind the init value to the value that is attached to our category, our subcategory.

So that way whenever that value changes it will also reflect on the state of the checkbox.

so the next thing here is to also go to the, to any of the subcategory and go on the unchanged events, unchanged workflow here.

I've already done that.

the first action here is targeting the category variable.

And basically what this one does is it will just update if we go back here it will just update here the value of the checkbox.

we are just tagging the pyramid index and inside of the pyramid index we are targeting the subcategories and we are looking at the index of the current item and we are changing the value here and the value, we are just passing the event value here which is the value of the checkbox.

So after that we are making a check.

We are checking that is any of the value true.

true.

So this is JavaScript formula here.

so if this condition is true then we are targeting the parent category here and we are just updating the value and we're setting it to true.

And that action will change the init value of the checkbox and allow the state of the checkbox to basically turn true or false in the case that this condition is false.

And so if we try this then we have this happening, this behavior that is happening.

And one last thing that is basically like the same logic that this condition here you can also do the same on the parent category.

and you can also check all of the subcategories here if you want.

when you check that category.