Skip to Content
Technical Articles

SAP Mobile card for Android using ES5 Demo Gateway System

SAP mobile card for Android using ES5 Demo Gateway System

Here is my blog where i have showcased product details using ES5 service.

SAP Mobile Cards is an application that allows you to share content from SAP Fiori-based  applications from your desktop computer’s SAP Fiori launchpad to your Android phone or iPhone, which provides “any time from anywhere” access to the most up-to-date business data available.

Below are the steps:

First, login to you SAP Cloud Platform. Check for Mobile Services as highlighted below in Services.

Make sure it is enabled.

Open the service

Click on close at the bottom right corner and select SAP Mobile Cards.

Before creating Mobile Card, let’s add our ES5 destination to display the data on the card.

Open Destinations from the left pane and click on New.

Select Type as Mobile Destination and name the destination as ES5(any name).

Follow the steps below for adding the Destination

Click Next. No Need to update any changes.

 

 

 

Add User Name and Password here.

Click Finish.

Once the Destination is added, click on Ping for a check. It shows as ping is successful.

Now open SAP mobile Cards.

For New card Creation, click on create.

Now provide the details as shown below under Info tab.

Query: /sap/opu/odata/IWBEP/GWSAMPLE_BASIC/BusinessPartnerSet?$top=3&$skip=3&$expand=ToProducts

 

Go to Sample Data tab and click on get Data for sample JSON data for the respective URI.

Now go to Editor Section and start editing the fields data.

Here is my HTML code for the card.

 

<div id=”mySimpleTemplate” class=”myTemplate” data-type=”text/x-handlebars-template”>

<div class=”header”>

<h1>

Company Name

</h1>

<span class=”name”>

{{CompanyName}}

</span>

</div>

<div class=”card-content”>

<div class=”all”>

<div class=”title-content”>

<span class=”title”>

Business Partner ID

</span>

<br>

<span class=”content”>

{{BusinessPartnerID}}

</span>

</div>

<div class=”title-content”>

<span class=”title”>

Currency Code

</span>

<br>

<span class=”content”>

{{CurrencyCode}}

</span>

</div>

<div class=”title-content”>

<span class=”title”>

Phone Number

</span>

<br>

<span class=”content”>

{{PhoneNumber}}

</span>

</div>

</div>

<imgsrc=”SalesOrder.png” alt=”” >

</div>

<div class=”desciprtion”>

<div>

<span class=”d-title”>

Description

</span>

<span class=”d-title-a”>

Amount

</span>

</div>

<div>

<hr>

{{#each ToProducts}}

{{ProductID}}

<span style=”float:right;”>

{{WeightMeasure}}

{{WeightUnit}}

</span>

<div style=”clear:both; height: 10px;”>

</div>

{{/each}}

</div>

</div>

</div>

 

You can preview the mapped data in Data Mapping and card display.

Now click on save.

Once saved, our card will be listed in SAP Mobile Cards.

Its time to view the card in our mobile now.

On the landing page of Mobile Services, Scan the android barcode using any QR code Scanner app.

It will direct to install SAP Mobile cards from Play Store.

Download and install SAP Mobile Card app.

Once installed, now scan the below bar code and open the URL using SAP Mobile Cards app.

You will be asked for your login credentials.

Once logged, click on + icon.

You can see the created cards and can subscribe to the cards.

As I have created ES5 Demo card, I will subscribe for it.

Click on the ES5 Demo card and shoot subscribe button.

Finally, We can see the subscribed card in the home page.

 

We can subscribe or unsubscribe the card based on our usage. This action can be done by clicking on the + icon at the bottom right corner of your mobile.

We have created simple Mobile Card  in a less span of time without writing much code.

3 Comments
You must be Logged on to comment or reply to a post.