Getting, Binding, and Displaying the Data in the UI

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.

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.

Finally, we also want to display the meeting notes of each of the appointments. For this, we need the text component we added earlier. Binding and getting the data in an added component is a bit different than doing so using a prebuilt component. So, let´s get right to it.

Go to the component template editor by scrolling down in the Properties tab and clicking on the square with the dot in the middle.

Following that, click on the added text component. You will see a window on the right which looks similar to the Properties tab of the card component. This is where we can add the data for the meeting notes. The name for the meeting notes property is Text. If we try to add it in the same way that we did for the Subject and OrganizerName fields earlier, you will see that the "Text property isn´t there. That is because the data for the meeting notes is stored in the AppointmentTextCollection. Maybe you remember that we added some expansions from the original AppointmentCollection. The AppointmentTextCollection was one of them. So, how do we get the data from there? By repeating it again of course!

Click the box below Repeat with.

AppointmentTextCollection is an item within the AppointmentCollection data resource, which you have already used. And that is why you select Data Item in Repeat again.

When you select current, you see a lot of repeated items and you will also find the AppointmentTextCollection there. Click on it and click SAVE.

Now, we repeat the data that’s already repeated data, which sounds a lot more complicated than it is. What we are doing is repeating the original AppointmentCollection and through that repetition we can access the expansions. Since we must display the data for the meeting notes, we repeat the AppointmentTextCollection. Let´s add the meeting notes to the content field now!

We do that by clicking on the box under Content and selecting Data item in repeat again. I´m sure you know how to do that by now!

Here, select current and then Text. After that save the binding you made.

Lastly, exit the component template editor. After you save your project, you can see the meeting notes displayed in the Previewer if there are any!

Congratulations, you just built your first ever extension to an SAP system in SAP AppGyver. You can be very proud of yourself.