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.
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
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.
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:
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:
- Better OData integration using ODataModel
- iPad / Master-Detail capabilities
- Also suitable for desktop apps
- Smaller, less overload
- More “core” cleaner html layouts
- Rapid development
- Community (Ionic + AngularJS = huge community)
- Better navigation / routing
My end result looks like this: