Skip to Content
Author's profile photo Murali Shanmugham

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

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.



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 2 Go service

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.

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo tharini krishnan
      tharini krishnan

      Hi Experts,

      I am trying to achieve the same and I successfully pushed each line item in my FLP application as card to my mobile. Is there any way to push the line item as card automatically instead of clicking "Add to Mobile" option each time for each line item.Kindly help me here.





      Author's profile photo Murali Shanmugham
      Murali Shanmugham
      Blog Post Author

      You should use the Automatic Instance Generation card type for this


      Author's profile photo Sam Hilton
      Sam Hilton

      Hi murali

      thank u so for such a wonderful blog , its so helpful,

      i am facing one issue here

      can u please help me with this and my its not adding

      Author's profile photo Sam Hilton
      Sam Hilton