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.
what is Set Global doing, and where can I access it the data?
With Assign, I can set local variables, I guess?
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ā)
Set Global will set a global variable, the variable will be accessible from the whole page.
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.
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.
Thanks Patrick, looks like I was not completely wrong with my assumptions.
Still, some questions left:
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?
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:
A template page with the main navigation and tab-bar
Content pages and sub pages for the main features.
I need to share global data across all pages AND the template, e.g. for the active tab, becauseā¦
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.
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?
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.
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
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.