Skip to Content
Technical Articles

Use SAP Cloud Platform Mobile Cards with SAP Cloud Platform Workflow

One of the things I like about SAP Cloud Platform Mobile Cards is its simplicity and its ability to quickly and easily enable many different scenario’s to be used on your mobile device.  Also, it’s ability to do this against multiple back-end services all while keeping it in a single application on your device.

SAP Cloud Platform Workflow has the same approach to simplicity and multiple back-ends where it presents your workflows in a single inbox.

SAP Cloud Platform Workflow lets you build, run, and manage workflows, from simple approvals to end-to-end processes that span across organizations and apps. With an inbox app and custom-built UIs, you involve end users into business processes for decision making and data entry. The service comes with web-based tools for workflow modeling, APIs for consumption in custom apps, monitoring tools, and Fiori-based apps for end-user access. You can use JavaScript to embed custom business logic.

It’s only natural that given some of the similarities of these solutions they should work together, so that’s what I’m going to show.  I’ll show how you can quickly take a workflow and have that workflow show in mobile cards.

Before we go into setting up so you can get workflows in mobile cards, let me give you a bit of an overview.

Mobile Cards has always had the ability to automatically create cards based on Fiori Overview Cards.  When you create a destination in Mobile Services that points to your Fiori Launchpad, you can use the plugin in Launchpad to send an overview card to Mobile Cards and a card will be auto-generated for your mobile device.  It may look similar to this.

Similarly, Mobile Cards provides a template where you can deliver the items that are part of Inbox.  This is often used for things like Purchase Order Approval.

With SAP Cloud Platform Workflow, Mobile Cards is doing something similar as the above.  When you create a Workflow that uses Forms for the UI, Mobile Cards will read from the same oData services that your Fiori Launchpad uses where you have enabled Inbox for Workflows.  Mobile Cards will create the card and deliver it to the device that is registered and subscribed to the Workflow card.  It will be aware of the decision steps you may create and you will have the ability to send the decisions back as an Action like Approve and Reject.

Getting this going is pretty simple.  I’m not going to go through how to create a Workflow, but for the example in this blog I’ll be going off of the following tutorial.  Once you have this working all you need to do is map your destination and create the workflow card.

In Mobile Services create a Mobile Destination that is mapped to your Fiori Launchpad and name it Workflow.  This is the same Launchpad you would have used in the following tutorial when creating the workflow.  When you create the destination the URL will need to be similar to the below, making sure you add the /sap/fiori/bpmmyinbox to the URL.

https://flpportal-xxxxxx0trial.dispatcher.hanatrial.ondemand.com/sap/fiori/bpmmyinbox

One the destination is created make sure to add it to the Connectivity Feature for Mobile Cards.

Now, create the card in WebIDE.  The workflow card doesn’t have any UI that other cards have, but you need to generate the metadata.json file.  In your WebIDE, make sure you have the Mobile Services App and Development Tools enabled.

Start a new project from template

Change the Category to Mobile Services and highlight Mobile Cards Kit Micro App and select Next

Name it Workflow or similar

Make sure to select “Create Blank Card” and select Next

Now that you have the Workflow Mobile Cards project created, the only thing we actually need is the metadata.json file.  Go ahead and delete the template_en.html and userdata.json

We are going to replace the data that is in metadata.json.  Right click on metadata.json and Open Code Editor

Replace the code with the following code.  If you didn’t name your destination Workflow, change the connection name.  Otherwise you should be able to leave all else as is.

{
    "APNSEnabled": true,
    "ActionConfiguration": {
        "Actions": [{
            "ActionBody": "{\"status\": \"COMPLETED\", \"decision\": \"${decision}\", \"context\": ${context}}",
            "ActionHeaders": [{
                "HeaderName": "X-Requested-With",
                "HeaderValue": "XMLHttpRequest"
            }],
            "ActionName": "ACTION",
            "ActionParameters": [{
                "isKey": false,
                "maxLength": 255,
                "name": "context",
                "nullable": false,
                "type": "Edm.String"
            }, {
                "isKey": false,
                "maxLength": 255,
                "name": "decision",
                "nullable": false,
                "type": "Edm.String"
            }],
            "ActionUrl": "/html5apps/bpmformplayer/bpmworkflowruntime/rest/v1/task-instances/${ID2}",
            "HttpMethod": "PATCH",
            "Labels": [{
                "language": "EN",
                "text": "ACTION"
            }]
        }],
        "BehaviorAfterAction": "ACTIVE",
        "Category": "ACTION",
        "XCSRFTokenUrl": "/html5apps/bpmformplayer/bpmworkflowruntime/rest/v1/xsrf-token"
    },
    "AppLaunchUrl": null,
    "AutoSubscribe": false,
    "CardClass": "HtmlTemplate",
    "CardRenderer": "WorkflowForm",
    "CollectionType": "useCollection",
    "Connection": "Workflow",
    "CustomType": "Query",
    "Descriptions": [{
        "language": "EN",
        "text": "My Workflow"
    }],
    "DevelopmentStatus": "Productive",
    "FormRenderer": "WorkflowForm",
    "GatekeeperConfiguration": null,
    "GroupName": "",
    "HiddenSubscription": false,
    "LastModifiedAt": "",
    "LastModifiedBy": "",
    "Locked": false,
    "Name": "Workflow",
    "NewsEnabled": false,
    "NotificationMessages": null,
    "NotificationRules": [],
    "Parameters": {
        "Parameters": []
    },
    "QueryConfiguration": {
        "CacheQueryResult": false,
        "QueryEntityKeyPaths": [
            "$.d.__metadata.uri"
        ],
        "QueryURLCollectionRoot": "$.d.results"
    },
    "QueryReturnsEntityCollection": true,
    "QueryURL": "/bpmworkflowruntime/odata/v1/tcm/TaskCollection?$skip=0&$top=1000&$orderby=CreatedOn%20desc&$filter=(Status%20eq%20%27READY%27%20or%20Status%20eq%20%27RESERVED%27%20or%20Status%20eq%20%27IN_PROGRESS%27%20or%20Status%20eq%20%27EXECUTED%27)&$select=SAP__Origin%2cInstanceID%2cTaskDefinitionID%2cTaskDefinitionName%2cTaskTitle%2cCreatedByName%2cCreatedBy%2cCompletionDeadLine%2cSubstitutedUserName%2cStatus%2cPriority%2cPriorityNumber%2cHasComments%2cHasAttachments%2cHasPotentialOwners%2cCreatedOn%2cTaskSupports%2cSupportsClaim%2cSupportsRelease%2cSupportsForward%2cSupportsComments%2cSupportsAttachments%2cGUI_Link%2cCustomAttributeData&$inlinecount=allpages",
    "ResourceIdentifiers": [{
        "ImagePaths": "",
        "Order": 0,
        "Uri": ""
    }, {
        "ImagePaths": null,
        "Order": 1,
        "Shared": false,
        "Uri": "/html5apps/bpmformplayer/bpmworkflowruntime/rest/v1/task-instances/${ID2}/context"
    }, {
        "ImagePaths": null,
        "Order": 2,
        "Shared": false,
        "Uri": "/html5apps/bpmformplayer/bpmworkflowruntime/rest/internal/v1/task-instances/${ID2}/form/model"
    }],
    "RouteName": "TargetView1",
    "SortCardsWith": null,
    "SubscribableTo": {
        "Users": []
    },
    "TemplateName": "User defined template",
    "UrlMatch": null,
    "changedNotification": "",
    "newNotification": ""
}

Make sure to save the file and then right click on your project and select Deploy->Deploy Card to Mobile Services.  Follow the prompts to deploy to your cloud platform.

You can go to your Mobile Services Admin and should see the new card deployed called Workflow.  Make sure to select the check under Actions and set it as Productive.

On your device, subscribe to the Workflow card.  Any Workflows that are in your Inbox should now be in your Mobile Cards app.  You will be able to use the action button in the bottom left corner to Approve or Reject based on the decisions you defined in the workflow form.

Let’s do one more thing to show the use case a little bit more.  Let’s modify the workflow to check the inventory of the book.  If the inventory is greater than 20 we will leave it.  If it’s less we can change the decision to reorder instead of Approve and Reject.  This only requires a change in the workflow and not in Mobile Cards.

Add a Script Task that checks the inventory.  If the inventory is greater than 20 return true.

First put the Script Task after the Start Event and then change the name to Check Inventory.  Select Create File and name the file however you like.

Add the following to the JS file

$.context.inventorycheck = $.context.inventory > 20;

Add a new User Task to the flow the same way you created the first user task in the tutorial.  Instead of listing the product and price, show the the product and inventory for the fields.  The context path for the Inventory field will be ${context.inventory}

You can create a positive and negative decision if you’d like, in my case I just created a Neutral decision.

Add an Exclusive Gateway to the flow after the Check Inventory Script Task.  Select the top SequenceFlow and change the name.  Also mark this flow as the Default.

Select the bottom SequenceFlow and name it Reorder Inventory.  Set the condition to

${context.inventorycheck == false}

This makes it so that if the inventory is less than 20 follow this flow.

Make sure to connect your User Task for Inventory Low to the End Event to complete the Workflow

Your final Workflow should look similar.

Make sure to save everything and deploy both the new form and the workflow.  When you start a new instance in the Workflow Monitor start one with inventory more than 20 and one with inventory less than 20.

You should see two items in the Inbox.  The low inventory will have a field for Inventory instead of price and the decision will be set to Reorder.

Now refresh Mobile Cards and you should see two new cards.  You’ll see one as you did before with the price and the option to Approve and Reject.  The other one will be the Workflow with low inventory and you’ll be able to Reorder

Workflows can be more advanced of course, but as you can see the simplicity of both Workflows and Mobile Cards work well together.

21 Comments
You must be Logged on to comment or reply to a post.
  • Really good blog Mark Wright and seriously powerful with intersection of SAP Cloud Platform workflow and mobile cards. Seriously easy to get an approval app up and running in a short timeframe. Thanks for sharing!

  • Hello, I followed the tutorial and successfully created the card, but on Android it does not scroll. I tried with a couple of phones and the behaviour is the same.

    Do you have any idea about how to enable it?

    • Is there text that goes beyond the bottom of the screen?  If all the text fits on the screen the card won’t scroll.  Can you attach a screen shot?

      • Thank you for the reply, I changed your example to fit our business needs and yes, there are many fields that go below the screen.

        But the problem doesn’t seem to be in your example, I’ve noticed that in many SAP tutorials there is this problem on Android 9 devices, but in some others no.
        The difference I’ve noticed is that the non working samples have a css that sets “height: 100vh;”, while the working ones don’t have it.

        I managed to fix some examples by removing that line.
        But in your sample there is no CSS and the “Edit” tab is not accessible.
        There is only the “metadata.json”.
        How can I make it use a css or access the default one?

         

        Thanks Massimo

         

        /
        • And i need to add that i even added some editable and mandatory fields, one with the type date,and on Android they are  andnot editable the  widget does not appear.

          • Sorry for being misteryous I was driving 🙂

            What I was trying ti say was that fields marked as editable are rendered as readonly, and that date field doesn’t have the widget button and Is readonly top.

          • Yes that is correct, all the fields are going to be read only until you perform an action which are created with the decision fields.  When you start an action the fields become editable so that you can make changes and then submit the workflow.  In this demo when you perform an Approve nothing really happens with the data other than removing the item from the Inbox.  If though for example you create a workflow with a script task that gets run when you perform an action, you may send a POST request or something, it will pick up the fields and send it with that action so the changes are reflected in the back end or in your Business Rule.

            I did though find that if you have a date field and try to perform an action there is an issue and we will look into fixing that.

        • I’ve been able to recreate this with Workflow . The workflow card itself is not using the same HTML/CSS approach as the other Mobile Cards as you noted.  We will look into this and hopefully give an update soon

  • Hello Mark,

    Let me thank you for this blog.

    I followed the tutorial and i have 2 questions.

    First, you state that it’s will allow us to have the action button that we have design in the user task form. Does it mean that if we used a HTML5 app as user task, we won’t have it working ?

    Next, I’m stuck at the moment of retrieving tasks in SAP Mobile Cards, I have an issue with the response which doesn’t look correct :

    Getting the data from the backend was partially successful and the displayed data might be incomplete. Please check the processing information for any issues by clicking the button in the Data section to the right.

    What can possibly generate this error ?

    I look forward for your answers.

    Thanks,

    Jérémy.

    • Thanks Jeremy.

      1. We currently only support using FORMS and not HTML5 for this as the Mobile Cards client does not include the SAP UI5 libraries in the client to support custom developed UI in the workflow.  Of course Mobile Cards does allow for custom cards to be created and you could design a card using the WORKFLOW oData service
      2. In my destination I used AppToAppSSO.  Your destination should point to your Fiori Launchpad
        https://flpportal-xxxxxx0trial.dispatcher.hanatrial.ondemand.com/sap/fiori/bpmmyinbox
      • Hello Mark,

        Thanks for the quick answer.
        I didn’t expect to have it so soon, so I found my mistake concerning the destination and change it.

        Then, I have edited my comment before your answer with another issue that i got with the correct destination.

         

        Getting the data from the backend was partially successful and the displayed data might be incomplete. Please check the processing information for any issues by clicking the button in the Data section to the right.

         

  • Hello Mark!

    Awesome blog, very well explained.

    I’ve an issue when I try to subscribe to the card, it says “No card available”. What can I do?

    Regards,

     

    Karla.

  • I created a new Inbox Card, and works fine. The only issue is the frencuency of the push notifications in my phone (IOS). I tryed with “Keep up-to-date” and “custom intervals” (few min), but takes to much time to recieved an new notifications without open the app. It is possible to improve that functionality?. Thanks