Integrate data from an API

In this topic, you will learn how to integrate data to your application using an existing API. We will integrate the data in a table all also show how to bind the data to other components.

Procedure

  1. On the component library, open sap.m > Table Responsive and drag and drop the Table (sap.m.Table) component onto Page in the application tree.

  2. On the UI object pane, name your Table Table.

  3. On the component library, open Resources and drag and drop the RestAPI component onto Resources in the application tree.

  4. On the UI object pane, select the Rest API field to open the Rest API library.

  5. Search for your API.

  6. Select the operation with the GET Method.

Result: You have integrated a table, a Rest API, and an Operation. Now you bind the Rest API to the table to display data in your table.

  1. In the RestAPI, on its UI object pane, select the API tab and go to Response > 200.

  2. Click into the field that matches the Operation of your API and select your table from the list.

  3. On the Model tab, click into the setInitLoad field and select online from the list. This will trigger the API once the application is initialized.

  4. On the application tree pane, select Table.

  5. On the UI object pane, click into the Model Source field, and from the Binding pop-up window, select the property from your API.

  6. Right-click Table, and from the drop-down menu, select Wizard > Insert Fields - Display.

  7. In the Wizard window, select all properties you want to display in the table and select Create.

  8. On the top menu, select Save and Activate.

    Please note that the wizard will generate the components you want to include in your table. However, you also have the option to manually add any additional components if you wish.

    Result: For each property you selected, a column component is added to your Table component.

Results

  • You have integrated data from an API.