We integrated the data into our SAP AppGyver extension.
Now, we must display that data so that we can see the upcoming appointments easily. To do that, we must bind the data to the different components that we set up in the user interface (UI) part.
A binding is a way to connect data between two points in our application. In this case, we want to get the data from the data variable to display in the correct UI components.
Maybe this sounds more difficult now than it is. We will explain everything to you in detail in this lesson.
Repeating the card component
Now comes the part where your UI comes to life. We will add the data from SAP Sales Cloud with the help of the data variable we created to display it.
To do that, you must first click on the card component. Then, click on the arrows next to Repeat With. This will repeat the Card component for however many Appointments there are in the data.

Now, click on Data and Variables and then on Data variable since we want to add the data variable we created.


Next, click on AppointmentCollection1. This is the data variable we are going to use to create a list of card components. Since we’re binding the contents of the data variable to the Repeat with property of the Card component, it means that there will be a card component created for every appointment in SAP Sales Cloud that matches our filtering criteria. In simple words, our app will display a list of marketing appointments based on our criteria.
Now, click on Save.

Now we have bound the data to the card component.
Binding the Subject to the card component
Let´s do something with the data we just added to the component. How about we display the subject of the appointment so that we know what it is about?
For that, click on the card component and then click on the box under Title. That´s how you add data from a source.

We’re looking to add the titles, also called subjects, to each of the listed appointments. To do this, we need to select Data Item in repeat.

Then, select current
and search for the Subject field. The properties are organized alphabetically to help you find the subject click on current.Subject
and save the binding we just created.
