Skip to Content

Create a Product List Page with Ratings

Now that you have your backend, you can finish the product list page by adding data resources and binding the properties of your list item composite component.
You will learn
  • How to enable BTP authentication
  • How to set up navigation between pages
  • How to use destinations (or hard-coded URLs) to access data services
  • How to set up data resources for your custom backend entities
  • How to call backend functions
  • How to bind data to your composite component
thecodesterDaniel WroblewskiFebruary 2, 2023
Created by
January 25, 2023

After creating a composite component and setting up your backend, you will now create the front end UI that will consume both business data and your custom data.

  • Step 1

    SAP Build Apps lets you create a navigation menu so you can go directly to different pages in your app.

    1. Go back to your Social Media app.

    2. Open the Navigation tab.

    3. Click on the List of Products page link.

      Change the Tab name to List of Products.

      Fix navigation
    4. Click Save.

    Log in to complete tutorial
  • Step 2

    You need to enable SAP BTP authentication since you want to use entities and functions from Visual Cloud Functions in your app.

    1. Go to the Auth tab.

    2. Click Enable Authentication.

    3. Select SAP BTP Authentication.

      On the confirmation popup, click OK.

    Log in to complete tutorial
  • Step 3

    As the business data, we will use the Northwind OData service, but we could have easily used a destination to an S/4HANA system.

    In this step, if you want to use a destination that you have already set up to Northwind, you can follow the instructions in the second tab.

    Log in to complete tutorial
  • Step 4
    1. Still on the Data tab, click Add Integration.

      Click Cloud Functions.

      Visual Cloud Functions
    2. Select Social Media Backend

      Social Media Backend
    3. Click Install Integration.

    4. Select the Rating entity, and click Enable Data Entity.

      Select the Comment entity, and click Enable Data Entity.

      Entities enabled
    5. Click Cloud functions.

      Functions tab

      Select AverageRating, and then click Enable Cloud Function.

    6. Click Save, then Exit.

    Log in to complete tutorial
  • Step 5
    1. Go back to the UI canvas, and select Variables.

      UI variables
    2. Under App Variables, click Add App Variable.

      App variables
      • Select the new variable (i.e., variable1), and rename it to Ratings.
      • Set the type to List, and the list item type to Object.
      Ratings app variable

      On the one hand, a type of object with no fields has no schema, so it is more difficult to work with in the formula editor. But on the other hand, it is compatible with any object and saves us the time of defining all the fields.

    3. Under Data Variables, click Add Data Variable.

      Select Products.

      Open the logic pane for the Products1 data variable, and remove the Delay flow function.

      Remove delay
    4. Click Save (upper right).

    Log in to complete tutorial
  • Step 6

    Now that we have all the data in variables, we want to bind them to the list component.

    1. Go back to View.

    2. Select the Large Image List Item, and in the Properties tab, set the following:

      Field Binding
      Repeat withThe data variable Products
      Title label Data item in repeat: current.ProductName
      Rating Formula
      DEFAULT(FIND_BY_KEY(appVars.Ratings, "productID", STRING(repeated.current.ProductID)).avg,0)
      RatingCount DEFAULT(FIND_BY_KEY(appVars.Ratings, "productID", STRING(repeated.current.ProductID)).count,0)
      Image source For fun, I wanted each product to have a picture. The simplest was to take a service that returns a picture. Here’s some formulas to return random pictures:
      "" + repeated.current.ProductID
      "" + repeated.current.ProductID

      The formula for the image may appear in red as an error, but it will work. Just save it.

    3. Still with the Large Image List Item selected, and in the Style tab, set the following:

      • Edit the (unnamed) style.
      • Under Effects, enable the shadow, set shadow to Content Shadow 1 and set the shadow color to static color #AF9E8D.
      • Click Save, then
    Log in to complete tutorial
  • Step 7
    1. Click an open area on the canvas, and open the logic pane.

      Page logic panel
    2. For the Page mounted event, add an Execute cloud function flow function, and then a Set app variable flow function.

      Alt text

      Connect them like ths:

      Rating logic
    3. Configure the Execute cloud function to call the AverageRating function (this is probably already set since you only have one function).

      Configure function
    4. Configure the Set app variable.

      Field Value
      Variable name Ratings
      Assigned value Formula
      outputs["Execute cloud function"].values.ratings
    5. Click Save (upper right).

    Which flow function do you use to call a function defined in the backend?

    Log in to complete tutorial
  • Step 8
    1. Click the Launch tab, and then Open Preview Portal.

    2. Click Open web preview (left).

    3. Select your project, Social Media.

    Run app

    The above is shown with the browser’s developer tools, with the iPhone device set.

    All of the products are shown, and all the ratings are 0 since we did not create a page to allow the user to add them. You’ll do that in the next tutorial.

    What do you have to enable in order to connect with the backend (entities and functions)?

    Log in to complete tutorial
Back to top