Discuss

Using Dynamic Data in Desktop and Mobile Apps

On this page
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:

Screenshot_2|690x400

Right click steps:

Screenshot_3|690x400

Open Database Actions and select Database Connection:

Screenshot_4|690x400

Setup your database connection:

Screenshot_5|690x400

Then right click the Database Connection step:

Screenshot_6|690x400

Open Database Actions and select Database Query:

Screenshot_7|690x400

Setup your query:

Screenshot_8|690x400

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

Screenshot_9|690x400

Click OK:

Screenshot_10|690x400

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

Screenshot_11|690x400

Using Dynamic Data on App Project Pages

Open the Project Manager:

Screenshot_12|690x400

And switch to your Desktop App project:

Screenshot_13|690x400

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:

Screenshot_14|690x400

Open Data and select Server Connect:

Screenshot_15|690x400

Then click Select Server Action button:

Screenshot_16|690x400

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:

Screenshot_17|690x400

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

Screenshot_18|690x400

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

Screenshot_19|690x400

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

Screenshot_20|690x400

Then we select an expression:

Screenshot_21|690x400

This is the database query returned by our server action:

Screenshot_22|690x400

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

Screenshot_23|690x400

Screenshot_24|690x400

And you are done. Save your page:

Screenshot_25|690x400

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

desktop-app|665x500