Use Mobile Services to Create UI
- How to create a new mobile card
- How to give the query and collection query URL pointing to the proxy endpoint created in SAP API Management
- Step 1
-
Open Mobile Services Cockpit.
-
Under the side menu Select Services.
-
Under Services Select Mobile Services, users.
-
Click Go to Service to launch Mobile Cards.
-
-
Click Close.
-
In the main screen click Create to create a new mobile card.
-
Give the following values:
Field Value Name SalesOrderCard
Destination <your destination>
Template Source Template Manager
HTML Template User defined template
Card Template Automatic Instance Generation
-
Navigate to URLs tab and give the following values:
Field Value Query /<yourP#>trial/s4hanacloud/sap/opu/odata/sap/API_SALES_ORDER_SRV/A_SalesOrder?$expand=to_Item
Collection Handling Generic REST API
Query URL Collection Root $.d.results
Query Entity Key Paths $.d.__metadata.uri
-
Click + and click the Get Data.
-
Click the Editor tab.
-
Copy the below code and paste it into the Source Code box.
``` <div id="mySimpleTemplate" class="myTemplate" data-type="text/x-handlebars-template"> <div class="header"> <h1> SalesOrder </h1> <span class="name"> {{SalesOrderId}} </span> </div> <div class="card-content"> <div class="all"> <div class="title-content"> <span class="title"> Order Created At </span> <br> <span class="content"> {{CreatedAt}} </span> </div> <div class="title-content"> <span class="title"> Overall Delivery Status </span> <br> <span class="content"> {{OverallDeliveryStatus}} </span> </div> <div class="title-content"> <span class="title"> Sold to ID </span> <br> <span class="content"> {{SoldtoID}} </span> </div> </div> <img src="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 Items}} {{PurchaseOrderbyCustomer}} <span style="float:right;"> {{NetAmount}} {{CurrencyCode}} </span> <div style="clear:both; height: 10px;"> </div> {{/each}} </div> </div> </div> ```
-
Click Flip to Back.
-
Copy the below code and paste it into the Source Code box.
``` <div id="mySimpleTemplate" class="myTemplate" data-type="text/x-handlebars-template"> <div> <header> <span style="font-weight: bold; font-size: 24px; float: left; display: inline; padding:16px"> Sales Order Items Details </span> </header> </div> <div style="clear:both;"> </div> <hr> <table width="100%" style="margin: 0px;"> <tr> <th>Payment Terms</th> <th align="center">Sales Order Date</th> <th align="right" >Created By</th> </tr> {{#each Items}} <tr> <td>{{CustomerPaymentTerms}}</td> <td align="center">{{SalesOrderDate}}</td> <td align="right">{{CreatedByUser}}</td> </tr> <tr> {{/each}} </table> </div> ```
-
Click the Data Mapping tab
Here we will link the actual backend data to the fields defined in the UI Editor code.
-
Give the following values:
Field Value SalesOrderId
SalesOrder
CreatedAt
CreationDate
OverallDeliveryStatus
d.OverallTotalDeliveryStatus
SoldtoID
SalesOrder
Items
d.to_Item.results
PurchaseOrderbyCustomer
PurchaseOrderByCustomer
NetAmount
NetAmount
CurrencyCode
TransactionCurrency
-
Click Flip to Back and link backend data for additional fields.
Field Value CustomerPaymentTerms
CustomerPaymentTerms
SalesOrderDate
<select format>
CreatedByUser
PurchaseOrderByCustomer
-
Click Save.
Where do you point your API Management proxy while creating a mobile card?
-
- Step 2
- On the main page click the Emulator tab, click Load/Refresh.
- On the main page click the Emulator tab, click Load/Refresh.
- Step 3
-
On the main page click the APIs tab.
-
Scan the QR code for your device to register Mobile Cards to your app.
-
- Step 4
-
Log in to the app using your
<P#>
Skip any passcode requirements.
-
Subscribe to the card
SalesOrderCard
. -
You will now have a Mobile Card on your phone with record information provided from S4HANA.
-