ionic framework meets SAP Netweaver Gateway

Arjan Nieuwenhuizen, 17 December 2014

In this weeks blog I will be talking about a cool HTML5 app framework that has been gaining popularity and the community around it is growing rapidly: the Ionic framework. The Ionic AngularJS and a set of predefined UI components you can quickly build HTML5 hybrid apps. In this blog I will describe an app I created using an existing Ionic starter template with connection to a SAP Netweaver Gateway service.
framework is a framework built on top op apache cordova. Using the great JavaScript framework

Installation

To install ionic, you can follow the steps described here: getting started

Create the template app

In the getting started guide you can also find the three ways that are currently available to start a new app: blank, tabs and sidemenu. For this demo I will create an app using the tabs template, but any other template will be fine. I’m calling my app IonicSAPDemo, so the command to create the app will be:

ionic start IonicSAPDemo tabs

After ionic finishes the creation of the new project you can go into the newly created directory IonicSAPDemo by using the terminal command

cd IonicSAPDemo

Ionic has a built in webserver to test your applications. You can use the following command to test the template app, the default url to test your app in the browser is http://localhost:8100.

ionic serve

Modifying the template app

To show a list of workflow tasks in the app I modified the template project a bit. The template app has three tabs / views in it. I’m going remove the first and use the friends view to show the workflow tasks. The friends view already contains an ionic list so it’s easy to reuse. It also has a service that it uses called “Friends”, that we can also reuse and modify to fit our needs.

The basic steps I took to create my app:

Renamed all the “Friends” elements in the template app to tasks

template files (*.html files in templates folder)
controller names (in controllers.js)
service name (in services.js)

Added an additional view + controller to let the user login
Implemented an $http call to the SAP NW Gateway
Build a detail view that shows tasks details and approve / reject buttons
CSS styling

I’m not going to paste all the sources in this blog, you can find them on GitHub:

https://github.com/nieuwie/ionic_sap_sample

SAP Netweaver Gateway service

The SAP Netweaver Gateway service that i’m going to use is the standard SAP Workflow service /IWWRK/WFSERVICE that I have already set up in our CRM / Gateway system. Details about that service can be found here. I did the customizing for this service to only return tasks of type “Approve Created Account” and implemented a BADI (/IWWRK/ES_WF_CUST_EXT_IB) to get some additional data about the account.

Ionic vs SAPUI5

Coming from SAPUI5 development and getting to know the Ionic framework, I am really impressed by Ionic. SAPUI5 is great, and has some features that Ionic lacks, but overall the Ionic framework impresses me. Below are my main pro’s and con’s for both frameworks:

SAPUI5 Benefits: