Skip to Content

Create A Sales Order Push Card

test
0 %
Create A Sales Order Push Card
Details

Create A Sales Order Push Card

Sandeep TDS
Sandeep TDS
August 16, 2020
Created by
Sandeep T DS
August 16, 2020
Intermediate
45 min.
SAP Mobile Cards, SAP Cloud Platform, Mobile, Tutorial, iOS, SAP Business Application Studio, Intermediate, Android, SAP Cloud Platform Mobile Services
Create a Web Page Match Card enabling you to push mobile cards to your mobile device from an external system.

You will learn

  • Create a Web Page Matching card using a template in Business Application Studio
  • Design and develop SAP Mobile Cards in Business Application Studio
  • Deploy and Publish a card to SAP Cloud Platform Mobile Services from Business Application Studio

Prerequisites

Add additional information: Background information, longer prerequisites

Step 1: Get Familiar With The Real World Use-case

Watson, a salesperson, has created a Sales Order.

Alice is the sales manager who needs to approve this request. Since she is constantly on the move, she wants the ability to approve the request on her mobile device.

In this tutorial, you will create a card and send a push notification to Alice as soon as Watson creates a request.

Done
Log on to answer question
Step 2: Create a New Web Page Matching Card

Open Business Application Studio and enter your dev workspace.

Business Application Studio Dashboard

In the menu bar, go to View → Find Command, click Find Command.

Open Command Pallete

For faster development, setup a shortcut key for Find Command and use it.

Search for mobile cards and select Mobile Cards: New.

Command Pallete New Card

Enter a name for the card; e.g. Sales Push Card BAS.

Enter a name for the card

A folder called Sales Push Card BAS is created.

Card Structure
Done
Log on to answer question
Step 3: Modify The Card Type
View Full Instructions

In your File Explorer, right click on metadata.json, and select Open With → Code Editor.

Metadata.json Open With

Click here to learn more about editing a card in Business Application Studio

Replace the entire code in the file metadata.json with the following, and save your changes.

{
    "Name": "Sales Push Card BAS",
    "Connection": "com.sap.edm.sampleservice.v2",
    "CustomType": "SAP_CARD_TYPE_WEB_PAGE",
    "ResourceIdentifiers": [
        {
            "ImagePaths": "$.d.results.[0].PictureUrl",
            "Order": 0,
            "Shared": false,
            "Uri": "AddURL"
        }
    ],
    "UrlMatch": "ChangeValue",
    "RefreshInterval": null,
    "QueryInterval": null,
    "QueryURL": null,
    "QueryConfiguration": null,
    "CardClass": "HtmlTemplate",
    "AutoSubscribe": false,
    "SubscribableTo": {
        "Users": []
    },
    "Descriptions": [
        {
            "language": "EN",
            "text": "A push card created in BAS using SalesOrder data"
        }
    ],
    "NotificationMessages": null,
    "ActionConfiguration": null,
    "QueryReturnsEntityCollection": false,
    "GroupName": null,
    "Locked": false,
    "NotificationRules": [],
    "APNSEnabled": true,
    "HiddenSubscription": false,
    "AppLaunchUrl": null,
    "NewsEnabled": false,
    "SubscriptionParameters": [],
    "GatekeeperConfiguration": null,
    "CustomRequestProperties": null,
    "SortCardsWith": null
}

In the code above, we are changing the Card Template type from Server Managed Card to Web Page Matching Card.

In your File Explorer, click metadata.json.

Metadata.json Metadata Editor

In the Card Template section, update the Web Page Expression Match with SalesOrderHeaders({ID1}).

Web Page Expression Match

Open the URLs Tab

Open URL Tab

Update the URL with /SalesOrderHeaders(${ID1}).

URL Tab: Updated URL

In the Parameters section click + to add a new parameter.

New Parameter

Enter the values as indicated in the table:

Name Value
SalesOrderId $.d.SalesOrderId

Click here to learn more about Parameters in SAP Mobile Cards.

Parameter Details
Done
Log on to answer question
Step 4: Add Approve Action

In your File Explorer, click metadata.json and go to the Actions Tab.

Actions Tab

Click + to add an action.

New Action Button

Enter the values as indicated in the table:

Field Value
Name accept
Label Accept Status
URL /SalesOrderHeaders('${SalesOrderId}')
Behavior after Action ACTIVE
HTTP Method PATCH
Consider Action As Positive
Show In Notification Center Parameter Details
Action Body {"LifeCycleStatusName": "Accepted", "LifeCycleStatus": "A"}

New Action Details

Click here to learn more about Actions in SAP Mobile Cards.

Save the changes you’ve made to metadata.json

Done
Log on to answer question
Step 5: Update The Design Of The Card
View Full Instructions

In your File Explorer, click userdata.json.

Userdata JSON File

Replace the entire code in the file userdata.json with the following, and save your changes.

{
	"d": {
	  "__metadata": {
		"id": "SalesOrderHeaders('cccd16d4-257c-47d5-8a90-c4a184d49830')",
		"uri": "SalesOrderHeaders('cccd16d4-257c-47d5-8a90-c4a184d49830')"
	  },
	  "CreatedAt": "/Date(1585558666126)/",
	  "CurrencyCode": "EUR",
	  "CustomerDetails": {
		"__deferred": {
		  "uri": "SalesOrderHeaders('cccd16d4-257c-47d5-8a90-c4a184d49830')/CustomerDetails"
		}
	  },
	  "CustomerId": "79f47b31-6364-45e9-8286-c39f2d817b1c",
	  "GrossAmount": "654.441",
	  "Items": {
		"__deferred": {
		  "uri": "SalesOrderHeaders('cccd16d4-257c-47d5-8a90-c4a184d49830')/Items"
		}
	  },
	  "LifeCycleStatus": "N",
	  "LifeCycleStatusName": "New",
	  "NetAmount": "549.950",
	  "SalesOrderId": "cccd16d4-257c-47d5-8a90-c4a184d49830",
	  "TaxAmount": "104.491"
	}
}

In your File Explorer, click template_en.html.

Front Template HTML

Replace the entire code in the file template_en.html with the following, and save your changes.

<body>
    <div id="mySimpleTemplate" class="myTemplate" data-type="text/x-handlebars-template">
        <div class="header" style="height: 30px">
            <div style="text-align: left;">
                <span style="font-weight: bold; font-size: 24px; float: left; color: #ffffff; display: inline; padding-top: 8px">
                    Salesorder Push Card
                </span>
            </div>
            <div style="text-align: right;">
                <span style="float: right; display: inline; font-size: 16px; color:#CEDDEC; padding-top: 15px">
                    {{d.SalesOrderId}}
                </span>
            </div>
        </div>
        <br> <br>
          <div class="card-content">
             <div class="all">
                 <div class="title-content">
                     <span class="title">
                         Net Amount
                     </span>
                     <br>
                     <span class="content">
                        {{d.NetAmount}} {{d.CurrencyCode}}
                     </span>
                 </div>
                 <br>
                 <div class="title-content">
                     <span class="title">
                         Tax Amount
                     </span>
                     <br>
                     <span class="content">
                        {{d.TaxAmount}} {{d.CurrencyCode}}
                     </span>
                 </div>
                 <br>
                 <div class="title-content">
                     <span class="title">
                         Gross Amount
                     </span>
                     <br>
                     <span class="content">
                        {{d.GrossAmount}} {{d.CurrencyCode}}
                     </span>
                 </div>
                <br> <hr> <br>
                                 <div class="title-content">
                     <span class="title">
                         Lifecycle Status Name
                     </span>
                     <br>
                     <span class="content">
                        {{d.LifeCycleStatusName}}
                     </span>
                 </div>
                 <br>
                                  <div class="title-content">
                     <span class="title">
                        Lifecycle Status Tag
                     </span>
                     <br>
                     <span class="content">
                        {{d.LifeCycleStatus}}
                     </span>
                 </div>
             </div>
          </div>
    </div>
</body>

In your File Explorer, click templateBack_en.html.

Back Template HTML

Replace the entire code in the file templateBack_en.html with the following, and save your changes.

<div id="mySimpleTemplate" data-type="text/x-handlebars-template">
    <div class="myTemplate" style="padding:25px;">
        Nothing to see here...
    </div>
</div>

Click here to learn more about designing a card in SAP Mobile Cards.

Open Find Command, search for mobile cards and select Mobile Cards: Preview.

Open Preview

A preview window for your card will open to the side. It will preview the latest changes you’ve made.

Preview Screen

The data you see in the card comes from userdata.json. Click here to learn more about userdata.json in SAP Mobile Cards.

Which all files have we updated so far?
×
Step 6: Deploy And Publish The Card From SAP Business Application Studio

Open Find Command, search for mobile cards and select Mobile Cards: Deploy.

Deploy Command

Select the card you have created; e.g. Sales Push Card BAS.

Deploy Card

Upon successful deployment, you will see a toast message at the bottom right corner of your screen.

Deploy success toast message

Open Find Command, search for mobile cards and select Mobile Cards: Publish.

Publish Command

Select the card you have created; e.g. Sales Push Card BAS.

Publish Card

Upon successful publish, you will see a toast message at the bottom right corner of your screen.

Publish success toast message
Done
Log on to answer question
Step 7: Subscribe To The Card On Your Mobile Device

Make sure you are choosing the right device platform tab ( Android or iOS ) above.

In the SAP Mobile Cards Android client, tap + | Subscriptions.

Android: App Home

Tap Sales Push Card BAS under the All Subscriptions tab.

Android: All Subscriptions

Tap Subscribe to trigger the download of the card in your SAP Mobile Cards app.

Android: Card Detail View

In the SAP Mobile Cards iOS client, tap More → Subscriptions.

iOS: More View

Tap All tab → Sales Push Card BAS.

iOS: All Subscriptions

Tap Subscribe to trigger the download of the card in your SAP Mobile Cards app.

iOS: Card Detail View

You have completed this tutorial. Web Page Matching Cards appear only when they are pushed to the device. Thus, you can now either terminate the app or send it to background, and proceed to the next tutorial in the mission.

Done
Log on to answer question

Next Steps

Navigate tutorial steps

QR Code

QR code
Back to top