Forum Academy Marketplace Showcase Pricing Features

The most simple custom state (won't work)

I have watched several videos on custom states and even when I follow step by step it won’t work.

Can someone walk me though the most simple custom state please? I want to show either tab1 or tab2.

I have created a custom state called selectedTab. Apparently, I should be able to click on the orange box (tab1) and set a condition which says "if selectedTabis Tab1 then make is visible.

But when I click on the orange box and set a condition it says there is no custom state available?

States are case sensitive. Check that.

Also check your conditionals and show on load

What’s your workflow look like?

It sounds like you are trying to set the state of the wrong element :slight_smile:

1 Like

I can’t check the case sensitive because I can’t get that far. I go to conditional and my custom state is not there.

Workflow is not done because I am unable to first set a conditional. The custom state is on the main page now so that it’s easy to find. I then click on the orange box (tab1) and set a condition but it won’t show me the custom state called selectedTabwhich I have created?

Could someone give me a step by step on setting up any custom state? I need to see if I have a bug or something because I have followed multiple video tutorials and what I see is not what they see.

You don’t have a bug or something. :slight_smile:

Before I (or anyone else) give you step-by-step instructions on how to set up a custom state, check one thing that, after reading your posts carefully, it sounds like you are missing.

When you set the condition on the orange box, you won’t see the custom state until you first select the page/element on which the custom state exists. From the looks of the screenshot in your initial post, the name of the page is called test. If that is the case, the condition will be constructed as When test's selectedTab is....

So, again, if you are looking for the custom state to be in the dropdown when you try to set a condition on the orange box, it’s not going to be there. In that dropdown, select the name of the page, and then you will see the custom state.


Ah, that makes sense … I will try this now and report back …

Ok thank you that is a massive step forward. I have set up the condition as such;

Ok, next is to make the buttons work. I go to the first button ‘tab1’ and set a workflow. It says When test's selectedTab is Tab1 and I make it viewable. This works and displays the orange Tab1 box on button click.

But, I can’t get the box to disappear again!? Have a look at the blue box (Tab2) conditional. You can see that when Tab1 is selected, the blue box should disappear - but it doesn’t?

You shouldn’t need the second condition in either of those screenshots.

On the Appearance tab for both of the group elements, uncheck This element is visible on page load. Then, construct a single condition as you have, with the element being visible when the custom state is set to a particular value (by the way, in your second screenshot, you haven’t added the This element is visible option to the first condition). Finally, add workflows to the buttons to set the custom state to a particular value when each button is clicked, and you should be good to go.

Also, as @chris.williamson1996 mentioned, custom states are case sensitive. I see in your first screenshot in your initial post that the default value of the custom state is “tab1” with a lowercase t. However, in your conditions, you are using an uppercase t. Pay attention to those kinds of details because they can definitely trip you up.

Your workflow isn’t to make the button visible - your workflow needs to set the custom state and then based on the conditionals you have set up on the elements will determine which ones are visible or not.


1 Like

I have corrected everything you suggested. The buttons do make the groups visible on click, but the groups won’t disappear when I click the other button. This may be because the Workflow for the button simply “Show’s” the group, whereas equibodyapp suggested below that the workflow needs to set the custom state. I tried this but (as per my original message, the customer state then is not available). See below for my screenshots.

I can’t assign my custom state because it is not available? I could create a new custom state, but then why did I create the first one called selectedTab .?

If you guys can help me solve this I will do an instructional post to help others as this has caused a lot of confusion for people and (oddly) no one seems to have posted a simple step by step, which I will!


There is a lot of content out there on custom states… no need for any of us to reinvent the wheel, man. If you are working in a test app and want to post a link to your editor, I’m sure we can get it working in no time.

Oh, and the custom state isn’t available in that screenshot because as I have already explained, you have to select the page/element with which the custom state is associated. Your custom state isn’t associated with the group… it is associated with your test page. Select the page and then you will see the custom state.


here man… i just couldnt read this and watch you suffer.

i have 1% left on battery life. i’ll charge up and if the kids havent gotten up yet will make a brief video.

master this and you too can build it out in 5 minutes

you gotta keep track of where you keep your states, my friend!


You’re looking in the wrong place.

As per your screenshot, the custom state ‘selectedTab’ is set on the element ‘test’ (which may be the page itself).

Yet in your workflow you’re trying to set a state on the element ‘Group Tab1’.

1 Like

There is no option for that, the only options from the dropdown are ONLY for the Tab groups, I see no option for the page.

UPDATE: It was a bug! I started from scratch with a new project and it worked easily, the dropdown options gave me the option for the page. It works! I refer back to my original project and the option once again is not there. No idea why, that project is corrupt or something!

There is, but never found a step by step visual instruction. I just feel I can show people how to do it in a way which I wish someone could show me (the ultimate dummy proof way!). I will post my solution shortly.

1 Like

Ok, thank you guys for your help. I have created a new project showing the solution and will make that publicly available for all.

I’ve also create a new post with the solution (simple step by step) so it’s easy for other newbies to follow.

Really appreciate your help because this was really bugging me.