Motivation
As many of you already know SAP announced our latest unified Low-Code/No-Code offering on TechEd 2021, to enable everyone to deliver innovation faster and confidently across all lines of business and industries. For process automation, we offer SAP Workflow Management and SAP Intelligent RPA, enabling citizen developers to easily build workflows and to automate tasks. For low-code/no-code application composition, we launched SAP AppGyver and new functionalities in SAP Business Application Studio to enable the entire developer continuum to accelerate application development.
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 AppGyver application for creating business partners. A workflow instance build on SAP Workflow Management 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:
Getting started:
As a prerequisite you need a fully functional workflow instance running on SAP Business Technology Platform by using SAP Workflow Management. In the Business Application Studio you can start configuring your workflow in a low-code fashion and deploy it. The workflow itself can be rather simple (since this is only a basic scenario) but you have to make sure that you have at least one user-task to see the incoming approval step in the MyInbox application. Everything that happens before or afterwards is completely up to you. If you are interested in learning more about workflow development, you can check out this tutorial. And here you can see an example of my individual workflow for business partner creation:
In the user task you can define how the workflow activity appears in the MyInbox application. For the sake of this scenario, I have created a simple form by using the build-in Forms Editor but you can also create your own custom SAPUI5 application if you want to. Fiori Elements is always a good approach. In this case you have to make sure, that the context-path of all entities corresponds to the payload coming from AppGyver – I will show you later how to do this, just remember the correct context path. Here you can see an example of my form for approving a business partner:
If everything is setup correctly you can start running the project by building the MTA archive and deploying the MTA archive on SAP BTP. Now you should be able to start the workflow by using the open API’s that are documented in the API Business Hub. The necessary documentation of all workflow API’s can be found here.
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...
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://api.workflow-sap.cfapps.us10.hana.ondemand.com/workflow-service/rest/v1/workflow-instances
Request Headers:
Request Body:
Building the app:
Now it’s about time to build the app. For this purpose, we are going to use the latest component in SAP’s LCNC-Offering which is 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:
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://api.workflow-sap.cfapps.us10.hana.ondemand.com/workflow-service/rest
Go to the tab Create Record (Post) and use the value /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 Workflow Management 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. In the future this will be much easier due to connectivity to destinations and integration with authentication of SAP BTP - some features that are highlighted in our AppGyver roadmap. Also with our latest announcement of SAP Process Automation process development and workflow creation can be in the hands of business experts and citizen developers to increase the level of ressource democratization.
Stay tuned!
And thank you svenhuberti for your support!
As many of you already know SAP announced our latest unified Low-Code/No-Code offering on TechEd 2021, to enable everyone to deliver innovation faster and confidently across all lines of business and industries. For process automation, we offer SAP Workflow Management and SAP Intelligent RPA, enabling citizen developers to easily build workflows and to automate tasks. For low-code/no-code application composition, we launched SAP AppGyver and new functionalities in SAP Business Application Studio to enable the entire developer continuum to accelerate application development.
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 AppGyver application for creating business partners. A workflow instance build on SAP Workflow Management 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 a SAP Business Technology Platform Account (Trial can be accessed here)
- Setup of SAP Workflow Management
- Experience in SAP Workflow Management incl. a running workflow instance
- Access to SAP AppGyver (Trial can be accessed here)
- Postman for testing purposes and basic understanding of API services
Getting started:
As a prerequisite you need a fully functional workflow instance running on SAP Business Technology Platform by using SAP Workflow Management. In the Business Application Studio you can start configuring your workflow in a low-code fashion and deploy it. The workflow itself can be rather simple (since this is only a basic scenario) but you have to make sure that you have at least one user-task to see the incoming approval step in the MyInbox application. Everything that happens before or afterwards is completely up to you. If you are interested in learning more about workflow development, you can check out this tutorial. And here you can see an example of my individual workflow for business partner creation:
In the user task you can define how the workflow activity appears in the MyInbox application. For the sake of this scenario, I have created a simple form by using the build-in Forms Editor but you can also create your own custom SAPUI5 application if you want to. Fiori Elements is always a good approach. In this case you have to make sure, that the context-path of all entities corresponds to the payload coming from AppGyver – I will show you later how to do this, just remember the correct context path. Here you can see an example of my form for approving a business partner:
If everything is setup correctly you can start running the project by building the MTA archive and deploying the MTA archive on SAP BTP. Now you should be able to start the workflow by using the open API’s that are documented in the API Business Hub. The necessary documentation of all workflow API’s can be found here.
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...
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://api.workflow-sap.cfapps.us10.hana.ondemand.com/workflow-service/rest/v1/workflow-instances
Request Headers:
- Authorization: Bearer <your bearer token>
- Content-Type: application/json'
Request Body:
{ "definitionId": "myworkflow", "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 the latest component in SAP’s LCNC-Offering which is 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://api.workflow-sap.cfapps.us10.hana.ondemand.com/workflow-service/rest
Go to the tab Create Record (Post) and use the value /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 Workflow Management 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. In the future this will be much easier due to connectivity to destinations and integration with authentication of SAP BTP - some features that are highlighted in our AppGyver roadmap. Also with our latest announcement of SAP Process Automation process development and workflow creation can be in the hands of business experts and citizen developers to increase the level of ressource democratization.
Stay tuned!
And thank you svenhuberti for your support!
- SAP Managed Tags:
8 Comments
