Last month, Sergio Guerrero started our Build Bros series of SAP Build example apps with an app that uploads files and integrates with AWS.

Now it’s my turn. Here’s an example of using the new SAP Build Apps backend feature (aka, Visual Cloud Functions) to create a social media mashup with your SAP business data. Using the Northwind OData service, I’ll let users rate products and then have a chat around a specific product.

• On the products page, users will see a list of products with average ratings and number of ratings. They can click a product to go to its page.
• On a specific product’s page, users can see the latest comments for that product, can rate the product, and can add a comment.

Notice that the comments are sorted (showing latest first) and paginated on demand, so that just 3 are shown but if the user wants to see earlier ones they can click More and additional items are retrieved.

What’s interesting here

A few things I think are cool here:

• Social Media mashup – We have both business data in the app (from external API), and social data (from internal to the app).
• Visual Cloud Functions – The app uses the new Visual Cloud Functions, and there is a use case for a server-side function which massages and aggregates the data before bringing it to the front end.
• Paging – I implemented a mechanism to show only the latest comments, but the user can click More and then the next messages are retrieved.
• Mashup components – A lesser discussed feature of SAP Build Apps is the ability to create your own components. Here, I mashed up the Large Image List Item component with the Star Rating component, and created my own properties within the composite component.

How I built the backend

In this blog, I’ll describe the backend. In the next blog, I’ll describe the front-end.

In the lobby, I clicked Create → Build an Application → Application Backend, and created a project called Product Rating

In the Entities tab, I created 2 entities.

The 2 entities are:

• Rating for tracking every time someone rated a product.
• Comment for tracking every comment added to a product.

Then in the Functions tab, I created a new function:

I wanted to have the output something like the following JSON, showing for every product the average ratings and the number of ratings:

[{"productID":"4","avg":4,"count":1},
{"productID":"1","avg":2.888888888888889,"count":9},
{"productID":"2","avg":2,"count":1}]

So I needed to first get the data from the ratings entity. I clicked + and selected Retrieve records.

And then selected the Rating entity.

This brings all the records, but now I have to create function to turn all those records into what I need. So on the right, we can define the output by clicking Output Value.

I called my output value Ratings and then I clicked Set Formula to get the formula editor.

This was the formula I used:

GROUP(outputs["Rating / Records listed"].records, item.productId, {productID: key, avg: AVERAGE(PLUCK(items,"rating")), count: COUNT(items) } )

The formula does the following:

1. Groups all the records by product ID.
2. For each group/product ID, I create an object with the following fields:
   • product ID
   • the average of the ratings from all of the groups records
   • the count of the group’s records.

Deployment

Deployment is pretty easy, and there aren’t a lot of choices. Just go to the Deployments tab, and if all goes well, click Review and Deploy. It will take a minute or so, and you will see a blue dot and Progressing, and when all is done it turns green and says Healthy.

If you make changes that could cause problems for the front-end, it will warn you, but you will still be able to deploy. Certain changes, like changing the data type of an already deployed field, are forbidden.

Once you’ve deployed the entities, you can go back to the Entities tab and add data to them. For this project I didn’t need to add any data. If you need to, click Browse Data → New Record.

Epilogue

I am always looking for use cases for the using the server-side functions. Here, though it would be possible to do this on the front-end, it makes more sense and is easier to do this on the backend, before downloading a lot of data to the front-end.

My next blog will deal with the front-end part of the app, which includes: mashup of components, custom components, paging, filtering and sorting, calling server-side functions and entities, and more.

Let me know if you have any questions so far.

Happy Building!!

See all my blogs (Daniel Wroblewski) and connect with me on Twitter / LinkedIn