Displaying an alpha numeric value on page (Custom States)

I am trying to display a newly created Alphanumeric string that is assigned to an address. However when i initiate the workflow, a random code that insnt assigned to the address is shown and then 1-2 second later is replaced by the correct code. Below are some images of the set up?

Any idea how i could make only the correct assign code be displayed?

You can try it for yourself here. https://locate.bubbleapps.io/locate_for_houses/1457113343170x185841297730803500

1 Like

So what is happening here is an interesting corner case. The way bubble works with database is that we perform data operations both on the client and the server, the the part that actually modifies the data in the server side one (for security reasons).

So what is going on here is that 2 calls are made to Blockspring, and they return different random numbers, and the one on the server is the one that is actually saved (which is one it shows up after 2 seconds, since we reconciliate changes between server and client).

So the way to fix this would be to put the string in a custom state on the page and the use this, so that Blockspring gets called only once.

A bit technical, but I hope you see what I mean.

2 Likes

Hi Emanuel,

So i would be putting the string that displays the code on the screen in a custom state? or the workflow action that creates the alphanumeric code in a custom state?

I have never used a custom state so Im a little confused

You would have the workflow set the custom state first, and in the next action you use the custom state’s value. That way, the evaluation only happens once. Why don’t you try on the forum_app in a simple version and we see how that goes?

Hi,

Im a little lost as to how the custom state works, could you please explain.

Joe

Hi

Where do i even create a custom state? I cant see it.

Joe

You do this using the Set Custom state action. Pick the element and then you can create a custom state.

Ok so i have found how to create the custom state however i am completely lost as to how these work. Do i at all have to change the input to show the locate ID on page or is it purely in the workflow.

I have posted below the current workflow i use to generate an ID

Is the custom state set before the current actions or after?

White element am i setting the state of? (the text that displays the code twice?)

Sorry for the questions but i just cant seem to get my head around custom states even after reading the documentation.

Joe

1 Like

Custom states are just like little post-it notes with useful values on for your page. You can stick them onto (pretty much) anywhere so you can find them later (like real postit notes, put them somewhere you can remember!). So if you set a custom state for a page to your Blockspring ID, it will then be available to use elsewhere on that page and workflows so you don’t have to go back and recalculate all the time.

We use them a lot for things like page state so “edit mode is YES” or temporary lists (users I am selecting to be friends).

In this case you want to set the state as the first thing you do in the workflow. So you are only doing it ONCE as emmanuel says. So instead of doing the API call in the create, you do it first, set a custom state to the blockspring alphanumeric.

Then set your thing’s id to that. Then use the state to display on the screen as well.

Hope that makes sense, can pop something in the forum app to show this if need be.

2 Likes

Hi Nigel,

Thanks for the explanation, i have manged to create the custom state and it does create the right code in the data base as below.

I am however now struggling to display the correct Locate ID in the text box as on screen as below.

Could you please advise how i get it to show the locate ID assigned to the address using the custom state.

Thanks,

joe

So i have managed to create the custom state and selected the page as the element and it does work to create the code in the right field but it still appears to generate two codes and display them both. I can get it to show the client side code only, but not the server side code only.

Joe

I am now officially tearing my hair out ha . I cant seem to find any way to use the server side value. It appears that it still creates two, client and server side. Even with a custom state.

So if you show the custom state in a text field it is the client side one ?

Yes, i have tested this by creating a new text box and having that display the custom state (alphanumeric generation) that is assigned to the element. In this case the element is the input address box.

When i do this it shows the alphanumeric code that is assigned client side, i know this as it is the same as the code that generates first and is then replaced seconds later in the other text box.

It works in terms of only showing one output from the alpanum api. Unfortunately its the first client side version.

Its as if i need a way of attaching the custom state to something pulled from the server side database.

If this isnt doable is it possible to just delay showing the Locate ID for a few seconds to give the code ID time to change to the second one?

Hope this makes sense

Thanks for the help. This is made more frustrating as this is the final stumbling block for the app.

Joe

Very frustrating.

From what Emmanuel was saying, the workflow should be the sever side.

So what you could do is set the custom state to whatever is on the thing you have just created. So as you say , pull from the database in the workflow. But that may be what you were doing anyway.

Still struggling to get my head round what is happening !

Do you think the delaying showing the text box for a few seconds could work. If so do you know how it could be done. Maybe have a progress bar set to ‘x’ seconds and then show the text box?

Could you use a transition, and delay appearance that way

Thanks Nigel.

How do i link a transition to a particular condition? It just seems to ignore them.

joe

@emmanuel Looking at the above, am i attaching the custom state to the wrong element? It seems i can call the custom state to get only the client side code. However i cant work out where to attache the custom state to only show the server side id.

To get the client side only i use the below.

Joe

OK, so i managed to get this to work but with one issue, i have used the below settings to show the server side code. Essentially i display the code once the Locate ID field doesn’t contain the alphanumeric state in the Locate ID field assigned to that address in the database.

The problem is that once the client side code is generated it stays attached to the page until the page is refreshed and so when i enter a new address nothing shows. Essentially this means i would have to refresh the page every time a new entry needs to be added. Any ideas how i could get around this?

Joe