Skip to Content

Build a Simple Approval UI for Your Workflow with Workflow Forms (Neo)

test
0 %
Build a Simple Approval UI for Your Workflow with Workflow Forms (Neo)
Details

Build a Simple Approval UI for Your Workflow with Workflow Forms (Neo)

2019-10-31
Beginner
15 min.
SAP Cloud Platform, Tutorial, Beginner, Cloud
Use the forms editor to create a basic user interface for your user task workflow.

You will learn

  • How to define a basic form-based user task UI without having to cope with SAPUI5 coding
  • How to use it in a user task of a workflow

Prerequisites

Step 1: Open SAP Web IDE Full-Stack
  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.
Done
Log on to answer question
Step 2: Create a form for a user task

  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.

    Create File

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

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

  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.

    View New File
Where under User Task Properties do you create the new UI?
×
Step 3: Add fields to your form

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

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

    Add New Fields

  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}.
    Enter Row Data
Done
Log on to answer question
Step 4: Add approve and reject buttons

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

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

    Add New Buttons

  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.
    Enter Decision Texts

Don’t forget to Save the file.

Done
Log on to answer question
Step 5: Deploy your form

  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.

    Deploy Form

After the successful deployment a corresponding message toast is displayed.

View Toast
Done
Log on to answer question
Step 6: Deploy your workflow

  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.

    Deploy Form File
Done
Log on to answer question
Step 7: Start a new workflow instance

  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.

    Start New Instance

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

    Start a new instance.
Done
Log on to answer question
Step 8: Open the task in My Inbox

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

    Open Task in My Inbox

  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.

    Display Task in My Inbox
Done
Log on to answer question

Next Steps

Navigate tutorial steps

QR Code

QR code
Back to top