Mobilize your enterprise data using SAP Cloud Platform – Mobile Cards (Part 3)

[Murali_Shanmu]

This blog is part of a series which is related to the usage and configuration of Mobile Cards. In this part of the blog, I am going to focus on Automatic Web Page Matching card template.

 

Mobilize your enterprise data using SAP Cloud Platform – Mobile Cards

Part 1 - Introduction and Usage of Automatic Instance Generation card template Part 2 - Using Server Managed cards and Default card templates Part 3 - Using Automatic Web Page Matching card template Part 4.1 - Turn on SuccessFactors template cards Part 4.2 - Creating Custom Mobile Card Kit client

 

Automatic Web Page Matching Card

As I mentioned in the previous post, Automatic Web Page Matching card templates rely on a “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. Before we get into the details of configuring the plugin, let’s have a look at the Mobile card configuration.

Note: Ensure that you have added FLP destination in the Mobile Cards connectivity section (as shown in the beginning of the blog)

There are two key items in the card configuration. The “Web Page Expression Match” should refer to the navigation intent of the application followed by the parameters. When you open the app in a Fiori Launchpad, you will be able to see this in the URL.



The “Data Endpoint URL Template” should refer to the OData call which needs to be invoked when fetching the object details for the card. Note that “$1” represents a unique identifier and is used in the subsequent OData call.

The OData Endpoint URL which I have used is - /sap/opu/odata/sap/SEPMRA_PO_APV/PurchaseOrders('$1')?$expand=PurchaseOrderItems&$format=json&sap-client=002

I have pasted the JSON output of a Purchase Order query along with the Purchase Order Line items.



In the editor section, I have used the HTML tags to design the layout



In the Data mapping section, I have ensured that the correct values are mapped and formatted in the right way.



This completes the configuration of the mobile card.

The below SAP note provides a Portal shell plugin along with instructions to deploy and configure the shell plugin.

2434130 - How to register Fiori Smart Template Cards from Fiori Launchpad (FCE) to the HCPms Content...

Shell plugins are apps which can be used to extend the Fiori launchpad. We are going to use this shell-plugin to provide an action button in the Me Area of the Fiori 2.0 launchpad.



If you would like to know more about Shell plugins, have a look at the openSAP course - "Building Portal Sites on SAP Cloud Platform" Week 2 Unit .

I have created a Purchase Order display app based on the Master-Detail Fiori template and added it as a tile in my Fiori Launchpad. I have also deployed the shell plugin and added it to the same Fiori Launchpad as shown below.



The note has instructions on setting the parameters of the shell plugin to match the intent navigation of those apps for which the "Add to Mobile" icon needs to be visible. In the below example, I have referenced the intent navigation "New_App-Display" which I will be using in the next step.



For this blog, I have also created a sample Purchase Order app (with Intent Navigation New_Display-Display) and deployed it to the same Fiori Launchpad. You can access the source code of this Fiori app from GitHub. Once the Fiori Launchpad has been configured, the site can be published and made available to end users.



When you access the Purchase Order App, you should be able to see the Intent Navigation in the URL as shown below.



Click on the "Me Area" to view the icon "Add to Mobile". If you don't see it, try to reload the Launchpad again. Click on "Add to Mobile" to add the Purchase Order to a mobile card.



You should get a success message that the card has been added (as shown below).



You should instantly get a notification on your mobile device. Since "Automatic Web Page Matching" card templates support auto subscription, you don't have to subscribe to the cards manually. They will appear within the Mobile Cards app automatically.



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 Successfactors Template cards.