Sales Insights App - Build the App

Get Started with the Sales Insights 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 CFO - Sales Insights 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	CFO - Sales Insights App -
   Description	Sales Insights 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.

   • product_sales_data: This is a CAP service that has been built using SAP Build Code and deployed to Cloud Foundry. It holds data for our Products, sales comparison and sales volume data. 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.
   

Complete the App

Now, let’s complete your application.

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

   

2. You may have noticed that the dropdown menu that allows you to slelect the product for analysis is missing.

In the next steps we will add this to the page and then use the selected value to also specify the correct product for the Regional Breakdown page.

3. Click and drag a Dropdown Field object from the left hand panel onto your app UI under the text line “Use the dropdown to select a product and view sales analysis”. You will use this field as a selector to choose which product’s sales details are displayed.

   

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

   

5. In the Label field enter the text: Product

   

6. 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

   

7. On the Edit Binding screen select Mapping

   

8. Click the X icon under Source Data

10. Select Data and Variables, then select Data Variable
    

The data variables are pre-configured in the template as a method to access the data that is stored in the CAP service and use it in our application

11. Choose ProductSales1 from the list of available data variables, then Save

    
    You should now see the list of source data fields available for mapping as below:
    

12. Click and drag the source data field pName to the label area. Then click and drag the source data field pMaterial to the value area

    

13. Select Save

    

14. Your last step is to make sure that the value selected in the dropdown is used to populate the graphs with the corresponding product’s data.

In the properties pane for your dropdown field, click the X icon under Selected Value

15. Select Data and Variables, then select App Variable

    

16. Select the app variable material_id then select Save

    

17. 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 Sales Insights App!