Create SAP Build App to Trigger Workflow

Before you begin, we want to help you understand how apps are developed with SAP Build Apps.

Every app is built on a UI canvas – the canvas is the background of the app. On the canvas, you drag and drop components: text fields, input boxes, toggle bars, images and many other components you want the user to interact with.

Every component has properties, for example: the text to display, the value of the input box and so forth. You select the component and then its properties appear in the Properties pane to the right.

Each property is bound to something, for example:

• Static text – in the screenshot, the button component’s Label property is bound to the static text Button

• Variable – whose value can be updated elsewhere, for example in response to user action

• Data from an SAP backend

• Formula

• Output of flow function in logic

For the property, you click the binding button …

… and then select from a menu of binding types.

Finally, for every component there are events, for example, when a user taps a button or enters data in an input box. You can capture these events and then perform an action – like display a dialog, create data in a backend, change the value of variables and much more.

This is done on the logic canvas. Select a component (or no component if you want to capture app events), and then open the logic canvas.

You then drag and drop flow functions and connect them to events. The flow functions are executed whenever that event occurs. And, of course, each flow function has its own properties to bind 😺.

First, you need to create a SAP Build Apps project and the main page with the form for specifying the sales order. IN this step, you will only create the UI, not the logic or bindings.

Note that there are 2 tabs for this tutorial step (above).

• With Quick Import of UI, you can skip most of the work and simply import our skeleton project. You will bypass the nitty gritty of adding and stylizing components, but you will still learn how to import an SAP Build Apps project. This way is much faster.

• With Create from Scratch, you can create the UI yourself. This will take longer but you will learn about UI components, stylizing them, and organizing them on the page.

Quick Import of UI Create from Scratch

We really want you to see some of things related to stylizing you can do with SAP Build Apps. But we understand that stylizing a UI may be tedious for some people.

If you really want, you can skip doing the stylizing and instead import the project already stylized. If you want to take this route, do the following:

1. Download the file Create-Sales-Order.mtar.

2. In the SAP Build Lobby, click the import icon.

   

3. Click Browse and select the MTAR file you just downloaded.

   

4. Select the uploaded file, and click Import.

   

5. When the file disappears, click Close.

   The project is now created.

   

6. Go back to the SAP Build Lobby, and click on the new project to open it.

   

You will now see the opened project, with the sales order form already created.

You need to enable SAP BTP authentication because you want to use SAP BTP destinations, and users need to be authenticated to use them.

SAP BTP destinations are connections to backend services – each specifies the location of a backend and how the user will be authenticated. The destinations can be used by the various services within SAP BTP, including SAP Build Apps.

SAP BTP authentication also has the benefit of requiring authentication in your app and reusing the built-in SAP BTP authentication mechanism.

1. Go to the Settings > Authentication tab.

   

2. Click Enable Authentication.

   

3. Select SAP BTP Authentication.

   

   On the confirmation popup, click OK.

4. Click Save on the upper-right corner.

When you created your process and then deployed, you also published it so it can be discoverable by SAP Build Apps. You will now tell your project to use this process.

1. Open the Integrations tab, at the top of the page.

2. Click Add Integration.

   

3. Click Library.

   

4. You can see each process you (or a colleague) published, plus that process’s project name.

   Click the process you published, Order Processing.

   

   If you are unable to see the process here, please ensure that Step 6 of Run the Sales Order Business Process is complete.

5. Click Enable process.

   

6. Click Save (upper right).

You need a place to put the values the user will enter, so that you can later pass them to the process. For this, you can create a page variable.

1. At the top of the page, click Variables.

   

2. On the left, click Page Variables.

   Click Add Page Variable.

   

3. Select From existing schema.

   

   Select Process.

   

   Navigate to Order Processing > Trigger Process > Input Schema.

   Click Create.

   

4. Change the name of the variable to SalesOrderDetails.

   

5. Click Save (upper right).

We created a variable for the sales order data, but now we need to get the data entered by the user into the variable. We do this by binding the variable to UI elements, specifically, to the input boxes.

Whenever someone types into the input box, the value is automatically copied into the variable.

1. Click the User Interface tab.

2. Click on the first input field (for Customer).

   In the Properties tab, click the X next to the Value field, and select Data and Variables > Page Variables > SalesOrderDetails > context > SalesOrderDetails > shipToParty.

   Click Save

   

3. Click on the second input field (for Material).

   In the Properties tab, click the X next to the Value field, and select Data and Variables > Page Variables > SalesOrderDetails > context > SalesOrderDetails > material.

   Click Save

   

4. Click on the third input field (for Amount).

   In the Properties tab, click the X next to the Value field, and select Data and Variables > Page Variables > SalesOrderDetails > context > SalesOrderDetails > orderAmount.

   Click Save

5. Click on the fourth input field (for Delivery Date).

   In the Properties tab, click the X next to the Value field, and select Data and Variables > Page Variables > SalesOrderDetails > context > SalesOrderDetails > expectedDeliveryDate.

   Click Save

6. Click Save (upper right).

We need to set up the logic so when someone clicks the Get Approval button (an event), we send the sales order data to our SAP Build Process Automation workflow using the data resource we previously created.

1. Click on the Get Approval button, and open the logic canvas by clicking Add logic to Button 1 at the bottom right.

   

2. Drag a Trigger Process flow function onto the canvas, and connect the component tap event to it.

   

3. Click on the Trigger Process flow function and configure it in the Properties pane on the right.

   For Process, this should already be set to Order Processing, since you have only one process enabled.

   

   For Input Parameters, click the binding type icon.

   

   Select Data and Variables > Page variable, and then select SalesOrderDetails > context

   

   Click Save.

4. Drag a Toast flow function onto the canvas, and connect the top output of the Trigger process flow function to it.

   

5. Click on the Toast flow function and configure it in the Properties pane on the right.

   For Toast message, click on the ABC, and then select Formula > Formula.

   

   Erase the quotation marks, and enter the following formula:

   JavaScript Copy

   "Triggered process with ID: " + outputs["Trigger process"].newProcessInstance.id

   Click Save.

6. Click Save (upper right).

1. Click Preview at the top of the page.

   

2. Click Open web preview.

   

3. In the Create Sales Order tile, click Open.

   

4. Enter the following values in your form:

   Field	Value
   Customer	Joe's Bikes
   Material	HT-1000
   Amount	100000
   Delivery Date	2023-03-31

5. Click Get Approval.

Your process should be triggered and require approval (since the amount is 100,000 or above).

You should see the toast message indicating the workflow was triggered, and with the process instance ID.

You can also see the results of the call in SAP Build Process Automation.

Go to the Monitoring tab from the lobby, then under Monitor section, access the Process and Workflow Instances tile. The first one should be the one you just triggered.

• You can see the new process instance.

• You can see the process ID is the same as in the toast message in the app.

• You can see the context, which is the values sent when triggering the process (4 of them, in yellow, you entered in the input fields and the others were hardcoded in the formula for the Trigger Process flow function).

• You can also see the execution log, which shows that the process was automatically approved and stopped when it sent a notification, which needs to be acknowledged.If you expand the approval step you can see more information, including who the approval request was sent to.