Creating a Mobile App from RoboHelp

 

 

What's covered?

How to put your RoboHelp content into a mobile app. Whilst the tutorial covers versions from RoboHelp 10 to RoboHelp 2017, the process was greatly simplified in RoboHelp 2015 and I recommend using that version or later.

My thanks to Ritesh Kumar at Adobe for providing answers to questions I had in writing this page.

Introduction

If your users may need to access the content of your project when they do not have connectivity, then a mobile app could be the answer. One app that I created was to provide information to carers that they would need onsite and where there might not be any signal.

When the ability to create mobile apps was first introduced into RoboHelp, it was difficult to set it up the first time. Once the setup was working, then it was straightforward but getting there took quite a few sessions with Adobe. The difficulty was recognised and it was completely overhauled in RoboHelp 2015 and is unchanged in RoboHelp2017. It is now quite simple.

Android and iOS Differences

You can create an Android app for use on devices that allow installation other than from Google Play. That is covered in this page. To put your app on Google Play, you need to be registered as a developer. For the purposes of developer an app though that is a great option. You can create an app an app and run it on your device without having to register.

To create an app for iOS devices you need to be registered as an Apple developer. The difference here, as I understand it, is that whilst your app needs to be on the App Store to install it on any device, access to it can be restricted.

Once your app is created, you will want to consider distribution. Because of the differences in how Google and Apple have set up things as above, these are your options.

Operating System

Available to Limited Users

Available to Anyone

Android

Install on the required devices with option to install only from Google Play cleared. Depending on the Android version, this can be for a single installation on the device or it will need to be turned back on afterwards.

More about this below.

Create the app using a developer's registration. If you are not registered, talk to your developers.

iOS

You will need to create the app using a developer's registration but limit access to it. If you are not registered, talk to your developers.

Visit Apple's site for more information.

Create the app using a developer's registration. If you are not registered, talk to your developers.

Creating an App from RoboHelp 2015 or RoboHelp 2017

Now you have an understanding of what you will be able to do with your app, let's create one. The steps are the same for both Android and iOS but you will only be able to generate the app for Android unless you are registered to create iOS apps. For the purposes of this tutorial, I will use the Employee Care sample project that ships with RoboHelp. Click Open on the RoboHelp Starter page and then click Samples in the ribbon on the left.

In RoboHelp 2017 it's important that Update 2 has been applied so check that before you start. With that done, next delete the preset Mobile App output in the Output pod. There was a bug in it so you need to delete it and then right click to create a new mobile app output.

Completing the Mobile App Dialog Fields

Now let's look at each of the options in the dialog. Most are the same or similar to the options available when creating a Responsive HTML5 output.

Option

About

This is pretty much the same as setting up a Responsive HTML5 output. You choose the layout the output is to be based on along with the other settings you would set for an online output.

Because Employee Care was created with layouts prior to Update 2 being released, you need to update the layout that shipped with the sample project. For the purposes of this tutorial, click the Gallery button and select Azure_Blue. You will need to save it with a different name such as Azure_Blue2.

Here I have already done that and then deleted the original layout from the project. That enabled me to rename it as shown in Project Manager. It's a one off process and only necessary in projects created before Update 2 was applied.

 

The fields here are the ones that are unique to creating a mobile app.

Package

A name that will uniquely identify the Mobile app.

A common naming convention is to use your company domain name in reverse followed by the name of the app. For example com.adobe.myapp. This name is used by PhoneGap to uniquely identify the application.

To avoid issues with third-party tools used in PhoneGap, you are recommended to use English alphabets, underscore character, and the dot as the separator.

It's not clear from the RoboHelp's own help whether the name is restricted to three parts or whether, for example, co.uk.myname.myapp would be accepted. Test that later.

Don't use the same name that I have used as that would not be unique in PhoneGap.

Version

A version number that will be used by Phone Gap. This can structured as you wish.

Don't confuse this with the next field. Your aim might be to create say Version 2 for users which is what you would set in the next field. Here you would be creating the an iteration of say Version 2 but you might want to keep each iteration of Version 2 on PhoneGap until things are complete.

Version Code (Android)

The Android version number for the app. If you upload your app to an Android store such as Google Play, a user will be notified of updates to your app every time you update the version number.

This is not required if you are creating an iOS app.

Title

The title of the application that will display on a mobile device.

Description

The description that will be used on PhoneGap

Icon

The icon for the app that will display on a mobile device.

I encountered some issues here that I have reported. See Bug Report 1251.

  1. If you later browse to change the image, instead of changing the path to the new image, it saves the image as icon1.png in the original location, the root of the project. That overrides the original image without warning so be careful if changing the icon you use.
  2. It does not show the new image after you have browsed to it unless you click Save which closes the dialog and you wouldn't do that as you with the old image showing, you would think the new image is not going to work. Likewise, you would not click Save and Generate as you would expect it to include the old image that is showing. In both cases the new image will be saved/used but you don't know that.
  3. The image gets saved with the name icon1.png is meaningless to when seen in the root of the project. The name should be whatever the author wants so that they recognise it. Also this file shows in the Unused Files report but it is not an unused file.

Splash Screen

You can optionally set a splash screen that will display when the app is opened on a mobile device.

You can specify multiple splash screens. Users will see the splash screen based on their device screen size and screen resolution. For details on how to do this, see this PhoneGap document.

There is also a bug here. See Bug Report 1252.

The image applied here will also be used in the Icon field. You will not see that until you save but because of the bug, whatever you set in one field gets used in the other field when you Save.

Adobe ID used by PhoneGap

Your Adobe ID allows you to create one app only. To create more, you need to click Create PhoneGap Account and pick one of the plans there unless you also have an Adobe Creative Cloud licence. The Adobe ID linked to that allows you to create multiple apps.

PhoneGap allows you to create up to 25 private apps. More than that and they have to be public apps that can be accessed by anyone using their Github repository.

Platform

Here you select the platform(s) the app is to run on.

iOS

For the purposes of this tutorial, leave this field unticked. If later you want to create an iOS app, tick the box and click the Signing Key Setup button.

Android

For the purposes of this tutorial, tick this option but leave the Signing Key Setup fields blank. You only need to complete those fields if you want to create an app to go on Google Play.

***

The information above is based on the Generate Mobile App Output topic in RoboHelp's online help. That will be accessed if you press F1 when using this dialog.

The fields here are the same as for an online output. For the purposes of this tutorial, use the settings shown.

The fields here are the same as for an online output. For the purposes of this tutorial, use the settings shown.

The fields here are the same as for an online output. For the purposes of this tutorial, use the settings shown.

 

Generating the App

Click the Save and Generate button and you will see the usual progress bar when generating any output.

Success

Assuming the app has generated successfully, you will see this dialog.



Most likely you will now want to view the app so click View Result to open this dialog. Otherwise click Done. To return to this dialog later, right click the output in the Output pad and select View.

 

You now have three options to download the app that you have generated.

Download

If you click on the download button you will be able to save the generated files to the location you specify.

Use the QR Code

If you scan the barcode using an Android phone, it will download the Android app. If you scan it using an iPhone it will download the iPhone app.

Use the URL

Use the URL to access the PhoneGap site and download the APK.

App Fails to Generate

Should you get a dialog advising that the generation has failed, look in the Output View pod that will have opened. Remember, as above the generation will fail if you do not update both the HTML5 layout and the Mobile App output in the Output pod if they were created before Update 2 was applied.

Installing the App on a Device

Android

First you need to save the APK file that has been created to the device it is to run on. Then use your device's File Manager and tap the APK file. Installation will start.

Unless you have already enabled the setting that blocks apps being installed, what happens next will depend on your Android version. You will either get a warning that you cannot install this APK unless you change the setting or you will be taken to a screen where you can enable the installation of apps other than from Google Play, along with an option to just do that on this occasion, which is the best policy.

Once the app is installed, you will be able to access it in the same way as any other app.

IOS

I understand that you can use iTunes to install the app on your iOS device. Connect the phone to your Mac with iTunes and then move the app to iTunes and sync. Follow this link for detailed steps.

Creating an App from RoboHelp 10 or RoboHelp 11

The process is significantly more difficult in these versions and requires the installation of third party programs, as well as the setting of system variables for RoboHelp 10. I have add my old instructions in PDF format below but if you need this feature, you will see that alone is justification for upgrading to a a later version.

RoboHelp 10 Instructions.

RoboHelp 11 Instructions.

Donations

If you find the information and tutorials on my site save you time figuring it out for yourself and help improve what you produce, please consider making a small donation.

Topic Revisions

Date

Changes to this page

16 Jan 2018

Icon and Splascreen information revised. Generating the App and Installing the App on a Device revised.

19 Dec 2017

New topic.