AppFlow, how do Set Global, Assign and Set Storage work? Whats their purpose?

[HeikoK]

Still playing around with purely front end and AppFlows.

The challenge: I need a global storage, accessible from all pages with active binding, e.g. for storing state and updating on state changes (like current tab in navigation. In React, I would use a state, hook or provider.

So I played around with some steps in AppFlows and tried to understand what they are doing / how they work.

1. what is Set Global doing, and where can I access it the data?
2. With Assign, I can set local variables, I guess?
3. Set Storage, I would expect setting a session / storage global? Where would it be (what Storage?), if it would work (it throws an error on the console ‘key needs to be a string’)

[patrick]

1. Set Global will set a global variable, the variable will be accessible from the whole page.
2. Assign will set a local variable, you can use it within the flow. If you have a page flow you can also access it from the page after the flow has run.
3. Set Storage is for setting a variable into the localStorage, this is useful for storing things like user preferences.

There is also a Set Session which is for setting a variable into the sessionStorage, this is useful to store a value that must persist between pages, it will be removed after the browser was closed.

[HeikoK]

Thanks Patrick, looks like I was not completely wrong with my assumptions.

Still, some questions left:

@patrick

the variable will be accessible from the whole page

How? Let’s start simple, I want to access a global from within the same flow, I can’t access it? Is the process to use a variable assign the global, work through the flow (e.g. manipulating the data) and then write it back to the global?

Attaching the flow to a page, I don’t have access to any of this variables (assuming that at least the Global should be somewhere?)

I actually can’t find getter for the set methods?

Also, Set Storage throws an error:

[patrick]

Seems that the Storage and Sessions are buggy, they don’t generate the correct code. Working on a fix for that for the upcoming update.

To get access to the global variable you need to define the variable also on the root, this is to make it available in the picker.

[HeikoK]

@patrick

To get access to the global variable you need to define the variable also on the root, this is to make it available in the picker.

Thanks, Patrick. That was defo a step forward. However, it seems not to work on content pages. I quickly added a local variable on the main index (the “template”) and could access the global data (to check if it appears in the data picker), but not in content pages.

Let me quickly outline what I want to achive:

1. A template page with the main navigation and tab-bar
2. Content pages and sub pages for the main features.
3. I need to share global data across all pages AND the template, e.g. for the active tab, because…
4. when clicking on tab in the nav bar, I can easily highlight the active tab, but when clicking on a link in a content page, I also want to be able to highlight the active tab.

See example: the tabs are correctly highlighted on my user interaction. But clicking on the Event, it opens a content page under casino / events, but I need to highlight the tab as-well.

CleanShot 2023-02-23 at 11.50.44

[patrick]

The global variable should be available also on the content pages, I’ve tested that. Do the content pages correctly reference the main page?

[HeikoK]

Yep, they have. And everything else seems to work for me.

[NewMedia]

Do I understand correctly that you have now installed 5.4.2 and that this issue is now resolved?

[HeikoK]

Nope, is there a 5.42? I only refered to the question if the head page was set correctly (and thus, finally, pages in subfolders work for me)

[Teodor]

These issues have been fixed in Wappler 5.4.2.

[sid]

@Teodor why have you unlisted the only post which is basically a documentation of the above defined flow components?

[HeikoK]

Okay, with the latest update many things make more sense now (for me ) :

• Params work now \o/
• Set Session and Set Global write to the session- and local storage.
• After updating all my content pages and setting the path again to the template, all content pages have acces to the objects defined in the main template page \o/
• Still unsure about the globals, defined them, set them in a AppFlow, but when outputting on a page, the variable is empty?

But still not sure how to access the data?

[NewMedia]

I will be waiting to see how you get this answered, too.

[patrick]

@HeikoK

Still unsure about the globals, defined them, set them in a AppFlow, but when outputting on a page, the variable is empty?

Are they not being set after you run the flow?

You can also test by setting the global variable using the console in devtools, the syntax is dmx.global.set(key, value).

[HeikoK]

@patrick

Are they not being set after you run the flow?

I apologize, it works now.

While playing around after the update, for each global (inserted via data picker), Wappler was displaying [object Object], so I tried to access the value… with no luck. But now, magically, the global is shown as expected.

[HeikoK]

@NewMedia

I will be waiting to see how you get this answered, too.

Everything works now as I would expect it. The last two updates have changed my mind about Wappler for frontend work fundamentally. At least for Bootstrap work. As a hard core Ionic user, I am not keen in using Framework7, but I will give it a try. One day

[NewMedia]

@HeikoK

The last two updates have changed my mind about Wappler for frontend work fundamentally.

This indicates you are encouraged about using Wappler for frontend design?

[HeikoK]

@NewMedia

This indicates you are encouraged about using Wappler for frontend design?

Tbh, I never planned to use Wappler for anything else than a quick PoC, think of a bit of “more exciting wireframes”. I was using a web site creation tool (RapidWeaver) for this for years now, utilizing Airtable or Google Sheets for the few usecases I had to add a bit of dynamic data.

I am mostly doing App development now (My dayjob is Product- and Portfoliomanager Mobile) and my regular tech stack is Ionic/react/Capacitor with VS Code for app development and front-end and Groovy/Java/Grails for API and Backend (with Bootstrap).

But Wappler seems to have quite some potential, so I decided to give it a go also for one or two real world projects (apps) next to the evaluation project I am doing right now.

I added Prepros (https://prepros.io) to the Wappler stack to get halfway decent SCSS and TypeScript support and code formating the way I like it.