How-to: Combine SAP Build Process Automation with SAP Build Apps – Version 1

Hello SAP Build Community 🙂

please keep in mind that there is an updated version of this blog available. In this one we are using API Management to perform the integration – we recommend to use BTP Destination to establish integration in a more secure and easier fashion!

Motivation

SAP Build Process Automation is one of the latest members of SAP’s LCNC portfolio and is the central building-platform for process-development, -enhancements and -automation.  SAP Build Process Automation combines the capabilities of SAP Workflow Management and SAP Intelligent Robotic Process Automation in an easy-to-use, no-code AI-powered experience. The new solution enables organizations of all sizes to:

• Simplify automation with visual drag-and-drop tools and industry specific content
• Automate faster with business context in a unified AI-powered workflow management and robotic process automation solution
• Manage processes and automations with confidence on a trusted, enterprise grade, multi-cloud platform

In this blog I am going you show you, how you can combine both worlds of process automation and application composition. We are going to build a simple Build Apps application for creating business partners. A workflow instance build on SAP Process Automation is going to take care of process activities such as getting approval steps and posting in backend-systems. This app can be used by business personas to generate simple approval request for any type of business area or industry.

Please note, that the complexity of the scenario is reduced in this blog, to demonstrate the integration between both components.

Prerequisites:

• Access to SAP Build Apps or AppGyver (Trial can be accessed here)
• Access to SAP Process Automation (either Free-Tier or enterprise edition)
• Access to SAP API Management (either Trial, Free-Tier or enterprise edition)
• Access to SPA-Workflow including service instance with a service key in your sub-account where you are using SAP Build Process Automation
• Postman for testing purposes and basic understanding of API services

Please keep in mind, that we use API Management to establish the integration, in the future we will provide a native integration between both Build Apps and Build Process Automation.

Getting started:

In order to rebuild this tutorial, you need a SPA service instance and a corresponding service key. You can find the service instance in the Instances and Subscriptions section of your BTP subaccount.

You can either manually generate a service instance or use the booster to activate SAP Build Process Automation. If you have already the service instance or just created it, check if you have also created a service key.

All information to call the API trigger are available in the service key. Therefore open the service key and use the following information:

• endpoints api url
• clientid
• clientsecret
• uaa url

After you created a service instance and a service key you can start by generating you first workflow inside SPA. I kept it very simple and used a simple approval-form that appears in my inbox to approve the creation of business partner. If you want you can extend your workflow with additional activities, business-rules and even RPA-Bots. Here you can see a screenshot of my process:

We are not going to use the Form-Trigger but instead the API to initiate the workflow. Click on the blank canvas and add the necessary input parameters that we need for our business logic. Here you can see an example of my process inputs for business partner. We are going to use this information later in the tutorial to specify the payload from AppGyver:

I added all input values in my approval form afterwards. You have to make sure to map the output-data from the API to the input data of the approval form. If you don’t do it Process Automation will give you an error:

If everything is setup correctly you can start deploying the workflow. Click on the Release button top-right and define a project version. Click on the Deploy button afterwards and the process can be used productively. If done correctly you can see the deployed workflow in your Monitoring Application. Go to the process lobby and navigate to the Monitoring tab, navigate to Manage and select Processes and Workflows. Search for your workflow and copy your process ID, because we need it later on to trigger the API.

For this demo you require the post-request for starting a workflow instance in combination with a bearer-token request. As usual, the workflow API’s are protected by OAuth, hence you need to pass an Authorization Bearer as header. I always recommend testing the API’s in Postman before trying to implement them. Here you can see an example of my API services including the necessary authorization, query params, request headers and payload:

API for retrieving the Bearer Token for Authentication

GET-request:

https://<your_subaccount_domain>.authentication.us10.hana.ondemand.com/oauth/token?grant_type=client_credentials

Authorization: Basic Auth

Username<your_clientID_as_the_username>

Password<your_clientSecret_as_the_password>

Query Params: grant_type client_credentials

API for starting the Workflow-Instance

Post-request:

https://spa-api-gateway-bpi-eu-prod.cfapps.eu10.hana.ondemand.com/workflow/rest/v1/workflow-instances

Request Headers:

• Authorization: Bearer <your bearer token>
• Content-Type: application/json’

Request Body:

{  "definitionId": " eu10.scpsubaccount.bpworkflow.businessPartnerWorkflow",  "context": {

"country": "DE",

"bpcat": "2",

"city": "Walldorf",

"pcode": "69190",

"street": "Dietmar-Hopp-Allee 16",

"organization": "SAP"

}

}

Building the app:

Now it’s about time to build the app. For this purpose, we are going to use AppGyver. SAP AppGyver is a visual programming environment on the BTP where citizen developers and professional developers alike can build enterprise-ready custom software without writing code. Here you can learn more about the service itself. Once you have setup your account (either enterprise-edition or trial) you can start working on your own application projects. For this you need to click on the Create New Button, give your project a name and you are good to go. Your application workspace opens, and you get access to Composer Pro.

Working with AppGyver Composer Pro, most of your time will be spent in the app builder.

It allows you to:

• define your app’s structure and navigation logic
• build pixel-perfect user interfaces
• create complex logic with visual programming
• integrate with external data resources
• bind data to your components to create dynamic views, and more.

The first thing you need to do is to setup the data structure and backend integration. For this you have to click on Data on the upper pane and create two data sources with the REST API direct integration type. One for getting the Bearer token and one for starting the workflow instance:

The Bearer token is very straight forward. Define the API service-URL as the base-URL and go to the Get Record (Get) section. Do not define a relative path but use your username and password for authorization as depicted in the screenshot below. Use a Base64 encoder to get the correct value.

You need to run a test and then you can use the test API call response as a schema by clicking on set schema from response. In the tab Schema you will see the value access_token that can be used as a variable to determine the Bearer token:

Now you have to configure the BusinessPartnerApproval API for starting workflow instances. Take the post-request URL as the base-URL: https://spa-api-gateway-bpi-eu-prod.cfapps.eu10.hana.ondemand.com

Go to the tab Create Record (Post) and use the value /workflow/rest/v1/workflow-instances as the relative path. Define Authorization as the request-header and leave the value blank and dynamic, since we are going to reuse the value access_token for it.

Here you might run into CORS-issues, but there is a very useful blog of a colleague of mine to avoid it by using API Management. With API Management I also defined an API Key to avoid unauthorized and unknown service-requests.

Here it is important that the schema is defined by you manually. This has to correspond to the workflow-UI since it functions as a payload to be forwarded to the workflow. As you can see in the screenshot, I have defined my schema properties and selected the value-type any value. Here you can define the definitionId as the static value which is coming from your workflow instance ID.

Once I click on the tab Test I can enter some sample values and see if the API integration works accordingly. If that is the case, I have setup the integration correctly and I can start working on the application.

Once I go back to my application I have to change the layout from View to Variables where I can start adding data variables to my application logic. Go to the tab Data Variables and add two variables from your already existing data schema. Add one resource for BearerToken and define it as a single data record. Add BusinessPartnerApproval as a second data resource and define it as a new data record. Save it and now you can start working on the user interface of the application:

Here is an example of how I created my user interface. It’s very simple since it only servers the purpose to create business partners. I have selected input fields as a UI-component from the marketplace and added it five times inside a container. I have also added a dropdown field for pre-selected values to increase the user experience.

As the last step you have to add a button from the UI-components and add it to the bottom of your application. I named my button Create Business Partner and added some logic to it by clicking on show logic for BUTTON 1. In the Flow Function Market, I have added the function Get record to my flow. Here you have to select the already created variable BearerToken as the resource name to retrieve the value from the API. Afterwards you have to add the function Create record to the flow. Here it can get a little bit tricky. Define BusinessPartnerApproval as the resource name and for Authorization you have to add a Formular with the value “Bearer ” + data.BearerToken1.access_token.

Now you can add the record properties where you need to do the mapping between data variables and input fields. It’s really important here that you select Object with properties as the binding type and connect every attribute to the corresponding UI-element in the same way as you can see in the screenshot.

Test your workflow:

If that’s finished and you have saved your project you can start testing it and see if it works. Click on Launch at the upper pane and select open app preview portal where you can open your app inside your browser.

The workflow activity created by AppGyver should be now available in your MyInbox app, ready for you to approve. SAP Process Automation uses the standard Fiori Launchpad Service for system access. Depending on how you created the forms UI, all the context data is now available in your inbox.

As I mentioned already this is a very basic example how both worlds of process automation and application composing can be combined. You can create much more extensive and complex scenarios with both LCNC-tools from our platform.

Stay tuned!

And thank you Sven Huberti for your support!