SAP Cloud Platform Mobile service provides Fiori iOS/Android SDK for developers to build native mobile apps. This service also includes a Mobile Card Kit – which can be used to create micro apps in iOS/Android devices without having to write a line of code. Yes, you can mobilize your enterprise data in few hours. There has been plenty of updates since its launch back in 2017 and in this blog, I would like to share my experience on using Mobile Cards. For those who are not aware of Mobile Cards, matt.carrier explains it in one of his blogs
“Mobile card kit is a framework and companion app that helps you unlock business content which is typically stored within SAP and 3rd party business systems and share it via micro apps. If you are familiar with wallet style mobile apps then you can easily understand how SAP Mobile card kit works. We simply take content from business systems and deliver it into a wallet style card on your mobile device. Cards can be stored offline, auto refreshed, subscribed to, and maintained so that you have a single business content repository on your iPhone/Android device. SAP Mobile card kit support process approvals too, so it can be a great tool for simple workflow management.”
There are some great resources on SAP Community where people have shown how to use Mobile Cards to approve work items from on-premise and cloud systems. Mobilize your S4H Inbox with SAP Mobile Cards – a little E2E scenario by f.lehmann Enable Purchase Order Approval in mobile card kit by mark.wright5 If you would like to quickly get started, I would recommend to go through this blog post - Everyone Should Try This – SAP Mobile Cards by midhun.vp . You can register for a free trial account and try it out with the sample OData service.
When you are inside the SAP Cloud Platform Mobile service, you would first need to add destinations. This could be OData/REST endpoint from an on-premise system (exposed via Cloud Connector) or from any public system. Its also important to note that the Mobile Card Kit can be also used with non-SAP systems as long as they system provides a REST service with JSON output. For the purpose of this blog, I have created few destination as shown below. 
- SupplierCard – A destination which points to ES5 demo system. I will use this for the majority of the blog. If you don’t have an account signup here
- SuccessFactors – This points to a demo SuccessFactors tenant. matt.carrier has earlier announced the availability of cards for few HR scenarios in his blog - SAP Mobile Cards Helps you Take SAP SuccessFactors Mobile. I will use this destination in this blog to showcase how you can create cards for some HR scenarios.
- FLP – This is a destination for the Fiori Launchpad site which is also in the same trial account. This will be used to push the cards from the Fiori Launchpad to the Mobile Cards app.
Once the destinations have been created, you would need to add them in the Connectivity section of “SAP Mobile Cards” as shown below. 
As an administrator, you will be able to view the registered users, analytics from the above screen. You can also view the list of templates in the template manager. As of today there are templates for Inbox, SuccessFactors contents etc. The list will soon grow to accommodate other SaaS solutions/common business processes too. Towards the end of his blog, I will show you how to leverage SuccessFactors templates. 
Here is a screen capture of my Mobile Cards. There are 6 card templates which I have already created for this blog. You can create new cards by clicking on the icon “Create a new card”. 
In the card template section, there are 5 type of templates. I am going to structure my blog around these card templates. 
Welcome Card – These cards are automatically sent to the devices which register to this service. The card type can only have a single instance. The content could be either static or dynamic. Default – These card types are created when an app/website makes an explicit REST API call. Server Managed Card – These card types are created when a device connecting to the service subscribes to this Card (unlike Welcome cards). The card type can only have a single instance. Automatic Web page matching – This relies on something called “Mobile Card Plugin”. This plugin can be embedded in Fiori launchpad and it can facilitate the creation of cards (using REST API) based on business contents shown within the Fiori apps. Automatic Instance Generation - These card types are created when a device connecting to the service subscribes to this card. The query defined for this Card will return a result set. For each entity in the result set, a card will be generated. This card type can have n instances of a card. To know more about these card templates, please have a look at the SAP Help documentation
Automatic Instance Generation
As mentioned above, “Automatic Instance Generation” card template facilitates the creation of “n” number of cards based on the query result set. For example, you might want to show the last three payslips for your employees. For such scenario, you can use this card template and refresh the cards beginning of every month. Your employees will always get to see their last three payslips. All you need is an OData service which can be consumed by this card template. In the below screen config, noticed that I have provided a destination to point to SAP ES5 Demo system and provided a query which fetches the top two purchase orders. The cards refresh on a daily basis. 
In the sample data section, provide the JSON output of the service. You can copy this from the browser and paste it here. This will help you design the card in the next section. 
In the editor tab, you will define the layout of the cards. If this card is based on an existing template, you could just use it out-of-the-box. Since this card is used to display purchase orders, I am designing the card myself using HTML tags. Notice that the values are populated in runtime for the placeholders {{<fieldname>}} 
Here is the complete HTML code
<body>
<div id="mySimpleTemplate" class="myTemplate"
data-type="text/x-handlebars-template">
<div class="header" style="height: 30px">
<div style="text-align: left;">
<span style="font-weight: bold; font-size: 24px; float: left; color: #ffffff; display: inline; padding-top: 8px">
Purchase Order:{{POId}}
</span>
</div>
<div style="text-align: right;">
<span style="float: right; clear: right; display: inline; font-size: 17px; color: #fafafa; padding-top: 4px">
Items {{ItemCount}}
</span>
</div>
</div>
<div class="card-content">
<div class="listitem">
<div class="listitem-label">
<span>
Supplier
</span>
</div>
<br>
<div class="listitem-value">
<span>
{{SupplierName}}
</span>
</div>
</div>
<div class="listitem">
<div class="listitem-label">
<span>
Gross Amount
</span>
</div>
<br>
<div class="listitem-value">
<span>
{{GrossAmount}}{{CurrencyCode}}
</span>
</div>
</div>
<div class="listitem">
<div class="listitem-label">
<span>
Delivery Date
</span>
</div>
<br>
<div class="listitem-value">
<span>
{{DeliveryDateEarliest}}
</span>
</div>
</div>
<div class="listitem">
<div class="listitem-label">
<span>
Order By
</span>
</div>
<br>
<div class="listitem-value">
<span>
{{OrderedByName}}
</span>
</div>
</div>
<br>
<br>
<div class="listitem">
<div class="listitem-label">
<span>
DeliveryAddress
</span>
</div>
<br>
<div class="listitem-availability">
<span>
{{DeliveryAddress}}
</span>
</div>
</div>
</div>
</div>
</body>
In the data mapping section, you can define the mapping of the fields to the placeholders. 
Once you save the card template, you can then navigate to the "Mobile Cards" app on your device. You would have zero cards to start with. Click on the "+" icon top right corner to subscribe to the card called “PO_Orders”. 
The moment you subscribe to the card template, it will download all the card instances. In this case, it would be two purchase orders. 
Towards the end of this blog series, I will provide access to my cards and show you how you can import them in your trial account. In the next part of the blog, I will show you how to use the remaining card templates.
- SAP Managed Tags:
