SAP Multichannel Foundation for Utilities and Public Sector: How to Set up the iOS Mobile Application (SAP Self-Service for Utilities) for Local Development

[Former Member]

In June of 2015, we released our utilities consumer self-service mobile application SAP Self-Service for Utilities (SAP SSU) 1.0 for Android and iOS. SSU is a hybrid mobile app, meaning it is an HTML5+Cordova application.

The app released on iTunes and Google Play is only for demo purposes and cannot be used productively by a utility.  To put it to productive use, a utility company would need to make use of the app source code delivered by SAP to make the necessary modifications to it.  As part of the implementation, a utility company would first need set up SAP Multichannel Foundation for Utilities and Public Sector to enable the integration of the mobile app with the SAP utilities backend (SAP ERP IS-Utilities and SAP CRM for Utilities).

In the first blog of this two part blog series, I explained the steps for importing the app source code into your development environment and running, testing and debugging it for the Android platform.  In this blog, I will explain the same steps for the Apple iOS platform.

Before proceeding with the steps listed below, make sure you have the following prerequisites in place:

1. SAP Multichannel Foundation for Utilities and Public Sector SP5 is installed and setup.
2. SSU mobile app leverages SAP Mobile Platform (SMP) 3.0 for the push notification scenario. All the communication between the app and the SAP utilities backend passes through SMP.  The app first connects to SMP which then forwards each request to SAP Gateway.  Therefore, it is important to make sure that SAP Mobile Platform 3.0 is configured for OData consumption. For further information on how to configure the server for our app, please follow the steps in Chapter 5 of the SSU admin guide. For more information about SMP 3.0 Server, visit http://help.sap.com/smp305svr
3. Xcode 6 and above.
4. iPhone simulator (iOS 7 and above).

Note: the current version of the source code of the mobile app is based on the code line of UMCUI501 SP5. And the source code of iOS application is to help our customers, utilities companies, updating SSU www resources, not building the application from scratch.

Step1: Download the Xcode project

First you need to download the project from the SAP Service Market place.  To obtain source code, see SAP note 2165708.

After downloading the self-contained Xcode project that includes all the required  dependencies,  unzip the file in a folder and the contents of the folder will look like below:

Please note that you MUST NOT delete the target folder.

Step2: Import the project into Xcode

After unzipping, browse to the folder containing the .xcodeproj file by following path <folder where you unzipped files>\src\xcode\

Now open SelfServUtil.xcodeproj using Xcode.

Step3: Verify the dependencies linkage

In order to make sure that you have the right app build context, meaning whether you are building the app to run on the simulator or on a real device and whether you are building it for debug mode or release mode, it is important to make sure that the project is linking to the required libraries and headers.

To verify this, go to the build settings tab and search for “header search path” and make sure it has the following entry:

${PROJECT_DIR}/../../target/headers/${BUILD_STYLE}-${PLATFORM_NAME}

Four possible values for the parameter /${BUILD_STYLE}-${PLATFORM_NAME} are:

• Debug-iphoneos
• Debug-iphonesimulator
• Release-iphone
• Release-iphonesimulator

Then search for “library search path” and make sure it has the following entry:

${PROJECT_DIR}/../../target/libs/${BUILD_STYLE}-${PLATFORM_NAME}

Step5: Running and debugging the application

Now you can run the application on the simulator

Since this is a hybrid app, you need to debug it using a Web developer tool - we use Safari by going to the developer tool.

Click on “index_packaged.html”.

Location of the application resources:

App resources are located inside www -> umc folder soif you would like to change the User Interface or would like to modify or add a feature to the app, you need to modify files under this folder.

And the corresponding file structure is:

Where the splash screens and icons are located , so you can replace them but please pay attention to the image size and its name.

It is important to mention that there is one more library, smp (www -> umc -> smp), added to SSU for iOS and Android, and please don’t confuse it with the one that comes with kapsel plugins, which is directly under www (www -> smp). It plays the glue role between the SSU mobile resources and cordova plugins (including kapsel plugins).  For further information about kapsel plugins, see http://scn.sap.com/docs/DOC-49592.

The application works in demo and online modes. If you would like to test in demo mode just go to the logon screen and click on the Demo button.

Add custom theme

It is highly recommended to use the theme designer tool to modify the theme for SAP SSU responsive application. The following pic shows where to locate the custom theme:

Add custom logic and functionalities

If you have any custom logic or functionalities you need to place them in the corresponding folder (foundation, private, public). You need to pay special attention to those hooks, which are used to call methods in the package context. For example, some functionalities are handled different in the context of package app for example login and logout.

Summary:

In this blog, I described the steps to import the mobile app’s source code from SAP Service Market place, run it, and where to import custom them and code.  In a separated related blog, I will explain the same steps for Android platform.