In the previous blog post we shared how we started our Low-Code/No-Code journey with SAP Build Apps. We gave you a sneak peek into our sustainable app, GreenLeenk that serves as our low-code/no-code playground to learn how to create a mobile application having no coding experience.
As GreenLeenk collects and showcases all restaurants in the user’s vicinity that make a conscious effort to run their business along sustainable guidelines and offer a “green” ambience for diners, we first started by implementing the restaurant related elements of the application. In this blog post, we will show you how we added and maintained the restaurants’ data on our app.
First you need to create the UI fields for the data (restaurants and website). Since these will be different every time a new user inputs their restaurant information, you set them up as your Page variables and dynamically define the value that these elements hold (name of the restaurant and the URL link). Once the Page variables hold the data that the users insert, you need to ensure that the data is updated in the backend table for each newly added restaurant. For this you first have to set up the data resources (restaurant and website fields), bind them to the backend with a Button and record their properties in the backend table. The process may seem complex at first glance but once you understand the app logic, it’s easy to accomplish: practically what you need to do is to create both the front and backend parts and bind them. Let’s see these steps in more details.
We kept the UI very simple. Do you remember SAP’s old slogan “Run simple!”? We still nurture this approach and we decided to ask the users to add only the name of the restaurant and its website. If our app is going to be developed further, we will implement more features like the possibility to call the restaurant or make a reservation directly from the app. However, we wanted to start our citizen developer journey with more simple challenges.
We found all the components we needed in the Core elements’ list. In case you don’t find the right building blocks, you can always browse the Marketplace or create your own component and make it available under the By Me tab.
We started to build the UI by selecting the Title component and used the Text component for the subtitle part from the Basic components group.
On the left-hand side of the app you can pull different elements onto the UI canvas, the right-hand side of the UI composer lets you modify each component. We created the subtitle easily by adding the text under the Content part of the Properties tab.
To display the restaurant’s name and the related website we used two Input fields. Quick tip: whenever you keep using the same element, it saves up a lot of time to use the Duplicate function then the same element can be placed on the canvas several times.
We divided the two components with Containers to create more space on the canvas. This was our own, first-time user, way of separating the different elements but once you read the AppGyver documentation, you learn to modify the gaps to achieve the ideal spacing. However, we liked the flexibility of the app and we kept the containers on the canvas.
Creating the UI part was rather quick. We found the Page layout field also handy because it allows you to review the whole structure of the UI. If you click on any of the elements, it highlights the component and brings you to it immediately and you can modify it according to your needs.
Once the UI part was ready, we had to connect the frontend with the backend table that we separately created. We chose the Button component to add and update the restaurants’ individual data to the backend table.
To create the backend connection, you need to configure the REST API. To understand more about this, please see this blog on Understanding REST APIs.
Using the method highlighted in the blog above, we created a data entity called restaurants. We will now understand how to update the backend using the UI through the API.
First, we created two Page variables: one for the restaurant’s name and one for restaurant’s website:
See this blog for understanding and creating variables.
Then we needed to link these variables to the input given by the user. Select the Input field and locate the Value option in the right-hand side panel:
Next, we needed to indicate what we will be linking this value to by selecting Data and Variables:
As GreenLeenk collects and showcases all restaurants in the user’s vicinity that make a conscious effort to run their business along sustainable guidelines and offer a “green” ambience for diners, we first started by implementing the restaurant related elements of the application. In this blog post, we will show you how we added and maintained the restaurants’ data on our app.
First you need to create the UI fields for the data (restaurants and website). Since these will be different every time a new user inputs their restaurant information, you set them up as your Page variables and dynamically define the value that these elements hold (name of the restaurant and the URL link). Once the Page variables hold the data that the users insert, you need to ensure that the data is updated in the backend table for each newly added restaurant. For this you first have to set up the data resources (restaurant and website fields), bind them to the backend with a Button and record their properties in the backend table. The process may seem complex at first glance but once you understand the app logic, it’s easy to accomplish: practically what you need to do is to create both the front and backend parts and bind them. Let’s see these steps in more details.
We kept the UI very simple. Do you remember SAP’s old slogan “Run simple!”? We still nurture this approach and we decided to ask the users to add only the name of the restaurant and its website. If our app is going to be developed further, we will implement more features like the possibility to call the restaurant or make a reservation directly from the app. However, we wanted to start our citizen developer journey with more simple challenges.
We found all the components we needed in the Core elements’ list. In case you don’t find the right building blocks, you can always browse the Marketplace or create your own component and make it available under the By Me tab.
We started to build the UI by selecting the Title component and used the Text component for the subtitle part from the Basic components group.
On the left-hand side of the app you can pull different elements onto the UI canvas, the right-hand side of the UI composer lets you modify each component. We created the subtitle easily by adding the text under the Content part of the Properties tab.
To display the restaurant’s name and the related website we used two Input fields. Quick tip: whenever you keep using the same element, it saves up a lot of time to use the Duplicate function then the same element can be placed on the canvas several times.
We divided the two components with Containers to create more space on the canvas. This was our own, first-time user, way of separating the different elements but once you read the AppGyver documentation, you learn to modify the gaps to achieve the ideal spacing. However, we liked the flexibility of the app and we kept the containers on the canvas.
Creating the UI part was rather quick. We found the Page layout field also handy because it allows you to review the whole structure of the UI. If you click on any of the elements, it highlights the component and brings you to it immediately and you can modify it according to your needs.
Once the UI part was ready, we had to connect the frontend with the backend table that we separately created. We chose the Button component to add and update the restaurants’ individual data to the backend table.
To create the backend connection, you need to configure the REST API. To understand more about this, please see this blog on Understanding REST APIs.
Using the method highlighted in the blog above, we created a data entity called restaurants. We will now understand how to update the backend using the UI through the API.
First, we created two Page variables: one for the restaurant’s name and one for restaurant’s website:
See this blog for understanding and creating variables.
Then we needed to link these variables to the input given by the user. Select the Input field and locate the Value option in the right-hand side panel:
Next, we needed to indicate what we will be linking this value to by selecting Data and Variables:
Here choose the Page variable option:
And finally, the relevant variable:
The Page variables will now hold the data input by the user while the page is active. The next step is to pass this data pack to our backend. Select the Button component, and expand the logic panel at the bottom then add the Create data record component:
At this point we needed to indicate which data resource we want to create the record in. Select the Create record component and navigate to the right-hand side panel.
Select Resource name:
Click on Data Resource:
Here you should see the data resources that you created in the API configuration. We selected the restaurants as resource:
Finally, we needed to indicate what values will be updated, like the restaurant’s name and website.
For this select Record properties:
Then choose Object with properties:
And link the page variables we created to their relevant properties:
With this the frontend and backend connection is established.
As a general experience, the UI canvas is very user friendly: you can try out the pre-built components on the go. Apart from it we reviewed the documentation of AppGyver and tried to apply their best practices, and relied on the hands-on experience of kimayramnarain who was actively working on the application.
If you follow this guide, you will also be able to pass data from the UI to the backend through the REST API. In the next blog we will discuss how to add the rating component.
Be sure to let us know of your experience with SAP Build Apps!
- SAP Managed Tags:
1 Comment
