Parent/Child Checkboxes and alignment

[tg2148 (Tom)]

Hi, I am new to Xano/WeWeb and have quickly discovered it’s not for the faint of heart!

To learn - I am duplicating a vessel catalog. But am having trouble with Parent/Child checkboxes.

1 - You add a vessel and save.
2 - Then you choose a Category/SubCategory for the vessel. Which is where I am stuck.
3 - Alignment is off between parents and their checkboxes
4 - Hoping someone can look at a screen capture and tree structure and give me a helping hand.
5 - So many nesting/renesting things, I try, are not permitted.
6 - But I feel like I’m close to crossing this hurdle (famous last words).

I think from the image - the alignment and/or nesting issue is apparent. But will answer any questions I can. Thank you.

[jptrinh (Jean-Philippe Trinh)]

Hey @tg2148
Welcome!

I’m not 100% sure of what’s the final design you want to achieve, but here is one way of structuring it, maybe with less nesting which can complicated things. You can add style to the div Subcategories to add extra left padding too. Would that answer your need?

I see other struggles with that type of component when you’ll want to interact with it, store values.. let us know if you run into other complications, happy to help!

[tg2148 (Tom)]

Thank you Jean-Phillipe! Appreciate this.

Little background - this is a catalog of inland marine vessels.

• Agents will login->add vessel specs → save to continue and this list will appear.
• They will click on a child category and parent will highlight - so two checkboxes active per vessel. (Or atleast that is my goal)
• I am recreating based on a wordpress/woocommerce catalog.
• At some point I would like two columns that collapsed to one column on mobile - just for space saving → not the categories in one column and sub in another. Two columns to keeps it from being a long scroll. If that makes sense.

But this has been harder than first thought. And after three days of trying to get strategy to work - finally broke down and wrote on community. The nested flexboxes with repeating elements has been nothing short of a bit of a nightmare (I am novice at best) - But hey - at least I have gotten things connected up to this point. (it’s the small victories that keep me going)

Looking forward to setting up using your suggestion shortly - very cool! And thanks again.

And - I’m stuck. I wanted to follow what you did → but problem is that I don’t know the underlying elements as you renamed them. Looking at the structure:

• What is in “Container” - that is currently collapsed.
• Is “Subcategories” Also a flex box?
• Any descriptions would be a huge help.

I will experiment in the meantime.

[tg2148 (Tom)]

Well… I got it. I think. I guessed at some things. Then ended up moving the subcategory up - as a last resort. And the nesting took.

Question 1: Why I am grateful this worked, I don’t really understand why this solution worked when previous attempts did not. Thoughts?

Question 2 (nevermind): As a column the list is long. Is there an easy way to break it into a second column at “Model Bow for Sale” but have it collapse into one for mobile? → Not a fan after breaking it into 2 col. grid.

Functionality Question (Most Important): When a SubCategory is clicked - I would like that main category to also highlight. i.e. Check “Tank Barges for Sale” and “Barges for Sale” automatically checks also. – Both the Category and the SubCategory need to be passed back.

[jptrinh (Jean-Philippe Trinh)]

Tbh, you haven’t chosen the easiest component to start haha Components in repeated list are a bit trickier because of that particular context.

Moving the subcategories up was the good move. Because when nested inside another checkbox, you have style dependency that you can easily avoid (you get extra spacing, and the checkbox is oddly positioned in the middle of your group). Also, the nesting is not necessary.

For column, you can check the display: grid property. And style is desktop-first, so you can set different styles on smaller breakpoints.

The functionality is where it gets tricky. But the idea is to have one variable that is storing all of your data, including the labels and there values. For instance:

{
    name: { label: "Barges For Sale", value: false },
    subcategories: [
      { label: "ABS Barges For Sale", value: false },
      { label: "Crane Barges For Sale", value: false },
      { label: "Deck Barges For Sale", value: false },
      { label: "Hopper Barges For Sale", value: false },
      { label: "Quarters Barges For Sale", value: false },
      { label: "Sectional Barges For Sale", value: false },
      { label: "Tank Barges For Sale", value: false },
      { label: "Spud Barges For Sale", value: false }
    ]
  }

That variable is bound to your elements (like you probably have already). An additional step might be required if data is from a collection (but that can be tackled after)
Everytime you interact with the checkboxes, you’ll want to modify the value stored in that variable so that the variables always reflects the states of your checkboxes.
You have an initial state prop on the checkbox that needs to be bound to the value in the variable.
(I think I talk about that in this video)

To get that automatic check of the category, you can add an additional action on the on change workflow on each checkbox.

I know that’s a really rough explanation of how to do this. But I hope it can still gives you keys to keep you going! I can do an walkthrough video later on if you need

I love a good challenge so here is what I managed to achieve (I’ve cheated a bit with a custom component to get that indeterminate state on the checkbox)

[tg2148 (Tom)]

Thank you for the example and taking the time to help. (And here I thought a checkbox schema was probably an easy built-in function! I could not have been more wrong!) :^)

The reason I approached it with checkboxes is that I didn’t want to deviate from the existing dashboard the agents use. Turns out it’s by necessity.

1 - I thought there was only a parent/child correlation - I have learned that MORE than one parent can be checked.
2 - A good example is [1] Cranes and Dredges for Sale (Parent)> [2] Self-Propelled For Sale (child), AND [3] Non-US Flagged
3 - So while this seems to be built-in behavior in Wordpress or WooCommerce → it is scratch built in WeWeb.

If you could go through an example of two categories, each with a subcategory - with all connections/variables, that would be a huge help. I will go back and rewatch your video and see if I can duplicate that and if I understand it in context to what I am trying to do.

Thank you again!

[jptrinh (Jean-Philippe Trinh)]

Yes, the logic I described can be applied even with multiple checkbox groups.
The whole logic is actually held by the one variable that stores the data and state.

It’s not built-in in WeWeb because it’s a very specific use-case. But it can be built

I can come up with a video a bit later to explain how that works, and I will look into how I could share that component directly

[tg2148 (Tom)]

While I begin to try to figure this all out - how do I handle the variable code for a Parent Category with no Sub/Child categories?

Take below example (I’m obviously not a developer/programmer LOL)

{
name: { label: “Construction Equipment For Sale”, value: false },
subcategories: [
What do I do here?
]
}

Okay - have not gotten out of the starting gate. I’m stuck.

1 - I currently have one checkbox managing ALL the Parent Categories and another single checkbox managing ALL the SUB Categories.

So - am I guessing correctly that I need PAIRS of checkboxes for each PARENT/CHILD group?

[jptrinh (Jean-Philippe Trinh)]

Hey @tg2148 ! I hope you managed to continue your project
Here is a walkthrough video on how to setup the logic if you still need that.
Let me know if I missed any important points

[tg2148 (Tom)]

Jean-Phillippe,

Yes - definitely. I have been watching videos on variables and other WeWeb/Xano items in the interim to familiarize myself with concepts. (Remember - I’m very much a non-programmer novice) I am looking forward to diving in to your walk through.

I’m certain tp have questions, answer when its convenient for you.

Really appreciate the help. Sincere thank you.

[tg2148 (Tom)]

I have gotten pretty far examining your video - which is great. Just have a couple questions at this point as I cannot find the elements represented in your video clip. I believe I set up the array fine. Have a much better understanding of the checkbox element as it is confusing until you work with it.

Please see the attached image. I cannot find the elements labelled “A” and “B” in the image. I have built around them for now. Let me know where to find those when it is convenient for you. Thank you!

[jptrinh (Jean-Philippe Trinh)]

Those are appearing automatically depending on the context of the workflow. You can setup the parameters of the workflow or just view them, depending on the workflow.
I’m not too sure why they are not there for you.
I don’t think I’ve used those anyway so it won’t make a difference in your use-case

[tg2148 (Tom)]

Just making sure these parts are in the right place as the form is still reacting singularly (like at the 2:48 mark of video) as opposed to as a group (like the 4:05 mark of the video). I’m doing something wrong and thought that those pieces missing above might have been the cause.

[tg2148 (Tom)]

Unlike the video - I seem to get errors in preview mode (you did not seem too).

Below is truncated error message :

---

name: “FormulaError”,
stack: "FormulaError: Formula evaluation error:

… omitted page urls…

message: “Formula evaluation error: Unexpected token ‘>’”,
originalError: {},
formulaCode: “context.item.parent?.[‘data’]?.[‘subcategories’] .some(item ==> item.value)”,
formulaType: “f”
-----

[jptrinh (Jean-Philippe Trinh)]

At this point i think we better try and debug it live haha i’ll send you a DM