Build a Simple Approval UI for Your Workflow with Workflow Forms

1. In your Web browser, open the cockpit of SAP Cloud Platform.
2. Choose Neo Trial.
3. Select Services from the left-hand navigation.
4. Search for the Workflow service. Then select it, and choose SAP Web IDE Full-Stack.

1. In the SAP Web IDE Full-Stack, open the MyFirstWorkflow.workflow workflow file and select the ApproveBook task.

2. Under User Task Properties, select User Interface.

3. In the Type field, choose Form.

4. To create a new form, choose the Create File link.

   

5. In the New Form dialog, enter the following data:

   • Name: ApproveBook
   • ID: approvebook
   • Revision: 1.0
   

6. Choose Create.

   You created the new file ApproveBook.form in the workflow project in the folder MyWorkflowProject/forms/MyFirstWorkflow. The form editor opened automatically, so you can edit the form in the subsequent steps.

   

1. In the form editor (for the ApproveBook.form), select the Fields section.

2. To add two new fields, click Add Field twice.

   

3. Fill the two new rows that are added in the Fields section as follows.

   First row:

   • In column Label/Title, enter Title.
   • In column Type, select String.
   • In column Context Path, enter ${context.product}.

    
   Second row:

   • In column Label/Title, enter Price.
   • In column Type, select Float.
   • In column Context Path, enter ${context.price}.
   

1. In the form editor (for the ApproveBook.form), select the Decisions section.

2. To add two new buttons, click Add twice.

   

3. Fill the two new rows that are added in the Decisions section as follows.

   First row:

   • In column Text, enter Approve.
   • In column ID, make sure that approve is entered.
   • In column Type, select Positive.

    
   Second row:

   • In column Text, enter Reject.
   • In column ID, make sure that reject is entered.
   • In column Type, select Negative.
   

Don’t forget to Save the file.

1. Select the form file in the workspace.

2. Open the context menu by right-clicking on the ApproveBook.form file, and choose Deploy | Deploy to SAP Cloud Platform Workflow.

   

After the successful deployment a corresponding message toast is displayed.

1. Select the workflow file in the workspace.

2. Open the context menu by right-clicking on the MyFirstWorkflow.workflow file, and choose Deploy | Deploy to SAP Cloud Platform Workflow.

   

1. In the SAP Fiori launchpad, open the Monitor Workflow - Workflow Definitions tile.
   Note that the version of your workflow definition has increased.

2. Choose Start New Instance.

3. Leave the standard JSON input as is, and choose Start New Instance.

   

4. Choose Show Instances.
   The execution log shows a task waiting in the inbox.

   

1. Go back to the SAP Fiori launchpad homepage. The My Inbox tile shows one open task.

   

2. Open the inbox. The task and some header information is displayed, and the values for the Title and Price properties are shown. In addition, there are Approve and Reject actions available for this user task.