Step 1: Open SAP Web IDE Full-Stack
- In your Web browser, open the cockpit of SAP Cloud Platform.
- Choose Neo Trial.
- Select Services from the left-hand navigation.
- Search for the Workflow service. Then select it, and choose SAP Web IDE for Full-Stack Development.
Step 2: Creating a new SAPUI5 application
Step 4: Add a data binding
- To bind the UI controls to data from the workflow context, use the Value field in the properties of the input control:
- Select the input control with the label Title, and enter ‘{/product}’.
- Select the input control with the label Price, and enter ‘{/price}’.

- To prevent the approver from changing the title or price, set the Editable property to false for both input elements.
- Choose Save.
Step 5: Initialize the data model
To make the workflow context available to the UI controls, you need to retrieve the task context data. To do this, call the Workflow REST API with the task ID of the currently shown task instance in My Inbox. My Inbox passes this data to our component using the startup parameters.
- Open the
Component.js
file under Workspace
| BookUIApplication
| webapp
.
- Find the init function, and add the following code snippet to the file:
// get task data
var startupParameters = this.getComponentData().startupParameters;
var taskModel = startupParameters.taskModel;
var taskData = taskModel.getData();
var taskId = taskData.InstanceID;
// initialize model
var contextModel = new sap.ui.model.json.JSONModel("/bpmworkflowruntime/rest/v1/task-instances/" + taskId + "/context");
contextModel.setDefaultBindingMode(sap.ui.model.BindingMode.OneWay);
this.setModel(contextModel);
- Choose Save.
-
To deploy the project, select the project in the workspace and choose Deploy | Deploy to SAP Cloud Platform. On the following screen, choose Deploy.

Note: If you open the application in the browser, you see a blank page because the UI only works when running inside the My Inbox application.
Step 6: Link the UI5 component to the user task
Step 7: Add Approve and Reject buttons
To add Approve and Reject buttons to actually complete the task, go back and edit the Component.js
file again.
- Open the
Component.js
file under Workspace
| BookUIApplication
| webapp
.
- Add the following functions to your component:
_fetchToken
: Retrieves an XSRF token from the workflow service API. The token is used to authenticate when calling the POST method to complete the task.
_completeTask
: Calls the workflow service API to complete the current task, and pass on the approval status (“true” or “false”) using the JSON payload to the workflow context.
- ’
_refreshTask
: Tells My Inbox to remove the task on completion from the list.
Right after the closing bracket of the init function, add the following code snippet to the file:
,
_completeTask: function(taskId, approvalStatus) {
var token = this._fetchToken();
$.ajax({
url: "/bpmworkflowruntime/rest/v1/task-instances/" + taskId,
method: "PATCH",
contentType: "application/json",
async: false,
data: "{\"status\": \"COMPLETED\", \"context\": {\"approved\":\"" + approvalStatus + "\"}}",
headers: {
"X-CSRF-Token": token
}
});
this._refreshTask(taskId);
}
, _fetchToken: function() {
var token;
$.ajax({
url: "/bpmworkflowruntime/rest/v1/xsrf-token",
method: "GET",
async: false,
headers: {
"X-CSRF-Token": "Fetch"
},
success: function(result, xhr, data) {
token = data.getResponseHeader("X-CSRF-Token");
}
});
return token;
},
_refreshTask: function(taskId) {
this.getComponentData().startupParameters.inboxAPI.updateTask("NA", taskId);
}
- Add the Approve and Reject buttons to the My Inbox action footer by adding the following code to the body of the init function within the
Component.js
file:
//add actions
startupParameters.inboxAPI.addAction({
action: "Approve",
label: "Approve"
}, function(button) {
this._completeTask(taskId, true);
}, this);
startupParameters.inboxAPI.addAction({
action: "Reject",
label: "Reject"
}, function(button) {
this._completeTask(taskId, false);
}, this);
When the user presses the buttons, the _completeTask
function will be called.
- Choose Save.
Step 8: Completing the workflow
- Deploy the
BookUIApplication
project again. Select the project and choose Deploy | Deploy to SAP Cloud Platform. On the following screen, choose Deploy.
-
Refresh My Inbox to check the updated UI for the task.
Note: To see the new buttons, you may have to clean the browser cache or force a “hard reload”.
- To complete the workflow, choose either Approve or Reject in the My Inbox app.
The task should disappear from My Inbox, and the workflow instance should disappear from the Monitor Workflows instances list.
You defined and deployed a workflow using the SAP Web IDE. You started and monitored workflow instances with the Monitor Workflow app, and you saw user tasks in the My Inbox.
You have successfully completed the implementation of the first version of your Book Order workflow.
Check out the Workflow Developer Guide or explore the REST API.
Share your feedback on SAP Cloud Platform Workflow!
If you want to learn more about the integration of workflow into your user interfaces, check out this blog.