You can already compose views based on templates; dozens of them are at your disposal to beautify your mobile apps. 4D v19 R7 is spicing up things even more by enabling you to display a web page served by 4D using a new preset action: Open URL.

This means four things :

1. You are now totally free to create your own designs
2. The user experience remains seamless embedded in your native app
3. Get updated data in real-time
4. You can keep user data and offer an optimized user experience using sessions.

You only have to create a web page optimized for mobile devices.

Let’s see how to use it with a simple example:

Display web areas in your native app

1. Create a simple web page

First of all, you must create a web page that you want to display in your iOS or Android app or use an existing one you already have.

New javascript functions are available to ease your development. This allows you to interact with your native app from your web area. For instance, you can call javascript code to close your web page or display a status notification.

This gives you the freedom to create your own design and gives you the ability to enhance the user experience.

2. Project editor side

Once your web page is ready, you can go to the Action section in the mobile project editor.

From here, you can create a new Open url preset action, and where you want to make this action available, select the Table.

Then you can select Current entity or Table scope as you want to display an entity or an entity selection.

When the Open url action is created, a new field is available below the action table, allowing you to enter the 4D server path.

3. Mobile side mobile

When you build your app, the Open action “Detail…” is available to get device details and the “Device status”  to get all device statuses in one view.

Then can then close your web areas just by clicking on the close button that calls javascript code.

As you can see, you get more and more freedom in building great apps and beautiful screens using 4D for Mobile, allowing you to offer a better user experience in a few steps!

Don’t hesitate to give us feedback on the 4D forum, and check out the documentation for more details!