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

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 Server Managed Cards and Default Cards.

Server Managed Card

The server managed card types are created when a device connecting to the service subscribes to this card. Unlike Welcome cards, the user has to subscribe to these cards manually to obtain these cards. Unlike Automatic Instance Generation, this card type can only have a single instance.

As an example, I am going to show how to use the same Purchase Order service and display a card in the form of a chart. In the below configuration, I have referenced the same OData service and retrieving 20 purchase orders.

In the Sample Data section, I am pasting a JSON output of a collection of Purchase Orders

In the Editor section, I have used HTML tags along with scripts from d3 chart to create a Donut chart which displays the top 20 purchase orders by Suppliers. Hint : You can reference the script provided in the templates and use them.

Once you save the card template, you can then navigate to the “Mobile Cards” app on your device. . Click on the “+” icon top right corner to subscribe to the card called “Chart”. This will download the card and display my purchase orders in a donut chart based on the gross amount

Default Card

The Default cards are created using an explicit REST API call. You can use this card type when you are browsing through a website or objects within an app and want to send it as a card in your mobile app.

In the below configuration, I have not provided any URL. The payload would be sent from the calling app. I have set the destination to the same SAP ES5 Demo system and enabled Automatic subscription. So the user will get to see the card on their device instantly when an API call is being made through an app.

Since this card is going to show supplier details, I have used the service “EPM_REF_APPS_PROD_MAN_SRV” from ES5 Demo system and pasted the JSON output of a supplier entity.

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

In the Data Mapping tab, I have verified the value mappings and the formats.

This completes the card configuration and its time to save the configurations. In order to trigger the creation of a card, we need an app ready. I have uploaded a Fiori app which displays suppliers from the ES5 Demo system in GitHub. You can import it into WebIDE and prepare the application. The only change you might need to make in the below method (which get triggered when you click on the Send to Mobile icon) is by replacing sCardTypeGUID with your card template ID.

handleToMobileCardPress: function (oEvent) {
			var sCardTypeGUID = "DD679612-8B6D-492B-93AB-0AFDF8CBBAD2";
			if (!sCardTypeGUID || sCardTypeGUID.length === 0) {
				sap.m.MessageToast.show("You must set the Template ID first");
				return;
			}

			var url = "/mobileCards/origin/hcpms/CARDS/v1/cardTypes/" + sCardTypeGUID + "/cardInstances";
			var id = oAppModel.getProperty("/supplier").Id;
			var bodyJson = {
				"resourceIdentifiers": [{
					"uri": "/sap/opu/odata/sap/EPM_REF_APPS_PROD_MAN_SRV/Suppliers('" + id + "')?sap-client=002"
				}]
			};

			jQuery.ajax({
				url: url,
				async: true,
				type: "POST",
				data: JSON.stringify(bodyJson),
				headers: {
					'content-type': 'application/json'
				},
				success: function (data, textStatus, xhr) {
					if (xhr.status === 201) {
						sap.m.MessageToast.show("Successfully added Card");
					} else if (xhr.status === 200) {
						sap.m.MessageToast.show("Card has already been added");
					} else {
						sap.m.MessageToast.show("This Card cannot be added");
					}
				},
				error: function (xhr, textStatus, error) {
					sap.m.MessageToast.show("This Card cannot be added");
				}
			});
		}

Once the Fiori app has been deployed to SAP Cloud Platform and registered as a tile on the Fiori Launchpad, it can be accessed by end users. If you are looking for information around how to deploy the app and register them on a Launchpad, I would recommend you go through this openSAP course “Building Portal Sites on SAP Cloud Platform”

You can open the Supplier app and lookup a particular supplier and click on the “Send to Mobile” icon.

You will instantly get a notification on your device that a new card has been added. Clicking on the notification will take you to the supplier card as shown below.

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 “Automatic Web Page Matching” card template.