Create a Product List Page with Ratings

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.

   

4. Click Save.

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

SAP BTP authentication may be enabled already, if after clicking the Auth tab, you see this screen. If so, you can skip this step.

1. Go to the Auth tab.

2. Click Enable Authentication.

   

3. Select SAP BTP Authentication.

   On the confirmation popup, click OK.

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.

1. Still on the Data tab, click Add Integration.

   Click Cloud Functions.

   

2. Select 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.

   

5. Click Cloud functions.

   

   Select AverageRating, and then click Enable Cloud Function.

6. Click Save, then Exit.

1. Go back to the UI canvas, and select Variables.

   

2. Under App Variables, click Add App Variable.

   

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

   

   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.

   

4. Click Save (upper right).

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 with	The data variable Products1
   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 (no guarantee these will be working – feel free to use your own images):   "https://picsum.photos/100?random=" + repeated.current.ProductID   "https://cataas.com/cat/says/" + repeated.current.ProductID

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

   The formulas for rating and rating count may have field names marked in red. Remember, we did not create a schema for our app variable, so the formula editor does know that these will exist.

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

   • Edit the default style.

   • Under Effects, enable the shadow, set shadow size to Medium, and set the shadow color to static color #AF9E8D.

   • Click Save, then Exit.

1. Click an open area on the canvas, and open the logic pane.

   

2. For the Page mounted event, add an Run cloud function flow function, and then a Set app variable flow function, and connect them like this.

   

3. Configure the “Run cloud function” to call the AverageRating function (this is probably already set since you only have one function).

   

4. Configure the “Set app variable”.

   Field	Value
   Variable name	Ratings
   Assigned value	Formula   outputs["Run cloud function"].values.ratings

   Again, the formula editor might show the formula in red because we did not set the schema for the app variable.

5. Click Save (upper right).

1. Click the Launch tab, and then Open Preview Portal.

   

2. Click Open web preview (left).

3. Select your project, Social Media.

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.