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.

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.

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

   

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 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:   "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.

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

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

   

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

   

   Connect them like ths:

   

3. Configure the Execute 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["Execute cloud function"].values.ratings

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.