Forum Academy Marketplace Showcase Pricing Features

How "State of an Element" feature works exactly?

I received the newsletter about the new feature called “State of an Element”

First of all let me know if I understand it the right way: State of an Element is to attach values/attributes/variables to an element in order to have some state that we could have saved in the database but because it is related to graphics it would be inefficient and irrational to put it there.
Please correct me if this is the case or not.

In my first effort of using it I tried creating a new state for a Group, with name “My Group” that would have a “name” attribute and a state type of Yes/No
The action that was created after all was “Set state null of My Group”
Is this a bug or my misunderstanding?

1 Like

Right, previously users would put that in the database, usually at the field on the current user, but it’s usually mostly used for visual purposes, so saving it in the database doesn’t really make sense. It’s much faster and more efficient to store this locally as a state on the element.

In your case, you mean you create a state to the group named ‘name’ of type Yes/No? Then when you want to change the value of that state, you should pick the relevant state in the dropdown. It sounds like you haven’t picked that state in the dropdown if the display of the action is “Set state null of My Group”

1 Like

Let’s say that you have just created a bubble app and you would like on the sample functionality to have the login popup be displayed when login button is pressed and also have the signup popup be displayed when signup is pressed.

Let me explain the steps so you could replicate it:
In Workflow: When login is clicked, from what I understand, you need to set a state at the “Signup / Login Popup A”.
However when tried to create a new state with name “name” and state type Yes/No I got “Set state null of Signup / Login Popup A” and in addition no custom state was created, the dropdown is empty!

Let me know if you need additional info

Make sure you’re creating the states on the reusable element, which the actual popup. Sounds like you’re doing this in the page that uses this reusable element.

Hi Emmanuel,

I somehow have a similar problem:

I have a view with a big CTA that is supposed a trigger a popup.

BUT when I try to use a WORKFLOW on the CTA to trigger the popup, I have no option to either SHOW the element or SET A STATE for the element for the reason that the element cannot be selected in the dropdown.

if you have any suggestion on how to solve that, that would be great, I am a bit lost here…

@fredrik glad to help. I took a look at the page, unsure what you mean by CTA, and who you are trying to save a state on.

thanks for your offer to help.

so let me clarify:

with CTA (“call-to-action”) I mean a button, that the user clicks. let me try to explain once more with the help of screenshots.

my issue:
I have a screen with a button (see screenshot 1), which is supposed to show a signup popup element, called “signup” (see screenshot 3)

I cannot add a workflow that shows the popup element “signup” since I cannot access the popup element since its not to be found in the dropdown when I am adding SET A STATE (see screenshot 2).

so I dont understand how I can add any logic to make the popup show upon pressing the button.

thanks in advance!


Hi, George

I’m having a similiar queston about “Element Actions”.
I want to achieve the following logic:
When a user presses button on a page, the button on the previus page changes colour. Is it possible?

I see the solution by adding new types to User Data than trigger the workflow to change a thing, then conditional formatting etc…, but it’s too comlicated. Hope there is a better way.

So I found a way to display an element upon a button press:

Instead of using a REUSABLE ELEMENT, I used a POPUP element from the toolbox.

this POPUP element now shows up in the HIDE/SHOW dropdown via the ELEMENT ACTION panel of the workflow dialog. (I ticked the HIDE ELEMENT checbox and then show the element upon pressing the button via workflow)

let me know if you have questions on this, so I can try to help you out!

1 Like

I am slightly confused by the previous statements.

It is certainly possible to “Show” a reusable element on a page via a workflow action.

It is also possible to create a custom state on a resusable element (for example the standard signup element has a “mode” state) and then set this via a workflow on the page.

So I am not quite sure why this doesn’t work in your situation.

What Kirill21 is trying to do is somewhat different. It depends on how you want to get to the page, if you are navigating to that page then you can either SEND data to the page, or you can use the new PARAMETER function on the Navigation action. This can send something based upon a button click and a navigate.

If you want a page’s element to change whenever you go to that page via any route, then storing the value would be the way to do it.

Hi, Nigel

Thx for the answer.
Seems like in my case I’d have to store the value cause I need the element to change for user forever (whatever route he follows).

Yes, pop a conditional on the button.

1 Like

Hey,

I’m having the same issue you had in this post. Did you figure out a solution?

What is it you are having issues with ?

hey Nigel,

So, I have a menu bar on the left of my screen. 3 ‘tabs’.
This menu bar is contained in a reusable group.
I would like users to be able to click each one and navigate without refreshing pages.
I figured I would do this by hiding the pages and making it so when clicking a button on the left menu bar, the pages would hide and show accordingly. However, when I tried to create this, I can’t add the pages to the “show” workflow of the tabs. They are not there. The only options that are there are the 3 buttons in that group.

Ok, so you need to set the state in the resusable “menu” group.

Then put the resuable “menu” group on the page.

Then use the state of that group to control the hide/show of the group pages.

Example here.

2 Likes

great, I clicked around that and i think i understand whats going on. Thanks yet again for your help.

1 Like

So just to be clear…

When a state is set on an element on a page, the state is lost if user visits a new page.

However,

When a state is set on a reusable element, the state persists if user visits a new page that contains the reusable element contained on the first page?

Is that correct?

I don’t think that is how it works, but if it does … that is an interesting way to pass data round your app !

(p.s. it doesn’t, the reusable object is a new instance on each page).

In building apps, isn’t it vital to transfer a state from one page to the next? And doesn’t this occur when someone logs in (their state becomes “logged in” and remains until they log out)?

As a new user to Bubble, how can I mimic the functionality of transferring a state to a new page?

Seems like an essential function and unnecessarily complex in Bubble which is supposed to make things simpler…