Client Dropdown, Local Storage Set If Undefined?

[andyslack]

Hi Guys,

I am hoping someone can help, i'm just getting started with Wappler.

My users can have multiple "accounts", I would like to show a dropdown which allows them to switch between the accounts and the dashboard then shows information relevant to the account they have "switched into"

I have the dropdown working fine and it's saving the account ID and name into local storage when they change the dropdown

I have a Server Connect (getClients) item which populates the dropdown.

This is working perfectly if someone changes the dropdown:

The challenge I am facing is how can I onload for example check if the local storage values exist and if not, set them using the first item in the getClients result?

I tried an onload action but it cannot seem to read from localstorage.

Thoughts?

[famousmag]

Hey Andy and welcome!

@andyslack

I tried an onload action but it cannot seem to read from localstorage.

I would do exactly that...
What are you doing exactly? Please share your onload code so we can check

[andyslack]

Thank you for helping!

Here is my onload code:

dmx-on:load="run({condition:{outputType:'boolean',if:`(!client.data.client||!client.data.client.id)`,then:{steps:[{serverConnect:{name:'getClients',outputType:'object',url:'/api/clients/getClient',site:'Ampli - App'}},{setStorage:{key:'client',value:`getClients.data.returnAllClients[0]`}}]}}})"

The localstorage object is adding but undefined. I know the api call works as its populating the dropdown, could it be a lifecycle issue? the request is being called before the data is available?

This is how it looks if I select from the dropdown:

I see the key needs fixing, but thats easy, just not sure why its showing as undefined

[famousmag]

you have to ALWAYS have in mind the timing of appconnect load and DOM rendering on yur pages...

By the time of the app.onload is triggered, the clients serverconnect hasn't return any result yet... So that's why you get undefined.

I think you should add a Success dynamic event on your client serverconnect and execute there the checking...
Meaning that first the client has to be executed and reurn the results in order to manipulate/check them

Please try it and give us for your feedback

[andyslack]

Amazing!! I'm just getting into Wappler but already starting to see the power, it's taking a little orientation but your support is very helpful.

[famousmag]

Glad you enjoying it!!

just remember... All serveconnect (and other api/datasourses) in your page are FISRT must be exexuted SUCCESSFULY and then use their results!
you will get use to it in a few days...