Skip to Content

Create Cards with Actions to Enable Workflows (Like Approve Or Reject)

test
0 %
Create Cards with Actions to Enable Workflows (Like Approve Or Reject)
Details

Create Cards with Actions to Enable Workflows (Like Approve Or Reject)

2019-12-09
Implement actions within an SAP Mobile Card to enable workflows like approve or reject.

You will learn

  • How to deploy a new version of an SAP Mobile Card
  • How to implement actions within an SAP Mobile Card
  • How to take an end user’s input within an SAP Mobile Card
  • How SAP Mobile Card can be used for Approval workflows

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. 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 sales manager in a company usually needs to log into her computer to Approve or Reject Sales Order that her team has created. 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 mobilize this use-case using SAP Mobile Cards. The Automatic Instance card will show three cards with the sales order information. Each card will have the Approve / Reject action. The sales manager can then select an action on a specific card to approve or reject the respective sales order.

MobileCardsImageMobileCardsImage
Log on to answer question
Step 2: Create a new version of the card

Please ensure that you have completed the Automatic Instance Generation tutorial before you proceed with the following steps.

At any given time, only one version can be productive. You need to create a new version to make any changes to a productive version. While you are working on a new version, the end-users can keep using the productive version. Once you deploy the new version, the end-user’s card will be updated.

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

MobileCardsImage

Click Automatic Instance Card in the Card Templates Tab.

MobileCardsImage

Click create new Version in the Versions table.

MobileCardsImage

Click Yes on the Confirmation dialog.

MobileCardsImage

Click the Edit Button (Pencil Icon) for the new version of the card.

MobileCardsImage

Enter the version as 1.1 and Click Save.

MobileCardsImage

You will be re-directed to the Card Templates Tab.

Click Automatic Instance Card in the Card Templates Tab.

MobileCardsImage

A new card with version 1.1 is created, and the state of this card is Development.

MobileCardsImage
Log on to answer question
Step 3: Update the card's title

Click the Edit Button (Pencil Icon) for the development 1.1 version card.

To ensure you are editing the correct version, please notice the green vertical bar in the Versions Table. This bar indicates the version of the current view on SAP Cloud Platform Mobile Services Cockpit.

MobileCardsImage

Click the Editor tab.

MobileCardsImage

Replace SalesOrder text with Action Card to rename the title of card.

MobileCardsImage
Log on to answer question
Step 4: Add Approve Action

Click the Actions tab.

MobileCardsImage

Change Behavior after Action to Active.

MobileCardsImage

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

Add / as the XCSRF Token URL.

MobileCardsImage

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

Field Value
Name approve
Label Approve
URL /SalesOrderHeaders('${SalesOrderId}')
HTTP Method PATCH
Consider Action As Positive
Action Body {"LifeCycleStatusName": "Accepted", "LifeCycleStatus": "A"}
MobileCardsImage

Here URL will call the current SalesOrder which the card represents.

${SalesOrderId} defines the placeholder where the current SalesOrderID will be put in from the OData JSON response. MobileCardsImage

Consider Action As will assign an icon for the actions on Android.

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

In the body of the Approve action, what was the value provided for LifeCycleStatus?
×
Step 5: Add Reject Action

Click the + icon to create another action.

MobileCardsImage

For Reject, we want the Sales Manager to provide a reason. Thus, we will create an Action Parameter, before we fill the details for the action.

Click + Parameter button to create an action parameter and provide the required information:

Field Value
Name reasonForRejection
Label Please provide a reason for rejection
Data Type Edm.String
Maximum Length 255
Is Nullable Uncheck
MobileCardsImage

In SAP Mobile Cards, you can allow the user to provide an input while performing an action. This input is stored in an Action Parameter.

Click Action 2 field in the Actions Table and provide the required information:

Field Value
Name reject
Label Reject
URL /SalesOrderHeaders('${SalesOrderId}')
HTTP Method PATCH
Consider Action As Negative
Action Body {"LifeCycleStatusName": "Rejected: ${reasonForRejection}", "LifeCycleStatus": "R"}
MobileCardsImage

We are storing user’s input the Action Parameter reasonForRejection. We then send the value in this parameter as a part of the body. Upon successful execution, the card will display the reason entered by the user.

What is the name of the action parameter created for the Reject action?
×
Step 6: Deploy a new version of the Card

Click the Info tab.

MobileCardsImage

In the Versions Table, click the highlighted icon to change the state to Productive.

MobileCardsImage

Choose Yes to confirm.

MobileCards

Notice that the State of the versions has changed. The newly published version - 1.1 is now in Productive state, and the older version - 1.0 is now in Backup state.

MobileCardsImage
Log on to answer question
Step 7: Subscribe to the card in SAP Mobile Cards

Make sure you are choosing the right device platform tab above.

The SAP Mobile Services client syncs new versions periodically. In the interest of time, you can choose to un-subscribe and subscribe the card to force the changes immediately.

Do a pull refresh.

MobileCardsImage

In the card properties view, notice that the version of the Automatic Instance Card is 1.1.

MobileCardsImage

Tap <- ‘Back’ to to see latest cards downloaded on the device and tap v to expand the card action menu.

MobileCardsImage

Tap Reject to reject the Sales Order.

MobileCardsImage

The Icons seen here appear because of the Consider Action As property.

Make a note of the LifeCycleStatus and Action Card Id.

Enter a reason for Rejection and Tap on Reject.

MobileCardsImage

The user is asked for a reason because we added an action parameter for the reject option.

You will now see 2 toast messages: Performing Action and Performed Action Successfully.

MobileCardsImageMobileCardsImage

If you don’t see these toast messages, there may be some error in the code.

Tap on the card to open it. Notice, that the Life LifeCycleStatus has changed from New to Rejected: Invalid Data.

MobileCardsImage

Now let’s say that the necessary action has been taken, and this Sales Order can be approved.

Tap on the Action Bar button to view the actions, and then tap on Approve.

MobileCardsImage

You will now see 2 toast messages: Performing Action and Performed Action Successfully.

MobileCardsImageMobileCardsImage

If you don’t see these toast messages, there may be some error in the code.

For the same card, LifeCycleStatus has changed from Rejected: Invalid Data to Accepted.

MobileCardsImage

Do a pull refresh.

MobileCardsImage

In the card properties view, notice that the version of the Automatic Instance Card is 1.1.

MobileCardsImage

Tap New Cards to to see latest cards downloaded on the device.

MobileCardsImage

Tap on a card to open it.

MobileCardsImage

Make a note of the LifeCycleStatus and Action Card Id.

Tap on the Action Menu button to view the actions.

MobileCardsImage

Tap Reject to reject the Sales Order.

MobileCardsImage

Enter a reason for Rejection and Tap on Reject.

MobileCardsImage

The user is asked for a reason because we added an action parameter for the reject option.

You will now see 2 toast messages: Performing Action and Action Successfully Performed.

MobileCardsImageMobileCardsImage

If you don’t see these toast messages, there may be some error in the code.

Notice, that the Life LifeCycleStatus has changed from New to Rejected: Incorrect Date.

MobileCardsImage

Now let’s say that the necessary action has been taken, and this Sales Order can be approved.

Tap on the Action Menu button to view the actions.

MobileCardsImage

Tap Approve to reject the Sales Order.

MobileCardsImage

You will now see 2 toast messages: Performing Action and Action Successfully Performed.

MobileCardsImageMobileCardsImage

If you don’t see these toast messages, there may be some error in the code.

Notice, that the Life LifeCycleStatus has changed from Rejected: Incorrect Date to Aceepted.

MobileCardsImage
Log on to answer question
Step 8: Cross verify status update in the back end

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

MobileCardsImage

For the com.sap.edm.sampleservice.v2 sample service, click the OData destination test icon.

MobileCardsImage

Click Next.

MobileCardsImage

Select SalesOrderHeaders as the Metadata Entity Set.

MobileCardsImage

If you can not find particular data set, click Entity Properties to select some properties, click OK.

MobileCardsImage

Verify the LifeCycleStatus for the Sales Orders on which you have performed an action.

MobileCardsImage

Congratulations, you have built a work-flow capable SAP Mobile Cards. You can now use this knowledge to build other workflow applications.

Log on to answer question

Next Steps

Back to top