4D for Mobile : Display Web Pages in your Mobile Apps

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.

blank

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!

David Azancot
• 4D for iOS Product Owner •David Azancot joined the 4D Product team as a Product Owner in 2017. He's in charge of writing the user stories and translating them into functional specifications. His role also includes making sure that feature implementations meet customers' needs.David graduated with an MBA in Marketing, Internet and Mobility from the Leonard De Vinci Institute and began his career in 2011 with a mobile start-up company, later acquired by Madvertise (a mobile marketing group). Passionate about mobile interfaces, he was the natural choice to develop interactive mobile ad formats for the group in 2015. In parallel, David has been developing his own iOS and Android applications since 2012.