Customer References App - Build the App

Get Started with the Customer References App Prototype

1. Select lobby to access the entry page of SAP Build.

2. In the lobby, use the search field to locate the project named CRO - Customer References App - Prototype.

   

3. When you find the template app, select the Navigate arrow (1) on the right-hand side.

4. Select the Versions tab (2), locate the Editable version, and select the Options icon (3). Then choose Save As New Project (4)

   

5. On the next screen, enter the following:

   Input Field	Input Value
   Project Name	CRO - Customer References App -
   Description	Customer References App Project

6. Select Save As New.

   

Once your project is saved, it should open the editor automatically, as below.

If the project does not open automatically, simply choose your project’s name in the lobby.

You can see the main components of the UI are already in place:

View Integrated Data and Workflow Process

1. Click Integrations on the editor screen

   

2. On the Integrations screen you can see that your project has inherited some integrations from the template you copied.

   • reference_db: This is a CAP service that has been built using SAP Build Code and deployed to Cloud Foundry. It holds data for our Customers and References. For the purposes of this Basic Trial we use a CAP service for all our data, but of course it is possible to integrate data from SAP S/4HANA Public Cloud, SAP SuccessFactors, SAP Ariba, SAP Concur and more when working with SAP Build.

   • Reference Proposal Process: This is a process automation within SAP Build. This workflow has been deployed to the public environment and added to your project. When you click the “Submit” button on the reference proposal screen, it will trigger this process and start a Workflow for approval of your reference and inclusion into the reference database.

   

   If you would like to further explore the integration between business processes and low-code applications in SAP Build, check out the Basic Trial workbook Extend S/4HANA with SAP Build which is also included in your Basic Trial Request.

Complete the App

Now, let’s complete your application.

1. Click on User Interface to return to the UI editor

   

2. Your Customer Reference Directory page is fully completed already, however you need to make some changes to the Propose Reference Customer form.

To navigate the editor to the correct page, click the dropdown menu on the upper left of the interface and select Propose Reference Customer

3. The Editor should now be open on the Propose Reference Customer page.

You may notice that the “Submit” button for triggering the reference approval workflow is not yet implemented.

In the next steps we will add this to the page and then configure the values that we pass to the Business Process.

4. Click and drag a Button object from the left hand panel onto your app UI below the text “Click Submit below to start the reference approval workflow”.

   
   You will use this button to start the integrated SAP Build process automation project using data entered into the fields of your app.

5. Click on your new button to open the properties pane

   

6. In the Label field enter the text: Submit

   

7. Now you need to add some functionality to the Submit button. Click on the button, then select Add Logic to Button 1

   

8. This opens the Logic Canvas where we can add some application logic to the Submit button

   

9. You can see that by default there is a Component Tap Event associated with this button. You will need to add some logic steps after this so that when the button is pressed it will trigger your wokflow process using the data from the input fields on the page. On the left of the Logic Canvas, locate the Trigger Process object and drag it onto the Logic Canvas next to the Component Tap event, as below:

   

The Trigger Process step allows us to interact with the process automation project that is integrated into our application. We will use this step to pass the fields from our app as inputs to the business process.

10. Similarly, locate the Toast object and drag it onto the Logic Canvas next to the Trigger Process step you have just added.
    

The Toast function triggers a pop-up notification on our App UI. We will use this to provide feedback to the user when the process starts.

11. Now, connect the three logic steps (by clicking and dragging from the output nodes) exactly as below

    

12. Your button logic flow is now set up, but you still need to configure the steps. Select the Trigger Process step to open the properties pane, then under Input Parameters select Custom Object

    

13. Now you can see the list of required inputs for the business process.

    

14. We need to bind these to the data variables where your form inputs are stored. Select the ABC icon under contact

    

15. Select Data and Variables then select Page Variables

    

The page variables are pre-configured in the template as a method to store the input data from our app. Here we are setting up the app logic to take the value of these variables and use them to trigger the process.

16. Select Contact and then select Save

    

17. Repeat this process for the product, comments, customer and contact_email inputs. Once you have done this your inputs should appear as below

    

18. For the sender email, you should add @sapexperienceacademy.com which will ensure that your Trial user () receives all workflow items that are triggered by the app

    

19. Once you have entered the email value, select Save

    

20. The last step is to add some user feedback to the Toast object you created earlier.

Select the Toast step to open the properties panel.

In the Toast Message field enter the text: Reference Workflow started successfully

21. Finally, make sure to Save your overall project using the button on the top right of the interface.
    

You are now ready to try out the completed Customer References App!