Tell us what you think

We want to create the best possible experience for our learners. Your feedback helps us to improve the experience for everyone.

Note

Getting, Binding, and Displaying the Data in the UI

Objectives

After completing this lesson, you will be able to:

Bind data to components
Use text, formula and repeat bindings with a data variable

Binding Data to Components

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.

Binding the Organizer Name to the Card Component

Since it worked so well last time, let´s do it again! Now, we will bind the Organizer Name to each of our listed appointments. We´ll do this in the same way we added the subject to the title.

Click on the box under Content and repeat the same steps above as before.

That means selecting Data Item in Repeat and clicking on current – but instead of subject, now we want to display the OrganizerName property, so look for that and select it. Then save the new binding.

Now, I will show you how to add data to card components in the component template editor.

Since we added a text component there, the steps we must take in order to show the meeting notes are a bit different from the way we used to do it before.

Binding the Meeting Notes to the card component

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.

Save progress to your learning plan by logging in or creating an account

Continue to next lesson