Saturday, July 22, 2017

Going beyond with your OutSystems Mobile App

Creating a native mobile app with OutSystems is so easy that it's scary! Just a few clicks and, in a few minutes, you'll have an iOS and Android application. Out of the box, the resulting app will look like this:


Simple. It's your show now, your "drawing board". Create!
This is the common pattern. However, before you go public, you should do the final tweaks. It's that extra mile, that "wow factor", that "5 star rating" that you must go after. Did you notice the "glitch" on app startup? Take another look at the video. What's happening is that the native splash screen wasn't customized and you're seeing the black screen (Operating System starting the app) and then a white "glitch", which is actually the webview loading content (OutSystems apps are Cordova based).

What happens OutSystems app start
What happens by default

To create that super user experience, you just have to do some small steps as described in the documentation: Use Custom Splash Screens. In the article, the splash screen will disappear after 3 seconds (enough time to load the webview) but, if you want, you can have fine control over the hiding of the screen. The result will be an app that gracefully starts:


The graph is now different:

What happens OutSystems app start
Fast feedback to the user

If you're having troubles following the documentation, I've created a small video on how to do it. Here it is:


Here's a MyResources.ZIP and here's an Extensibility Configuration JSON to get you going. This is valid at the time of the writing of this post, it might change in the future as Apple and Google change resolutions. You should keep an eye on the documentation.