Creating a mobile app with APEX - Part 9: Put the app on your phone's home screen

Now you have a cool app. But to use it you still have start your phone's browser and type an URL or select a bookmark.
In this post I will show you how to put an icon for the app on the home screen of your phone. The steps are:
- get suitable icons
- prepare your application to use the icon(s)
- put your app on the home screen

For the last step only iOS is described.
Because of the lack of an suitable Android device I was not able to describe the process for Android.
However I expect the process on Android to be similar.

Get suitable icons

The first step is to get suitable icons. Apple sets strict standards around application icons. Among others they need to come in various prescribed sizes, like 16x16, 32x32 etc.
Luckily you can find many sites on the internet to do create such an icon set for you. I have used realfavicongenerator.net. On this site you provide an image as base for the icons and the whole set is generated, even including the HTML code to add to your page.

• go to realfavicongenerator.net
• upload your image
• set the options:
• you can specify a background color
• specify the location for the files: #APP_IMAGES#/img All the way at  the bottom of the page
• generate the files
• download the ZIP file with icons 
• cut the HTML code and paste it into a file

Prepare your application

Now we will implement these icons to our application. First we load the icons in the Static Application Files:

• go to Shared Components > Static Application Files
• click on Upload Files and fill in the values:
• Directory: img
• Files: Choose the ZIP file with icons
• Unzip File: Yes
• Press the Upload button
• all the icons are now available in the img directory in the Static Application Files

Then we can reference these files:

• go to Shared Components > User Interface Attributes
• fill Favicon > Favicon HTML with the HTML code from the previous paragraph

That's it. 

When running your application in the desktop browser, you will notice that the image in the tab next to the page name has changed to the new image. 

Put your app on the home screen (iOS)

To put your application on the home screen of your iPhone: 

• open your application in Safari on you phone
• log in
• press the Share Button
• chose Add to Home Screen
• you will see a form with the icon. The title of the icon can be changed here
• press Add  and the icon will be added to the Home Screen

This process is illustrated in the image below:

	img 4

This way you will have easy access to your application to enter data fast. 

Happy APEXing