Getting Started with App Flows


Empower full client side reusable workflows - with App Flows! Now you can define App Flows, just as you are used to do on the Server Side with Server Connect and enjoy the same powers but on client side and in mobile apps!
Unlike Page Flows, which can be used on a single page only, App Flows can be reused on multiple pages in your project.

NOTE: Please make sure to enable the Experimental Features in Wappler options in order to use the new App Flows.

App Flows

Let’s start with creating a simple reusable flow.
App Flows are located in the Workflows Panel (previously called Server Connect):

Then you can choose between Server Actions and App Flows. We select App Flows or (Alt + A keyboard shortcut):

Creating an App Flow

Creating an App Flow is as easy as creating an API Action in Server Connect panel. Just click the Add New button:

And add a name for your flow:

Let’s add some step in our flow. Right click steps:

You can see the available flow steps in separate categories:

In our example we will show you how to show a Toast message. Open Control Flow and select Show Toast:

We adjust the Toast properties:

And save our App Flow:

And we are done. We can now use our App Flow on each of the pages in our site/app.

Include App Flows on Your Pages

Close the Workflows panel and open the App Connect panel. Select App and add a new component:

Open the Workflows menu and select App Flow:

Then select your Flow by clicking the Flow Action button:

Select the Flow Action and click Select:

You can choose to auto run the flow on page load or not:

You can also run the flow using the dynamic events. We select a button on our page:

Then add a new dynamic event:

Select Mouse > Click:

And click the dynamic action picker button:

Under App Flow select Run and add it:

Click Select:

And you are done. You can include this App Flow on as many pages as you like.
Here’s the result in our browser:


Thanks for bringing us this!

Could a team member post something here which summarises the difference between the existing Flows and App Flows?

So I can see that:

  • App Flows can be called on multiple pages
  • Data Transformations
  • API calls
  • Output data

What else?

Is it basically adding all the functions in a Server Action onto the client side in a page independent way?


I think you’ve nailed it, @Antony. It looks to me like the difference is that you can have the flow available on all pages. Update once, it updates everywhere.

1 Like

Actually App Flows and Page Flows are exactly the same, just that App flows are saved globally in separate files and page flows are saved inline on the page.

Both have access to the new flow actions like API Connector, Data Transformations and much more to come!


Interesting feature. I like it.

I can’t think off the top of my head a situation where I would need it yet. But now that it’s here maybe it will open up some ideas.

Thank you. And good luck with 4.0!

1 Like

Neat feature. Can you pass arguments to make them more reusable?

You will find them very useful specially on mobile apps where you don’t have server connect but you want to do the same.

Soon we will be adding also local database access there and more file and image processing as flow actions as well. So you can do image resize and manipulation all client side.

And yes @JonL, you can define input parameters and supply them when running or including the flow. Similar as with Server Connect.


Also more native mobile and desktop Cordova plugins will be available as flow actions, so you can do really interesting things like camera capture, local file system access, SQLite database access, battery and network access and much more :slight_smile:


Now you have my attention! :slight_smile:

Any chance for puppeteer integration on desktop :D?

1 Like

Here, this is amazing news! I don’t want to get excited ahead of time, but this is Wow! Visual interface for working with plugins, with the possibility of expansion, by packaging existing plugins or self-written plugins, as is done now with Server Connect. It would be just incredibly convenient and useful!

A small question-a comment to the community and the team about the new functionality of the App Flow: do you think it would be better to place the interface of this functionality on the right side? Since the Wappler has a fairly clear logical separation of the interface, namely, the right side - everything on the client side (frontend), the left side-everything on the server side (backend). And to be honest, when I just read the intro and went to the example, I expected that the work would be exactly on the right side of the screen and for a long time I could not understand where exactly the new functionality was buried in the Server Connect tab.

Otherwise, I think that the functionality will be extremely useful, especially in bulky applications. It will become much easier to manage.

1 Like

Regarding mobile apps and database access:
What are the leading candidates for saving data in a mobile app that you already intend to work well with Wappler’s direction in the near future?

And is there a way for Wappler developers to test the mobile device prior to installing a mobile app for support of the app’s intended database ?

So that a User will get a Warning after permitting a Wappler app to test his/her device for “installability”?

Not really as only page specific panels are on the right side, while global components and workflows are on the left side. As App Flows are global workflows just as server connect, but for client side, they share the same panel space.


We are currently looking at SQLite as Cordova plug-in and PouchDB.

Yes of course when running a mobile project in Wappler you can just use the mobile emulators for iOS or Android. You can also connect a real device of course.


A post was split to a new topic: Testing mobile apps

I expected it to be on the right side, too, for exactly the same reason as @Mr.Rubi but I’m sure I’ll quickly get used to it. There’s logic with both arguments :wink:



Great update George!! This is what I needed to upload images with the S3 component and manipulate them from the client side without having to upload them to the server first! I’m very happy, thnks a lot! :raised_hands:


Maybe I’m too new, but I only see Server Connect. Nowhere do I see the option (Alt + A) to activate App Flows.

I only see Server Connect.


Are you using the latest version of Wappler (3.9.6)?