Use Mobile Services to Create UI

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:

Navigate to URLs tab and give the following values:

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:

Click Flip to Back and link backend data for additional fields.

Click Save.

On the main page click the APIs tab.

Scan the QR code for your device to register Mobile Cards to your app.

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.