Skip to Content

Create Cards with Actions (Like Approve Or Reject)

test
0 %
Create Cards with Actions (Like Approve Or Reject)
Details
// Explore More Tutorials

Create Cards with Actions (Like Approve Or Reject)

Implement actions within an SAP Mobile Card, like approve or reject.

You will learn

  • How to implement actions within a SAP Mobile Card

Using the sample data service that is part of SAP Cloud Platform Mobile Services, you will connect to a system and add an action to approve or reject a sales order.

Actions allow users to trigger a REST call from a card. This tutorial will change the status of a sales order from the sample service. After completing the tutorial, you can change the sales order’s status from New to Approved or Rejected. This allows you to build simple workflow solutions for the mobile device.


Step 1: Get familiar with real world use case

A company wants to allow managers to approve sales order on a mobile device.

The action card could be of type Automatic Instance Card to load all requests in a certain state. So, the query asks for all items of the sales order that need to be approved. Each item of the result set would show as a single card. The manager can then select an action on the card and approve or reject the sales order.

Log on to answer question
Step 2: Create a new action card

Make sure you have logged into SAP Cloud Platform Mobile Services cockpit. Navigate to SAP Mobile Cards to look into Mobile Cards configuration.

SAP Cloud Platform Mobile Services - Opera

Click the Create a New Card icon.

SAP Cloud Platform Mobile Services - Opera

Provide the required information as per below.

Field Value
Name ActionCard
Destination SAPCPMobileServices
Template Source Template Manager
HTML Template Sample Sales Order Template

If you see a pop-up, click OK.

SAP Cloud Platform Mobile Services - Opera

Destination defines the root for the queries that are going to be used for this card.

Navigate to the URLs tab to view data endpoint definitions.

Click Get Data to retrieve sample JSON response based on a defined URL.

SAP Cloud Platform Mobile Services - Opera

Click URL 0 to view the sample JSON response.

You can format JSON data by clicking on icon as per below screenshot.

Copy the SalesOrderId parameter.

SAP Cloud Platform Mobile Services - Opera

Click on the + icon to add a parameter to the card. This parameter will be used later to build the correct URL so that the action modifies the current SalesOrder status.

SAP Cloud Platform Mobile Services - Opera

Provide the required information as per below.

Field Value
sID $.d.SalesOrderId
Log on to answer question
Step 3: Update the card's title

Click Editor.

SAP Cloud Platform Mobile Services - Opera

Replace SalesOrder text with Action Card to rename the title of card. This helps later to identify the right card on the device.

SAP Cloud Platform Mobile Services - Opera
Log on to answer question
Step 4: Add actions to the card

Navigate to the Actions tab to start adding actions to the card.

Enter the following value for XCSRF Token URL:

/SampleServices/ESPM.svc/

This way the client will know where to get the token from for the actions.

SAP Cloud Platform Mobile Services - Opera

The default value for behavior for an action is INACTIVE. An inactive action does not allow any new actions after a successful call.

Click the + icon to add an action and provide the required information:

Field Value
Name Accept
Label accept
URL /SampleServices/ESPM.svc/SalesOrderHeaders('${sID}')
HTTP Method PATCH
Action Body {"LifeCycleStatusName": "Accepted", "LifeCycleStatus": "A"}
SAP Cloud Platform Mobile Services - Opera

Here URL will call the current SalesOrder which the card represents. ${sID} defines the placeholder where the current SalesOrderID will be put in from the OData JSON response.

Action Body will patch the SalesOrder status from New to Accepted if the action is triggered.

Now, create a Request Header for the Accept action. Click the + icon and provide the required information:

Field Value
X-Requested-With XMLHttpRequest
SAP Cloud Platform Mobile Services - Opera

Click the + icon to create another action and provide the required information:

Field Value
Name Reject
Label reject
URL /SampleServices/ESPM.svc/UpdateSalesOrderStatus?id='${sID}'&newStatus='R'
HTTP Method POST
SAP Cloud Platform Mobile Services - Opera

This URL will call the OData function UpdateSalesOrderStatus, which is implemented on the sample service and passes the current SalesOrderID as well as the new status. This is the second option to change a SalesOrder status.

Now, create a Request Header for the Reject action. Click the + icon and provide the required information:

Field Value
X-Requested-With XMLHttpRequest
SAP Cloud Platform Mobile Services - Opera

Click Save.

What was the value provided for newStatus parameter as part of URL for Reject action?
×
Step 5: Subscribe to the card in SAP Mobile Cards

In the SAP Mobile Cards application, click the + icon to open the subscriptions.

Card

Click ActionCard under the All tab.

Chrome Remote Desktop

Click Subscribe to activate the ActionCard subscription.

Chrome Remote Desktop

Click any card to open it.

Chrome Remote Desktop

Here, you can see a preview of the cards. Click Done.

Chrome Remote Desktop

Click the action icon at the bottom-left to open the available actions on the card.

Chrome Remote Desktop

Click accept to accept the card and trigger a change in status. You will see a successful completion of the REST call.

Chrome Remote Desktop
Log on to answer question
Step 6: Cross verify status update in the back end

In the Mobile Services cockpit, click Connectivity under the Features tab.

SAP Cloud Platform Mobile Services - Opera

Click the OData destination test icon.

SAP Cloud Platform Mobile Services - Opera

Enter the following for the relative path and click Next:

/SampleServices/ESPM.svc
SAP Cloud Platform Mobile Services - Opera

Select the SalesOrderHeaders entity set from the dropdown.

SAP Cloud Platform Mobile Services - Opera

See that the SalesOrder has changed the status accordingly.

SAP Cloud Platform Mobile Services - Opera
Log on to answer question

Next Steps

Back to top