Portal on Device – Launching Native Apps
Note:
The information in this blog refers to a feature that is deprecated.
For a list of deprecated features and possible alternatives that you can use instead, see SAP note 2204286.
Portal on device already provides mobile access to your corporate web assets, but what can you do when you want your users to work with the latest and greatest leave request iPad application? Since it is a native iOS application, it cannot be embedded in the portal, and your users will have to download it and run it themselves.
In this post, we will see how native applications can be integrated in the standard portal navigation, so they are exposed to portal users in their daily work. To do so, we will create a portal component that can launch the native application from the browser. Luckily, both iOS and Android provide a simple way of launching native applications from the web browser – by using custom URL schemes. Most of the native applications out there register their own custom URL scheme with the device’s OS so that other applications can communicate with them. If you open such a URL in the browser, the application is launched. We will create a simple portal iView that can be used as an iView template for “Native Application iViews”.
Well, I feel we have talked enough. Let’s get down to business.
To get started, open NWDS and create a new portal project called “NativeAppLauncher”. In the new portal project, create a portal component called “AppLauncherComponent”.
We will start by adding a button that launches the native app. Our portal component will need to know the URL scheme that should be used for launching the app. We want administrators to configure it for any application they want, so we will add a new property to the component profile. To do that, open the portalapp.xml of the project and add a new property called “ApplicationLaunchURL” to the AppLauncherComponent profile. Leave the property value empty. The result should look like this:
<component name=”AppLauncherComponent“>
<component-config>
<property name=”ClassName” value=”com.sap.portal.demo.app.launcher.AppLauncherComponent”/>
</component-config>
<component-profile>
<property name=”ApplicationLaunchURL” value=””/>
</component-profile>
</component>
Now let’s open the AppLauncherComponent class, and add that button in the doContent() method:
public void doContent(IPortalComponentRequest request, IPortalComponentResponse response)
{
//first we get the application launch URL from the profile
IPortalComponentProfile profile = request.getComponentContext().getProfile();
String appLaunchUrl = profile.getProperty(“ApplicationLaunchURL”);
//and now we create the response HTML
try {
Writer writer = response.getWriter();
//adding a JavaScript function that changes the URL of the current window
//to the custom application URL
response.getWriter().write(
“<script>function launchApplication() {window.top.location = \””
+ appLaunchUrl +“\”;}</script>”);
//setting the style for our button. Feel free to make it less ugly.
writer.append(“<style>.prtlbody{background-color:transparent;} button{font-family:Arial;font-size:24px;padding:5px;}</style>”);
//the button itself
writer.append(“<button onclick=\”launchApplication()\”>Launch</button>”);
} catch (IOException e){
throw new RuntimeException(“Error writing to response”, e);
}
}
As you can see, what we are doing is simply changing the browser window URL to the application custom URL when the button is clicked. This should be enough to launch the application in the mobile device. At this point you probably still don’t trust me, and want to see it working with your own eyes. Let’s deploy our new component on a portal system and check it out: right-click the “NativeAppLauncher” project and select “Export”. Now select “EAR File” under “SAP NetWeaver Portal” and complete the export wizard steps. Deploy the result EAR on your portal system.
Once the application is deployed we can create a portal iView on top of it: log on to the portal as an administrator and navigate to Content Administration > Portal Content Management. In the portal content catalog on the left, open the “Portal Applications” repository and find the app launcher application (it should have the name of the EAR you used when you exported the EAR in NWDS). Expand it and copy the AppLauncherComponent (right-click and select Copy).
Now right click the Portal Content folder and select the option Paste as PCD Object. A new iView called AppLauncherComponent should be created. Open the property editor for this iView (right-click > Open > Properties) and set the value of theApplicationLaunchURL property to “twitter://” (as you can guess, this will open the twitter app).
One more property that should be changed is the ‘Name’ property (that is the name displayed to the portal end user in the navigation structure) – change it to “Twitter”. You can also make the portal navigation use the Twitter icon by setting the icon URI in the ‘Icon URI’ property (you can use Google image search to find a nice one).
Ok – we’re good to go. Add the new iView to one of your mobile roles and navigate to it using your favorite mobile device. On my iPhone it looks like this:
When I click the button, the twitter app is opened. If in your case it didn’t, you probably don’t have it installed… What was that? You don’t expect your users to have all corporate applications installed? If that’s the case, let’s add a new feature to our app launcher – a download link for the application.
We take the same approach here – adding a new property to our portal component to hold the URL of the application in the AppStore, and launching this URL when the user clicks a link.
In your portalapp.xml, add a new property called ApplicationInstallURL to the AppLauncherComponent profile. Again, leave the value empty.
Now open the AppLauncherComponent code and modify the doContent() method as follows:
publicvoid doContent(IPortalComponentRequest request, IPortalComponentResponse response)
{
//first we get the application launch and install URL from the profile
IPortalComponentProfile profile = request.getComponentContext().getProfile();
String appLaunchUrl = profile.getProperty(“ApplicationLaunchURL”);
StringappInstallUrl = profile.getProperty(“ApplicationInstallURL”);
//and now we create the response HTML
try {
Writer writer = response.getWriter();
//adding a JavaScript function that changes the URL of the current window
//to the custom application URL
response.getWriter().write(
“<script>function launchApplication() {window.top.location = \””
+ appLaunchUrl +“\”;}</script>”);
//setting the style for our button. Feel free to make it less ugly.
writer.append(“<style>.prtlbody{background-color:transparent;} button{font-family:Arial;font-size:24px;padding:5px;}</style>”);
//the button itself
writer.append(“<button onclick=\”launchApplication()\”>Launch</button>”);
//adding a download link only if the ApplicationInstallURL property is defined
if (appInstallUrl != null && appInstallUrl.trim().length() > 0){
writer.append(“<p style=\”font-size=10px;color:white;\”>Don’t have it installed? Click [NG1] <a href=\”” + appInstallUrl + “\”>here!</a></p>”);
}
} catch (IOException e){
thrownew RuntimeException(“Error writing to response”, e);
}
}
Let’s see that in action. Re-export your project to a portal EAR and deploy it on your portal system. Open (or refresh) the property editor of the AppLauncherComponent iView, and set the value of the new ApplicationInstallURL property to “http://itunes.apple.com/us/app/twitter/id333903271” (that’s the URL of the Twitter app in the Apple AppStore. If you are using an Android device, use “https://play.google.com/store/apps/details?id=com.twitter.android”).
When you re-open the iView on your mobile device you will see this:
Clicking the install link will open the AppStore on the Twitter application page.
That’s it. You now have everything you need to start launching native apps from your portal on device. I would recommend making some improvements in the UI design before you expose it to your end users if you don’t want them to throw stuff at you (I tried to keep it really simple in the example).
Good luck!