Create a Sales Order Approval Card

Intermediate

30 min.

SAP Mobile Cards, iOS, SAP Mobile Services, Intermediate, Tutorial, SAP Business Technology Platform, Android, Mobile

Implement actions within an SAP Mobile Card to enable workflows like approve, reject or reset.

You will learn

How to create a Card template that shows one card instance for each record.
How to work with Query URLs.
How to implement actions within an SAP Mobile Card
How SAP Mobile Card can be used for Approval workflows

Sandeep T D SMarch 31, 2021

Created byFebruary 27, 2019

Contributors

Prerequisites

Completed the starter mission or Set up Mobile Services on your SAP Business Technology Platform account
Set up SAP Business Application Studio for Mobile Development
Created your first card in SAP Business Application Studio
Install SAP Mobile Cards Application:

Android
iOS

After completing the tutorial, you can reset the sales order’s current status to New or Approved or Rejected. This allows you to build simple workflow solutions for the mobile device.

Step 1
A sales manager in a company usually needs to log into her computer to Approve or Reject Sales Order that her team has created. In some cases, she also wants to reset the status of the order from Rejected or Approved back to New. Since she is constantly on the move, she wants a way to perform these actions on her Mobile Device.
In this tutorial, you will see how you can quickly mobilise this use-case using SAP Mobile Cards. The Multi Instance card will show three cards with the sales order information. Each card will have the details of one sales order and the action to accept/reject the order or reset the order status.
For this tutorial, you will use Mobile Services sample backend to retrieve top 3 sales orders.
Step 2
Open your Business Application Studio, and enter your Development space.
If your dev space is not running, click the Play Button -
to start it.

In the menu bar, go to View → Find Command, click Find Command.
For faster development, you can use the shortcut key.

Type Mobile Cards: New, and select Mobile Cards: New From Template.

Select Sales Order Approval Card - Multi Instance.

Enter a name for the card; e.g. Action Card.

Open metadata.json file from the project explorer.
Destination defines the root for the queries to be used for this card.

Click on the Actions tab, to view the Approve and Reject actions.
Actions allow users to trigger a REST call from a card. Whenever an action is performed, the changes are reflected in the backend and in the mobile card the lifecycle status of the order is changed (according to the action i.e. approve or reject).
For reject action, parameter is added through which the user is prompted to add a reason why he/she is rejecting the order.

In the body of the Approve action, what was the value provided for LifeCycleStatus?
N
A
R
Approve

Step 3

Click the add icon (

) to add an action and provide the following information:

Field	Value
Name	`reset`
Label	`Reset`
URL	`/SalesOrderHeaders('${SalesOrderId}')`
Behavior after Action	`ACTIVE`
HTTP Method	`PATCH`
Consider Action As	`Neutral`
Action Body	`{"LifeCycleStatusName": "New", "LifeCycleStatus": "N"}`

${SalesOrderId} in the URL is a parameter defined in the URLs tab..

Making an action active allows the user to perform another action. For details, click here.

Consider Action As assigns an icon for the action seen on the Android device.

Step 4
Open Find Command, search for Mobile Cards and select Mobile Cards: Deploy.

Select Action Card.
If prompted to enter your username & password, enter the login details you use to login to the Mobile Service cockpit.
Your will receive a success message when your card is successfully deployed.

Open Find Command, search for Mobile Cards and select Mobile Cards: Publish.
If prompted to enter your username & password, enter the login details you use to login to the Mobile Service cockpit.
Your will receive a success message when your card is successfully published.

By default, the status of newly created cards is Development, and thereby can’t be seen on the mobile device. By publishing the card, the card becomes productive and accessible on the device. Click here to learn more about the card lifecycle.
Step 5
Make sure you are choosing the right device platform tab ( Android or iOS ) above.

Perform Pull Refresh in the SAP Mobile Cards Android client.
The SAP Mobile Services client syncs new versions periodically. In the interest of time, you may choose to un-subscribe and subscribe the card to force the changes immediately.

Tap expand actions button (
) to expand the actions menu.
The icons seen here appear because of the Consider Action As property.

Make a note of the LifeCycleStatus and the SalesOrderId, and tap Approve Order.
You will see a toast messages when the action is being performed
and a message when it is completed successfully

Tap on the card to open it, and notice the LifeCycleStatus.
The data is dynamically generated by the sample service on SAP Mobile Service server. Thus, the data inside the card on your device may be different than what you see in the screenshot.

Select another card, tap on it to open it, and make a note of the Customer and LifeCycleStatus.

Tap actions menu (
), and tap Reject Order.

Enter a reason for Rejection and Tap Reject Order.
The user is asked for a reason because we added an action parameter for the reject option.

Tap the back icon ← until you return to the cards list view, and re-open the card and notice the LifeCycleStatus for the respective customer.
Step 6
In the Mobile Services cockpit, click Mobile Connectivity under the Features tab.

For the com.sap.edm.sampleservice.v2 sample service, click the Launch in Browser button
.

In the browser window that opens, replace ?auth=uaa with /SalesOrderHeaders.

Scan the LifeCycleStatusName column to identify records that reflect the actions performed by you.

Keep this browser window open. It will be used in the next step.
Step 7
Make sure you are choosing the right device platform tab ( Android or iOS ) above.
Now, let’s assume that the necessary action has been taken for the rejected card. We will now reset the status of the card in this step.

Scroll through the cards, and tap on the card that was rejected.

Tap the actions menu (
), and tap Reset.

Tap ← until you return to the cards list view, and re-open the card and notice the LifeCycleStatus.

!![MobileCardsImage](img_7_and_3.png)
Step 8
Refresh the com.sap.edm.sampleservice.v2 sample service browser window.

Notice the LifeCycleStatus for the record that was previously Rejected: Incorrect Amount.
It should now be New.

Congratulations! You have built an approval card with actions using SAP Mobile Cards.