Building a User Interface (UI)

In the last lesson, we learned about what an OData API is and with that planned how we are going to create the SAP extension.

You should have a basic understanding of what we are going to build together.

In this lesson, we will walk you through the no-code development process and highly encourage you to build along with us.

The first step to building our application is designing the UI. The UI, or User Interface, is how we use the application and the design of it. SAP AppGyver has a standard design set, but you can always create your own experience. For this exercise, we will be using the standard design.

To build the extension, we are going to use components. These components are the preinstalled building blocks, which you can see in the section on the left called "component market".

So, let's start building – first, you should open your SAP AppGyver account and then you should go ahead and create a new project.

After creating a new project this is our canvas:

First, let’s change the Headline to something that fits our project. For this we click on the Headline component and change the name on the right under Content. Let´s change the text Headline to Appointments.

Next, let´s remove the text component since we won´t need it for this project. To do this click on the text component and click on the X on the right.

After removing it, go to the component library on the left and under Basic components, you will find the Card component. Drag and drop it onto the canvas.

For now, we will have only one card component. Once we work with the data, we can configure the card component in a way so that it will repeat and show all appointments that fit the filtering criteria.

Using the component template editor in SAP AppGyver, you can extensively customize components to suit your application’s needs. We can modify components and add different components together. Click on the card component and scroll down in the Properties tab. Keep in mind that every time we want to do something with a specific component you have to click it first. At the bottom, you will find a square with a dot in the middle. Click on it.

This is the component template editor.

Here you will need to drag and drop another text component into the card component. We will need it for later.

To close it, double-click outside of the Card component.

This is also a suitable time to save the project. You should save every time we finish a lesson because the changes you made will be visible in the previewer only after saving. Just click on Save at the top right of the screen.

This is everything we need to do for our UI for now!