Search for the Workflow service. Then select it, and choose SAP Web IDE for Full-Stack Development.

Step 2: Creating a new SAPUI5 application

In the SAP Web IDE Full-Stack, create a new project using a template.1. In the navigation area, choose the home icon.2. Choose New Project from Template.3. Choose SAPUI5 Application.4. Choose Next.5. Enter a name for the new workflow project, for example, BookUIApplication and a namespace, for example, BookUIApplication.6. Choose Next.7. Enter a name for the view, for example, ApproveBookView.8. Choose Finish.9. Choose Run.The HTML page is still empty. You need to add the necessary UI controls for displaying the book details, like title and price.

Step 3: Create the form layout

To use the form layout, enable the sap.ui.layout package in the project settings of SAP Web IDE:

Choose Workspace | BookUIApplication.

Right-click the BookUIApplication project, and choose Project Settings. Under SAPUI5, select the sap.ui.layout package, and then Save.

To add a form to the page, choose Layout | Simple Form and drag it onto the editor canvas.

Select the Title element, and change the title text under Properties to ‘Book Details’.

Similarly, select and change the Label 1 text to ‘Title’ and Label 2 to ‘Price’.

Remove the second input control in the first row by selecting it and then pressing the delete key.Your page layout should now look like this:

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:

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.