5 - Add Approval Flow to Process

You will want to send a list of items to the process, each with a product, price, quantity and total.

To do this, you can create a data type with all those fields, and specify that you want a list of them.

1. Go back to the SAP Build lobby, and open your project.

   At the top of your project, make sure Editable version is selected.

   

2. On the Overview page, click Create and select Data Type.

   

   

   For the name of the data type, enter Order Item Type, and then click Create.

3. In the Order Item Type window, click New Field.

   In the General Information area on the right, call the field product. Keep the type as String.

   

4. Repeat by clicking New Field for each of the following fields, and entering the name and type:

   Name	Type
   quantity	Number
   price	Number
   total	Number

   If the Type of the fields is not reflected correctly in the table, select the correct Type again from the dropdown.

   With all the fields, the screen should look like this (make sure the Type is correct):

   

   Click Save (upper right).

Now that you have a data type, you want to add to the process another input for receiving a list of items.

1. Open the Purchase Approval Process process.

   If the process tab is not already open, you can go back to the Overview tab and double-click the process.

   Processes start with this icon:

   

2. Open the side panel, and click Variables.

   

3. Click Configure next to the Process Inputs.

   A dialog with the existing inputs is displayed.

4. Click Add Input, and enter the following:

   Name	Type	Required	List
   Order Items	Order Item Type	☑️	☑️

   Click Apply.

   

5. Click Save (upper right).

The process will include a condition that if the total is less than 1000, the purchase is automatically approved. Otherwise, it requires a person to approve it.

1. Click the plus sign, +, in the middle of the canvas.

   

   In the dialog, click Controls and Events.

   

   Then click Condition.

   

   This will add a condition step to the process.

   

   There is a red warning triangle, next to the condition only because any new condition needs to be configured – NOT because you did anything wrong.

2. Click Open Condition Editor.

   

   A dialog for setting a condition opens.

3. In the first column, click in the box, and select Process Inputs > Total.

   

   After selecting the total field, the editor should look like this:

   

   For the middle field, select is less than.

   For the last field, enter 1000.

   

   Click Apply.

   The warning triangle next to the condition step should now disappear.

4. On the side panel, change the name of the condition to Check < 1000.

   

   Click Save (upper right).

We will need an approval for the purchase, and to help the approver you will calculate the total number of items (sum of all quantities) and provide this in the approval form.

To do this, you will use the Script Task, which lets you write JavaScript snippets to do more complex calculations. And you will need a custom variable to hold the results of your calculation.

1. Click in an empty space on the process canvas, then open the side panel.

   

2. Select Variables, and then next to Custom Variables click Configure.

   

   Add the following variable:

   Name	Type
   Sum of All Items	Number

   Click Apply.

   

3. Under the Default path for the Check < 1000 condition, click the + sign.

   

   Select Script Task.

   

4. With the Script Task selected, click Open Editor.

   

   Enter the following script in the right-side editor:

   JavaScript Copy

   $.context.custom.sumOfAllItems = 0;
   $.context.startEvent.orderItems.forEach(function (item) {
       $.context.custom.sumOfAllItems += item.quantity
   })

   The task should look like this:

   

5. To test the script, click Test Variable.

   Click the + sign.

   

   For name, enter $.context.startEvent.orderItems.

   For the value, enter the following:

   JavaScript Copy

   [{
       "product": "Pencils",
       "quantity": 2,
       "price": 14.5,
       "total": 29
   }, {
       "product": "Pens",
       "quantity": 10,
       "price": 2.5,
       "total": 25
   }
   ]

   Click Run Test.

   The result should show you that it added all the item quantities, and set the custom variable to 12.

   

   This value can now be used elsewhere in the process.

   If you get an error at this step, redo the Step 2: Update inputs of this tutorial.

6. Click Apply.

If the purchase request meets the conditions for needing approval (total greater than 1000), you will need an approval form, which will be sent to the Inbox of the approver.

1. In the Purchase Approval Process process tab, click the + sign under the Script Task.

   

   Select Approval.

   

   Select Blank Approval.

   

   Name the form Approval Form.

   Click Create.

   You will now have an approval form in your process.

   

   You will get a red triangle warning, because you haven’t yet specified the approval form and who will receive it. But you will do these soon.

2. Open the form editor by clicking the three dots in the Approval Form tile, and then click Open Editor.

   

3. In the form editor, click H1, and set the text to New Order - Needs Approval.

   

   TIP: To quickly add fields to forms, do the following:

   • Copy the text for the field’s name.

   • Click the corresponding square icon for that field type.

   • Paste in the name.

   • Set any settings, like Read Only.

4. Add the following fields.

   Type	Name	Extra Settings
   Text	Business Partner	Read Only
   Text	Business Partner Full Name	Read Only
   Text	BP Grouping	Read Only
   Text	Order ID	Read Only
   Table	Order Items	Read Only
   Number	Total Items	Read Only
   Text Area	Additional Information

   

   Make sure all but the last field are read-only.

5. Select the Order Items table and click the + icon.

   

   Add a text field.

   

   Name the field Product.

   

   Repeat for the following additional fields:

   Type	Name
   Number	Quantity
   Number	Price
   Number	Total

   In the end the table should look like this:

   

6. Click Save.

Now you will send a notification form if the order is approved.

1. Go back to the Purchase Approval Process process tab.

2. Click the + icon under Approve under Approval Form, and then select Form > Blank Form.

   

   For the form name, enter Approval Notification, and click Create.

3. Open the form editor by clicking the three dots in the Approval Notification tile, and then click Open Editor.

   

4. In the form editor, just add a H1 element, and set it’s text to Order Approved.

   

5. Click Save (upper right).

When you create a process, you create generic artifacts but you need to specify the values for the fields in each instance of the artifact.

For example, for an approval form, you need to specify who will be the approver for each instance of the form. Or, for a form with different fields, you must specify from where to take the data to fill those fields, again, for each instance of the form.

1. Open the Purchase Approval Process tab.

2. Click on Approval Form.

   

   Configure the fields as follows.

   You likely will need to copy the text we give you below to a plain text editor (e.g., Notepad), and then from there copy into the fields, or type in the text.

   Tab	Field	Source/Binding
   General	Subject	Approval Request for Order: and then click in the box and select Process Inputs > Order ID.
   General	Recipients > Users	Click in the box and select Process Metadata > Process Started By.
   Inputs	Order ID	Click in the box and select Process Inputs > Order ID.
   Inputs	Order Items	Click in the box and select Process Inputs > Order Items.
   Inputs	Total Items	Click in the box and select Custom Variables > Sum of All Items.

   Expand Order Items, and you will see that the system automatically mapped the correct input fields to each of the table fields in form.

   

   If the fields are not automatically mapped, check the data type of Price, Quantity and Total fields (should be Number) created within the Order Items data type earlier in this tutorial.

   You’ll also notice that the warning for the approval form disappeared.

3. Click the Approval Notification form, and configure as follows:

   Tab	Field	Source/Binding
   General	Subject	Your order was approved: and then click in the box and select Process Inputs > Order ID.
   General	Recipients > Users	Click in the box and select Process Metadata > Process Started By.

4. You can send the same approval form for when the request should be automatically approved.

   Under the If of the Condition step – meaning, the request is for a small amount of money – click the plus sign, +.

   

   Select Form, and instead of creating a new form, select Available Forms > Approval Notification.

   

   It is added as Approval Notification 1.

5. Just as you added the binding for the first notification form, you need to do the same for this one.

   With Approval Notification 1 form selected and the side panel open, configure the step as follows:

   Tab	Field	Source/Binding
   General	Subject	Your order was AUTOMATICALLY approved: and then click in the box and select Process Inputs > Order ID.
   General	Recipients > Users	Click in the box and select Process Metadata > Process Started By.

   Notice you made different subjects for each of the 2 instances of the notification form.

6. Click Save.

When you are complete with the changes to your project, you must release and deploy another version.

1. Click Release.

   Since this is your second release, you see an option to describe the nature of the new release (e.g., major or minor), and to provide a comment on what has changed.

   

   Accept all the settings and click Release.

2. Click Show project version.

   

   This will open the latest released version of the project.

3. Click Deploy.

   Select the Public environment and click Upgrade.

   

4. In the Effect on Triggers dialog, click Deploy.

   

   The project will now show as deployed version 1.0.1.

   

Note that all forms will be sent to Process started by – which is you. You will act as both the approver and the requester.

1. Go back to the Control Tower.

2. As you did before, navigate to Environments > Public > Processes and Workflows .

   

3. With your process selected, click Start New Instance.

   

   This opens the dialog that lets you trigger a process – for testing – without using a form, API call, or external event.

4. In the dialog, delete the JSON and replace it with the following:

   JavaScript Copy

   {
   "businessPartner": "11",
   "newStatus": "APPROVED",
   "orderId": "100000",
   "total": 500,
   "orderItems": [
       {
           "product": "Pencils",
           "quantity": 2,
           "price": 14.5,
           "total": 29
       },
       {
           "product": "Pens",
           "quantity": 10,
           "price": 2.5,
           "total": 25
       }
       ]
   }

   Click Start New Instance and Close.

   

   If all goes well you will get a message Instance started.

Potential problems

• If you do not provide all the values that are required in the process (i.e., in one of the bindings or steps), then you will get an error.

• If you provide a number value as a string, or a date value in the wrong format, you will get an error.

Once triggered, you can monitor the process instance from the Monitor section of the Monitoring tab.

1. You can use the shortcut button Show Instances to show your instances.

   

   Since this process instance added notifications and an approval step, it won’t automatically be completed and you will see it with the default filter.

   

2. Click on your process instance.

   In the details section, you will see:

   • Status is Running.

   • Under Logs, you can see a condition was completed, and you can see that because the total was under 1000, it was automatically approved.

     

     The entire process is not yet completed because the notification form must still be acknowledged.

   • Under Context, you can see all the data you provided in the JSON when you started the instance.

     

3. Open the Inbox by clicking the My Inbox icon in the header.

   

4. In your inbox, you will see a list of forms on the left.

   Since you only have 1, it is already open, and you can see that the automatic approval notification was sent (no approval is needed).

   

   In addition, there is a Submit button at the bottom of the item so you can mark this notification as complete.

   Click Submit.

   Once you complete a form, it is removed from your inbox.

5. Now go back to the previous browser tab and go to the Monitoring tab of the SAP Build lobby.

   You can use the Refresh icon to get the latest information.

   

   In the logs, you can see that the notification was completed, and therefore the process instance is completed.

   You can also see the status at the top as Completed.

6. You can test the process again – go back to Monitoring > Manage, click your process and click Start New Instance – this time with the following JSON, which has an amount above 1000, meaning it will require an approval:

   JavaScript Copy

   {
       "businessPartner": "11",
       "newStatus": "APPROVED",
       "orderId": "100000",
       "total": 1500,
       "orderItems": [
           {
           "product": "Pencils",
           "quantity": 2,
           "price": 14.5,
           "total": 29
           },
           {
           "product": "Pens",
           "quantity": 10,
           "price": 2.5,
           "total": 25
           }
       ]
   }

   Now if you go to check your latest instance, you will see that the script task was executed and the approval step is activated.

   

   If you look at the context, you will see our script task ran and set the custom variable to the sum of all the quantities.

   

   And if you open the Inbox and refresh, you will now have an approval form with Submit/Reject buttons at the bottom. You can also see the sum of the quantities in the Total Items field, the result of the script task.

   

   If you approve, you can refresh the inbox and you will get the notification form – this time without it saying automatically approved.

   

• Transform Data with JavaScript in SAP Build Process Automation (Devtoberfest video)

• Using Conditions to Control the Process Flow (Learning Journey)

Things to Ponder

We created a condition step to branch the process between 2 paths. Could we have created more than 2 paths, with a condition for each? What if no condition is met?

When binding fields to inputs of steps, which fields can you use – that is, where are those fields first defined?

If I use the same form in different places in the process, is there any way to make them appear different when they are sent to users?

When monitoring a process instance, the Logs show the execution of all the steps. But some are shown as “Tasks”. What is the significance of that word?

When opening a form in your Inbox, open the Show Log button (on the lower right). What does it show? What do you think the “Claim” button does?