Using Dynamic Data in Desktop and Mobile Apps

As you know the Mobile and Desktop apps cannot run PHP/ASP/ASP.NET files, which are required to create a database connection and get data from your database. You are only allowed to use HTML files in your Mobile and Desktop Apps. In this tutorial we will show what's the workflow of getting the dynamic data from your database and using it with your Desktop and Mobile Apps.

Overview

In our example we will show you how to do this for a Desktop App, but the logic and the workflow are the same with Mobile Apps as well. We need to setup separate projects in Wappler:

  • A static local project, for your Desktop/Mobile App
  • A remote API project, which will be used to run the server files, connect to the database and return the data.

Setting up the App Project

First you need to setup the App Project. We are setting up a Desktop App, so we follow the tutorial explaining how to do this: Creating a Desktop App Project
Check the tutorial linked above, setup your project and continue with the steps below.

Setting up the Data API Project

We need to setup a Data API Project. This project is nothing more than a regular Web Project, which runs on your remote server. It is only used to run your Server Actions, so you can connect to the database, make database queries, manage data (insert, update, delete), login and logout users or any other Server Action workflow you need.

Creating the Project in Wappler

Follow the tutorial explaining how to Create a Web Project

Adding a Remote Target

After we setup the Data API Project, create your remote target, as you do usual.
Explained here: Setting up a Remote Target

NOTE: the target can be any target - your own server, a remote hosting server etc.

Creating a Server Action

Open the Data API project, which you just created and let’s create a Server Action with a Database Query inside it. We will use this Database Query Data on the Desktop App pages.

We call the server action data-source:

Right click steps:

Open Database Actions and select Database Connection:

Setup your database connection:

Then right click the Database Connection step:

Open Database Actions and select Database Query:

Setup your query:

Select the table you want to use and add the columns to the query builder:

Click OK:

You are done setting up your data source. Save your Server Action:

Using Dynamic Data on App Project Pages

Open the Project Manager:

And switch to your Desktop App project:

Open an HTML file in Design View. We added a really simple layout - a list with items which we are going to make dynamic. Select App And add new component:

Open Data and select Server Connect:

Then click Select Server Action button:

As we explained earlier, server side language (PHP, ASP, ASP.NET) are not allowed in these projects so no server actions are available here. That’s we created the Data API Project.
Open the Site Dropdown on the top right:

Switch to the Data API Project and you will see the Server Action which we created there. Select the server action:

And now your data from the Data API Project is available on this page:

You can use it to create repeat regions and bind data on the page.
We select our list item and click Make Repeat Children:

Then we select an expression:

This is the database query returned by our server action:

You can bind data in the repeat region, just the same way you are doing in any other project:

And you are done. Save your page:

Your dynamic data is now displayed on your Desktop/Mobile App pages:

5 Likes

This is great @Teodor. Could you build a similar tutorial for how can we enforce security of pages and login/logout in mobile apps?

Security enforcer cannot be used on HTML pages, but there you can just restrict access to data and use a conditional region to hide elements on the page. You can also use the browser component to redirect users who are not logged in but somehow entered a restricted page.

Log in and Log out are the same as on any other page … just select the login/logout actions from your Data API project, as explained here.

2 Likes

You could also use Security Provider on the back-end and protect your Server Actions using Security Provider / Restrict / Select your Group and apply to the action. Set a response and then act accordingly depending upon the response returned from the server, ie, exit the Group member or send them to an alternative location using the Browser extension.

@Teodor, @George, @patrick, could you answer a quick question for me please? How feasible would it be to request a feature for a Security Provider Enforcer for HTML pages? Is it worth making the request?

@kfawcett

Some further useful information here for you Keith, save repeating it:

1 Like

Thanks @Dave and @Teodor - lots of useful information and tips. How do you deal with PHP includes, assuming there is a way to avoid duplicating headers/footers etc into every page?

(I have yet to attempt a desktop app with Wapper, but hopefully shall soon - so apologies if this is a silly question.)

I have followed this guide built for ios and run in xcode (with no errors) but when I load the app on my iphone no data from my tables is there. I can preview the data fine from wappler editor so i’m not sure what the issue is. Does anyone have an idea?

I am using heroku postgres + node.js, do I need to include something with my cordova settings to allow for the database connection? Or postgres is not compatible with cordova ios?

My config.xml doesn’t contain this attribute:

<access origin="https://DOMAIN.COM/dmxConnect/api/Access/LoginAccess.php"/>

as described on this post:

@Teodor, is this still true? Now that Express is available as a web server for node.js, is it possible to use it in Electron for desktop apps?

Theoretically it should be possible to combine NodeJS as server running in the background of your Electron desktop app.

We just haven’t offer it as option yet as there aren’t many request for it and we have plenty other cool stuff to add :slight_smile:

1 Like

Maybe I’m wanting the world. It seems it would be necessary in order to build desktop apps using the wonderful Express templating system you implemented and the security enforcement we discussed in April on this topic. :wink:

Without layouts and partials, having to modify common components on all pages seems like a lot of work.

2 Likes

While we are on the subject it would be nice to have a means of using the Security Enforcer within HTML pages, maybe a java version/alternative as opposed to PHP, if this is possible? We currently use Security Restrict on the Server Actions to forward to a log-in area but having it available within the page controls/UI would be great!

2 Likes

Actually with the more client side power as actions flows and the upcoming client side reactive db support of pouchDB, you might not need to have a server side and do it just as easy client side in your web site, desktop or mobile app :slight_smile:

2 Likes

Actually it is already possible when you use NodeJS - the security provider is enforced there on routes levels, so it is much more powerful