Tab element - disable conditionally

Ask us anything
1

Hello Community,

I’m working with the tab element on a page where the tab navigation represents a 5-step process. Each step is mandatory—the user must complete the current step before they can access the next tab.

To clarify my setup:

  • Each tab (step) requires the user to select something of fill information. In step 1 it’s one out of 5 cards. Step 2, it’s different etc. I do not want to use the multi step form.

  • The user should only be able to move to the next tab after making their selection in the current step.

  • My idea is to use a workflow that binds to a variable indicating completion of each step, but I’m not sure where exactly this logic should be implemented within WeWeb.

Could anyone guide me on the best practice for enforcing this step-by-step progression? Should I use variables, workflows, or some other feature? Any detailed pointers or sample setups would be greatly appreciated!

Thank you!

2

Easiest is to just make your own

3

hey,

there was a similar topic right here: How to Create a Multistep Sign Up - #4 by Batik_Okazov

You can use a multi-step template for your purpose. Or just create your own with Weweb AI or other LLM/”coding people” as Broberto said.

4

Hi Broberto -Thanks. I’m pretty much a rookie. How would you recommend me to approach this?
Hi Batik - Thanks! I’ve used the multi-step form template and do not really like this element so will look for alternatives.

5

@Broberto?

6

Hi everyone,

For those having the same issue someday, I found a solution that works. I will share it below. It’s probably not perfect but better than people coming dropping a one-liner suggesting a solution and then disappearing without helping. :sweat_smile:

You can read the context in my first message but basically:

Step 1: Create a variable (let’s say X1) and an associated workflow to update it on change (e.g. when the user selects a box)
Step 2: If you are on tab 1, click on Tab 2 (and all the others!). Create a workflow with true false split:
2.1 True false split condition is an if on the variable X1: if =”” then true, or false.
2.2 If true: add 2 actions:
action 1: open a pop up instructing the user to select a value before proceeding further.
action 2: change variable value, bound to the tab element basically saying “Main tab- current tab -1” this will maintain the user to the tab until he chooses something.

Of course for the next tabs e.g. 3, 4, 5 etc. You can have the same condition + another one if needed.

Feel free to reach out if needed.

Finally, I tried generating an element with WeWeb AI but it has not worked properly and is currently in review by the support team. If it works, I’m happy to share it as well.

Happy building!

1 Like