Supplier Feedback App - Build the App

Get Started with the Supplier Feedback 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 CPO - Supplier Feedback App - Prototype.

   

3. When you find the prototype 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	CPO - Supplier Feedback App -
   Description	Supplier Feedback 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 prototype you copied.

   • cpo_demo_data: This is a CAP service that has been built using SAP Build Code and deployed to Cloud Foundry. It holds data for our Purchases, Reviews and Suppliers. 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.

   • Supplier Review 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 Feedback” button on the app home screen, it will trigger this process and start a Workflow for approval of your review and inclusion in to the review 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 review submission page is fully completed already, however you need to make some changes to the Supplier Dashboard. To navigate the editor to the correct page, click the dropdown menu on the upper left of the interface and select Supplier Dashboard

   

   Tip

   : Remember to regularly

3. The Editor should now be open on the Supplier Dashboard page. You may notice that the dropdown field for selecting the supplier is not yet implemented. In the next steps we will add this to the page and then use the selected value to access the data for the correct supplier.

   

4. Click and drag a Dropdown Field object from the left hand panel onto your app UI above the Supplier Ratings section. You will use this dropdown as a selector for the supplier name.

   

5. Click on your new dropdown field to open the properties pane

   

6. In the Label field enter the text: Select a Supplier from the Dropdown

   

7. Next you need to specify the list of values that will appear in the dropdown menu. Select the [ ] icon under Option List to edit the binding

   

8. On the Edit Binding screen select Formula

   

9. Click on the existing formula and replace it with the below content:

   MAP(data.Suppliers1, {label: item.sname,value: item.sname})

This will populate the dropdown field with data from the Suppliers data source in our CAP data service

10. Select Save, then select Save again

    

11. Next, you need to specify that the value selected in this dropdown should be stored in the page variable which we use to display our supplier overview. The variable is already created - you just need to bind it to the value selected in the dropdown. In the Properties panel for your dropdown field, select the X icon under Selected Value

    

12. On the Edit Bindings screen select Data and Variables, then select Page variable

    

The page variables are pre-configured in the prototype as a method to store the input data from our app.

13. Choose supplier_name_page.

    

14. Select Save

    

15. 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 Supplier Feedback App!