Getting, Binding and Displaying Data in the UI

Objectives
After completing this lesson, you will be able to:

After completing this lesson, you will be able to:

  • Repeat the Card component and bind objects to it

Introduction: Repeating the Card Component

Now comes the part where we bring your user interface (UI) to life!

We integrated the data into the extension we are building and 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.

Remember, 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.

Repeat the Card Component and Bind Objects to it

Binding the Subject, Organizer Name and Meeting Notes to the Card Component

Let's add the data from SAP Sales Cloud with the help of the data variable we created to display it. We’ll start with the card component, and duplicate it.

Then let´s use the data we just added to the component to display the subject of the appointment so that we know what it is about.

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.

Finally, want to display the meeting notes for each 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.

Repeating the Card Component

Let's add the data from SAP Sales Cloud with the help of the data variable we created to display it. We’ll start with the card component, and duplicate it.

Binding the Organizer Name to the Card Component

Binding the Subject to the Card Component

Now let´s use the data we just added to the component to display the subject of the appointment so that we know what it is about.

Binding the Subject to the Card Component

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.

Binding the Meeting Notes to the Card Component

Finally, want to display the meeting notes for each 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.

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