Skip to Content
Create a Sales Order Approval Card

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-tdsSandeep T D SMarch 31, 2021
Created by
jitendrakansal
February 27, 2019
Contributors
sandeep-tds
jitendrakansal

Prerequisites

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

    1. Open your Business Application Studio, and enter your Development space.

      Mobile Cards Image

      If your dev space is not running, click the Play Button -

      Mobile Cards Image
      to start it.

      Mobile Cards Image

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

      Mobile Cards Image

      For faster development, you can use the shortcut key.

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

      Mobile Cards Image

    4. Select Sales Order Approval Card - Multi Instance.

      Mobile Cards Image

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

      Mobile Cards Image

    6. Open metadata.json file from the project explorer.

      Mobile Cards Image

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

    7. Click on the Actions tab, to view the Approve and Reject actions.

      MobileCardsImage

      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?

  • Step 3
    1. Click the add icon (
      MobileCardsIcon
      ) 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"}
      MobileCardsImage

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

      MobileCardsImage

      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

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

      MobileCardsImage

    2. Select Action Card.

      MobileCardsImage

      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.

      MobileCardsImage

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

      MobileCardsImage

      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.

      MobileCardsImage

      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.

    1. Perform Pull Refresh in the SAP Mobile Cards Android client.

      Android Pull Refresh

      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.

      Android Pull Refresh

    2. Tap expand actions button (

      MobileCardsIcon
      ) to expand the actions menu.

      Android Pull Refresh

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

    3. Make a note of the LifeCycleStatus and the SalesOrderId, and tap Approve Order.

      Android Pull Refresh

      You will see a toast messages when the action is being performed

      MobileCardsImage

      and a message when it is completed successfully

      MobileCardsImage

    4. Tap on the card to open it, and notice the LifeCycleStatus.

      Android Pull Refresh

      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.

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

      Android Pull Refresh

    6. Tap actions menu (

      Android Action Button
      ), and tap Reject Order.

      Android Pull Refresh

    7. Enter a reason for Rejection and Tap Reject Order.

      MobileCardsImage

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

    8. 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.

      MobileCardsImage
  • Step 6

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

      MobileCardsImage

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

      MobileCardsIconn
      .

      MobileCardsImage

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

      MobileCardsImage

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

      MobileCardsImage

    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.

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

      Android Pull Refresh

    2. Tap the actions menu (

      Android Action Button
      ), and tap Reset.

      Android Pull Refresh

    3. 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

    1. Refresh the com.sap.edm.sampleservice.v2 sample service browser window.

      Android Pull Refresh

    2. Notice the LifeCycleStatus for the record that was previously Rejected: Incorrect Amount.

      Android Pull Refresh

      It should now be New.

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

Back to Top
Back to top