Welcome back to our blog series that follows how our first Low-Code/No-Code project with SAP Build Apps was developed. In our previous blog post we guided you through the steps how we created the first UI elements where users can share the name and website of their favorite “green” place and add them to a constantly growing list of sustainable restaurants of a city.
After we successfully developed the first UI and backend features with SAP Build Apps, we felt more confident to progress on our Low-Code/No-Code journey. To highlight the most sustainable restaurants, we decided to rate the restaurants according to three sustainability categories. In this blog post we will create the rating functionality and pages where users can view a restaurant’s information and overall green rating.
We designed the first page to cover the topic of sustainability. On this page we defined our so-called Green Meter which describes the categories based on which users can submit their feedback of the place they visited.
We used simple text fields to explain the basic concept and cards for the three categories.
We created our custom background color under the Theme tab to give a distinctive color for the cards. This guide offers handy tips to create your own color palette easily. Then we edited the Default card and used our own color scheme for it.
To create shadow for the card, use the Effects functionality under the Style tab and you would quickly get a different look and feel of the application even if you are not an artistic talent.
To explain how the rating of the restaurants works, we opted to use leaves.
We placed 3 icons in a container element. Under Properties we changed the originally star shaped icon to a leaf browsing within a rich library of icons to find the right one.
Similarly, to the cards we created a custom color for the leaves and used it as our Primary icon.
For the proper alignment of the three icons, select the entire container element and choose horizontal layout.
The second page we created allows users to view ratings and add their own ratings on specific restaurants.
Instead of creating multiple pages for each restaurant, you can create one page and the information on this page will change dynamically depending on which restaurant you are viewing using a page parameter. In the variable view of this page create a page parameter called RestID:
This page parameter will be used to identify which restaurant we are looking at. Its value is passed from the previous page.
Under the main information fields we created the area of rating. Within a container we placed a colored and customized Icon, a Text field and a Star rating element then we simply duplicated the container to display the rating in three different categories and changed only the icon and the text fields.
It took us a few rounds to figure out how to customize the rating functionality well. However, if you follow this video tutorial it will be quite easy. The Maximum Value shows how many stars you want to use for your rating and even if on the canvas you keep seeing the default 4 stars, you can always preview the app to make sure your custom properties are well set on the app.
To reflect the scores given, we turned our grey leaves to gold on the app. To create the color change, you need to highlight the rating component and open it in editor view by double clicking on the component. Then double click again on one icon and here you can customize it.
The Empty star stands for the initial, default status of the rating, while the Full star will reflect your actual choice of rating.
We also needed to ensure that the overall rating is updated when a new user rates a restaurant. Firstly, you need to create page variables of a special type, that is number in this case to hold the ratings that the new user inputs:
Then you need to link these variables to the inputs. In the UI view of the page, select the star rating components and link the Value of each sustainability effort to the relevant page variable:
You also need to update the ratings. Add a Button to the canvas and open its logic panel:
Now we need to indicate which record in the database we will be updating. To do this, link the ID the page parameter we defined earlier:
We also need to define what information we will be adding to this record. To do this, select custom object under Record properties:
Then we linked the respective page variables with each element:
However, we used a formula for the ratings to ensure that we add the new rating to an average of all the ratings instead of just overwriting the current rating:
This formula looks at the current value maintained in the database and data in a meaningful way: cultivating the top sustainable restaurants.
The third page we created was the Top restaurants page that holds a couple of variable elements: three places with the highest scores (biggest number of leaves) are continuously displayed and promoted here.
To create this page was easy because we were already familiar with the basic elements and how to modify them. We replicated similar components that we used before, keeping the plain design that we had defined for our application.
The only novelty element was the Large image list item which contains an Image, a Title and a Paragraph. This pre-built card makes the application development really easy: you just need to fill out the Title label, give a short description and add your own photo. All elements are nicely aligned for you on the canvas. To make our citizen developer work even quicker, we created this template only once and used the duplicate option then customized each variable field.
Apart from choosing from the Top places, we obviously gave room for basic name search. For this, we had the following page layout:
We had a data variable linked to our restaurants table and a page variable called SearchText of type Text, which we linked to the value of the Input field:
Now we needed to align the text that appears with what the user types in. Select the Text box in the container. We want to perform a search of all the restaurants in the database based on what the user types in and we want the search to repeat every time the user enters a new letter. To do this we will repeat a formula. Select the repeats with option and make use of the following formula:
This formula will search each restuarant name and assess whether is matches what the user inputs. If it matches the restaurant name will be displayed in the container.
This part of developing our application has been more complex but we discovered and learnt about nice new features of SAP Build Apps. As always, there has been continuous learning behind the scenes. While kimayramnarain’s low-code experience was a good base, we consulted this quick start documentation and Build forums. We also used the great resources of the SAP Build Apps Community, where there is an abundance of enablement materials, and the number of video tutorials and use case guides is constantly growing.
Stay with us until the last part of this blog series where we will share how we set up the user authentication and the related user engagement pages.
After we successfully developed the first UI and backend features with SAP Build Apps, we felt more confident to progress on our Low-Code/No-Code journey. To highlight the most sustainable restaurants, we decided to rate the restaurants according to three sustainability categories. In this blog post we will create the rating functionality and pages where users can view a restaurant’s information and overall green rating.
We designed the first page to cover the topic of sustainability. On this page we defined our so-called Green Meter which describes the categories based on which users can submit their feedback of the place they visited.
We used simple text fields to explain the basic concept and cards for the three categories.
We created our custom background color under the Theme tab to give a distinctive color for the cards. This guide offers handy tips to create your own color palette easily. Then we edited the Default card and used our own color scheme for it.
To create shadow for the card, use the Effects functionality under the Style tab and you would quickly get a different look and feel of the application even if you are not an artistic talent.
To explain how the rating of the restaurants works, we opted to use leaves.
We placed 3 icons in a container element. Under Properties we changed the originally star shaped icon to a leaf browsing within a rich library of icons to find the right one.
Similarly, to the cards we created a custom color for the leaves and used it as our Primary icon.
For the proper alignment of the three icons, select the entire container element and choose horizontal layout.
The second page we created allows users to view ratings and add their own ratings on specific restaurants.
Instead of creating multiple pages for each restaurant, you can create one page and the information on this page will change dynamically depending on which restaurant you are viewing using a page parameter. In the variable view of this page create a page parameter called RestID:
This page parameter will be used to identify which restaurant we are looking at. Its value is passed from the previous page.
Under the main information fields we created the area of rating. Within a container we placed a colored and customized Icon, a Text field and a Star rating element then we simply duplicated the container to display the rating in three different categories and changed only the icon and the text fields.
It took us a few rounds to figure out how to customize the rating functionality well. However, if you follow this video tutorial it will be quite easy. The Maximum Value shows how many stars you want to use for your rating and even if on the canvas you keep seeing the default 4 stars, you can always preview the app to make sure your custom properties are well set on the app.
To reflect the scores given, we turned our grey leaves to gold on the app. To create the color change, you need to highlight the rating component and open it in editor view by double clicking on the component. Then double click again on one icon and here you can customize it.
The Empty star stands for the initial, default status of the rating, while the Full star will reflect your actual choice of rating.
We also needed to ensure that the overall rating is updated when a new user rates a restaurant. Firstly, you need to create page variables of a special type, that is number in this case to hold the ratings that the new user inputs:
Then you need to link these variables to the inputs. In the UI view of the page, select the star rating components and link the Value of each sustainability effort to the relevant page variable:
You also need to update the ratings. Add a Button to the canvas and open its logic panel:
Now we need to indicate which record in the database we will be updating. To do this, link the ID the page parameter we defined earlier:
We also need to define what information we will be adding to this record. To do this, select custom object under Record properties:
Then we linked the respective page variables with each element:
However, we used a formula for the ratings to ensure that we add the new rating to an average of all the ratings instead of just overwriting the current rating:
This formula looks at the current value maintained in the database and data in a meaningful way: cultivating the top sustainable restaurants.
The third page we created was the Top restaurants page that holds a couple of variable elements: three places with the highest scores (biggest number of leaves) are continuously displayed and promoted here.
To create this page was easy because we were already familiar with the basic elements and how to modify them. We replicated similar components that we used before, keeping the plain design that we had defined for our application.
The only novelty element was the Large image list item which contains an Image, a Title and a Paragraph. This pre-built card makes the application development really easy: you just need to fill out the Title label, give a short description and add your own photo. All elements are nicely aligned for you on the canvas. To make our citizen developer work even quicker, we created this template only once and used the duplicate option then customized each variable field.
Apart from choosing from the Top places, we obviously gave room for basic name search. For this, we had the following page layout:
We had a data variable linked to our restaurants table and a page variable called SearchText of type Text, which we linked to the value of the Input field:
Now we needed to align the text that appears with what the user types in. Select the Text box in the container. We want to perform a search of all the restaurants in the database based on what the user types in and we want the search to repeat every time the user enters a new letter. To do this we will repeat a formula. Select the repeats with option and make use of the following formula:
This formula will search each restuarant name and assess whether is matches what the user inputs. If it matches the restaurant name will be displayed in the container.
This part of developing our application has been more complex but we discovered and learnt about nice new features of SAP Build Apps. As always, there has been continuous learning behind the scenes. While kimayramnarain’s low-code experience was a good base, we consulted this quick start documentation and Build forums. We also used the great resources of the SAP Build Apps Community, where there is an abundance of enablement materials, and the number of video tutorials and use case guides is constantly growing.
Stay with us until the last part of this blog series where we will share how we set up the user authentication and the related user engagement pages.
- SAP Managed Tags:
