Skip to Content
Technical Articles
Author's profile photo Jitendra Kansal

SAP Mobile Cards: Build Mobile card kit clients using the cloud build service

Updated: For latest information, please visit SAP Mobile cards documentation

 

Updated: With the release of SAP Cloud Platform Mobile Services 1810, you can now also include the iMessage and Today extensions for Mobile cards custom client using Cloud Build Service.


With the release of SAP Cloud Platform Mobile Services 1806, you can now also create a custom Mobile card kit client using Cloud Build Service for iOS & Android devices. Cloud Build service already supports configuring and building custom Fiori Client, Mobile Development Kit Clients and SAP Asset Manager.

In this blog post, you will learn how to build a Mobile card kit client using cloud build service with adding a new app icon, app name etc. like below.

left side image/icon is from standard SAP Mobile Cards app , right one is custom.

Let’s get started,

For Android client, start from step #7

For iOS Client, follow all steps

Note: below steps are sort of a walkthrough choosing minimal steps in order to show how to build a custom client, you are free to choose various other ways/options for the same outcome.

Before we proceed, go to the Apple Developer website and make sure that you are enrolled in the Apple Developer Program, either individually or as a member of a development team.

Step 1 : Obtain a certificate signing request

Open KeyChain Access app on your local MacBook , navigate to Keychain Access Menu > Certificate Assistant > Request a Certificate From a Certificate Authority

Fill out the information in the Certificate Information window as specified below and click “Continue.”

  • In the User Email Address field, enter the email address to identify with this certificate
  • In the Common Name field, enter your name
  •  In the Request group, click the “Saved to disk” option
  • Click on Continue and Save it .

Step 2 : Create a new development certificate

Note: downloaded certificate is with .cer extension , for creating a Signing Profile in Mobile Services “Signing certificate file extension should be p12 or pfx

  • Double click on downloaded certificate, this certificate will be added to KeyChain Access app, right click on it. Select “Export….”

If you don’t find certificate you double clicked on , go to “My Certificates” under category and look over there.

 

  • You will be required to enter a password which will be used to protect this certificate, once done, you will have certificate file with .p12 extension. (note down this password somewhere or remember it , as this will be used later while creating a signing profile in Mobile Services Cockpit) 

Step 3 : Register an App Group

  • Navigate to “App Groups” under “Identifiers”, click on ‘+’ icon.
  • Enter App Group name
  • For ID: “group.” is default added as soon as you starting type ID (you have to enter only ID like com.test.jk)

 

 

  • Click “Continue” and “Register

Step 4 : Create below iOS App IDs

  1. for main app – com.test.jk (could be any name of your choice)
  2. for iMessage extension – com.test.jk.messageextension (should be followed as main app id.messageextension)
  3. for Todays extension – com.test.jk.todayextension (should be followed as main app id.todayextension)
  • Bundle ID: Should be same as mention in App Group i.e. com.test.jk

Note: Apple recommends (or requires) that the App Group and the Bundle ID match, with “group.” added to the beginning of the Bundle ID to form the App Group.

 

 

  • Under App Services, select  App Groups as shown below:

 

 

  • Click Continue and Register

repeat the same for below App IDs , make sure you have enabled “App Groups” service while creating these

com.test.jk.messageextension

 com.test.jk.todayextension

  • Wait, we haven’t assigned which App Group these app IDs should linked to. So, go to list of App Ids (left side) and look for the IDs you just created in previous step . Select it and click on Edit and then again click on Edit as mentioned in below screenshot. Select App Group , continue and Assign.

You have successfully updated the App Groups associations with all 3 App IDs.

Step 5 : Register your device

  • UDID: Device’s unique identification (Connect your iphone to your Mac, open Xcode , look into “Device & Simulators” option under “Window” menu

 

Step 6 : Create development provisioning profile

You need to create 3 different development provisioning profiles for all 3 App IDs created in step#4 . Let’s go one by one.

  • Click on “Development” available under “Provisioning Profiles” section
  • Click on ‘+’ icon
  • Select “iOS App Development” under Development, click on Continue
  • Select App ID created in step#4, click on Continue 
  • Select Certificates , you can find this certificate with name (Common Name) you provided in step#1, click on Continue
  • Select devices added in step#5
  • Add a valid name to your provisioning profile, click on Continue and then Download it

repeat same steps for other 2 App IDs. In the end, you should have something similar to below screenshot

Note: Max char length for a provisioning profile file name shouldn’t exceed 50 char (including it’s type e.g. JKMobileCardsiMessagExtProvProfile.mobileprovision) 

Step 7 : Configuration in SAP Cloud Platform Mobile Services Cockpit – Creating a signing Profile

  • Click on “Upload
  • Select Platforms – iOS / Android

For iOS Client:

We need to create 3 different signing profiles pointing to same Signing profile and respective Provisioning profile

  • Give a unique name to your profile
  • Import Signing certificate .p12 generated in step#2, enter key
  • Import Provisioning Profile downloaded in step#6
  • Click “OK”

repeat same for other two provisioning profiles (as below screenshots)

Once done, you should see something like this

 

For Android Client:

If you already have an Android Signing profile, you can directly upload it by clicking on “Upload” option.

Otherwise, as an Administrator, creating a signing profile for Android is also possible in SAP Cloud Platform Mobile Services Cockpit.

  • Click on Settings > Signing Profiles
  • Click on “Generate” to generate a signing profile for Android OS
  • Provide below mandatory info:  Profile Name (any name of your choice, Validity, Common Name (user’s name). Other asked information are optional.
  • then click on “OK”

Step 8 : Start Cloud Build service

  • Expand “Mobile Applications” , Click on “SAP Mobile Cards
  • Click on “Cloud Build

 

  • Enter Device App Name – Enter any name of your choice
  • Bundle ID – same as mentioned in step#4
  • App version – e.g. 1.0
  • URL Scheme- optional
  • Application Launch Icon – Optional
  • Save it

  • Click on “Build History
  • Click on “Build” , select  respective “Signing Profiles” for required platforms, Press “OK

 

Note: You can click on above build to see related logs.  After couple of minutes, build completes with success.

You can install this new custom mobile card client app either by scanning QR code from iPhone/Android phone’s camera app (click on “Install”) or Download binary (ipa, apk) locally and install in your device via IDEs like XCode, Android Studio or via other means.

iOS Client:

 

For Todays widget:

 

for iMessage:

 

 

 

Android Client:

 

More information on

I hope this gives you some idea how to create a custom Mobile card kit application.

Assigned Tags

      9 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Jitendra Kansal
      Jitendra Kansal
      Blog Post Author

      Updated:

      With 1807 release, building a custom Mobile Cards for Android is also possible. Look for steps mentioned in above blog post.

      Author's profile photo Jitendra Kansal
      Jitendra Kansal
      Blog Post Author

      Updated: With the release of SAP Cloud Platform Mobile Services 1810, you can now also include the iMessage and Today extensions for Mobile cards custom client using Cloud Build Service.

      Author's profile photo Fabiano Rosa
      Fabiano Rosa

      Hi Jitendra, this blog is very helpful, also where I can find more information about the SCP Mobile Services -  Cloud Build for SAP Asset Manager?

      Regards,

      Fabiano Rosa

      Author's profile photo Jitendra Kansal
      Jitendra Kansal
      Blog Post Author

      Fabiano Rosa

      You can find details in Mobile Services admin doc

      Author's profile photo Fabiano Rosa
      Fabiano Rosa

      Hi Jitendra, I already took a look in this documentation, but I need more details regarding the build process of SAP Asset Manager (SAM) with Cloud Build service, like how to choose the version of the MDK or SAM in the build jobs. Where can I find more information about it?

      Regards,

      Fabiano Rosa

      Author's profile photo Jitendra Kansal
      Jitendra Kansal
      Blog Post Author

      Fabiano Rosa

      You can find version details only in the build log (after you trigger the Build ).

      There is currently no way for admin to choose the either versions before the triggering the build.

      Author's profile photo Fabiano Rosa
      Fabiano Rosa

      Hi Jitendra, thanks! I'll check the build logs, but I'd like to suggest to add this feature in the product backlog, because it will be very useful.

      Regards,

      Fabiano Rosa

       

       

      Author's profile photo Ritesh Manktala
      Ritesh Manktala

      Hi Jitendra

       

      @jitendrakumar.kansal

       

      Can you help me with sap mobile cards documentation/blog for sap mobile cards on cloud foundry, where in

       

      1. I can consume an external odata/json api and show them on the cards
      2. What all different chart types supported by SAP Mobile Cards.
      3. How to pass SSO token to the third party API post Authentication ?

      I could see early 2018 blogs where in on the Mobile services, i could see place to add destination, which i believe is now replaced with URL in cloud foundry withing a new mobile card. All the examples i could see consuming the API/odata services from cloud platform only.

      thank you

      Ritesh

      Author's profile photo Jitendra Kansal
      Jitendra Kansal
      Blog Post Author

      Ritesh Manktala

      For Mobile cards documentation, please refer this link.

      For your other queries,i suggest you to raise a new thread at Q/A so it's visible to experts to guide you.