Can't seem to get Select state on weweb

[Femmy]

Hello guys, I need to create a select state on weweb but I’m only seeing
Add Hover State And Add New State. Does anyone know how to do this.

[jaredgibb]

Create a new state. Define your binding for “selected = true”

For example

You could have a nav bar. When the button is pressed, it sets a variable to the buttons text

Selected state could be “variable = button text”

the above is easiest using a collection list and an array of texts or objects as the data. Then 1 button in each row. Bind the text to a field in that rows object

When button press set the variable to context.value for that row. selected state could be “ variable =context.value”

[Femmy]

Thanks for Your swift and helpful response

[Femmy]

Damn! I’ve tried this and didn’t get the result i want I’m frustrated

[Joyce]

Hi @Femmy Does this article on how to create custom states help at all?

If not, could you provide us with a little more info about your use case? Are you looking to create a select state to style an element differently when it was selected by the user?

Don’t hesitate to share screenshots and/or a short video of your project to walk us through what you’re trying to achieve. We’ll do our best to help!

[Femmy]

Yeah, The latter is exactly what I want to achieve. Here’s a screenshot:

[Femmy]

These are the initial state of the elements:

So what i’m trying to achieve is, when the user clicks the select plan option it’ll activate the selected state then the user can click to pproceed to checkout

[Joyce]

Makes sense.

Here’s a short video explaining how to proceed: Add custom states to WeWeb elements - YouTube

[Femmy]

Alright Thanks will check it out.

[Femmy]

Hello @Joyce , I’ve gotten the selected state but whenever I click it doesn’t trigger(click) to another plan. It only selects the plan i edited when i switch to view mode.

[Joyce]

Hi @Femmy, sorry, I don’t understand what you mean. Can you clarify? Is there a selected state and a workflow to update the variable that allows you to define the condition of your selected state on all your plans?

[Femmy]

Yeah, there is. But I think the issue I’m having is from the configuration of the variable. I’m relatively new to weweb hence the issues I’m having. I don’t know if I could make a video of how I did mine so you could see what I mean.

[Joyce]

Of course, go for it! A video would be great!

[Femmy]

How do i share the video with you?

[Joyce]

Most users share a link here using loom or another screen recording tool.

[Femmy]

Here’s the link to my video: Flonnect Premium Screen Recorder

[jaredgibb]

[Femmy]

Yeah this is the concept let me try this.

[Femmy]

Damn still not getting it can you show a step-by-step process where you are creating yours.

[Joyce]

Hi @Femmy

So what I’m understanding is that you want both cards to look like this by default:

But when a user clicks on card1, you want card 1 to look like this:

Then, if they click on card 1 again or if they click on card 2, then card 1 should go back to the default style.

If that’s correct, then you can follow the steps in this video, but add a default value to the selectedPlan variable:

And then in your workflow that triggers on click, instead of changing the variable to the plan name, you could use a conditional statement like this one:

In the formula above, we are saying:

• if the selectedPlan variable is different than the current plan name (!= means not equal to),
• then, update with the current plan name, (so the card has the active state)
• otherwise, update the variable with the default value (so the card no longer has the active state)

Applying the states to two flexboxes

At the end of your video, you show that when you click on the second card, nothing happens. This is most likely because the workflow on the second flexbox is not setup properly.

First, I would recommend checking that your workflow is updating the selectedPlan variable correctly.

In the GIF below, you can see the variable is updated properly every time I click on a card:

Then if the variable is being updated properly but the style is still not as you would expect, I recommend that you check that the formulas on your states are correct.

For example here it is correct that the state is false because the selectedPlan variable is not equal to “Basic”:

Editing the states

Little side note, when you navigate from preview to editing mode in WeWeb, you will go back to editing the default state. So if you need to edit the style a state, you’ll need to make sure to select it again in the right styling panel:

Does that help?