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, click the Rest API field to open the Rest API library.

  5. Search for your API.

  6. Click on the operation with the GET Method.

    appdesigner restapi library popup

    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.

  7. In the RestAPI, on its UI object pane, click the API tab and navigate to Response > 200.

  8. Click into the field that matches the Operation of your API and select your table from the list. In our example, it is Table.

  9. 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.

  10. On the application tree pane, select Table.

  11. On the UI object pane, click into the Model Source field, and from the Binding pop-up window, select the property from your API. In our example, it is equipment.

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

  13. In the Wizard window, check all properties you want to display in the table and click Create.

    appdesigner table sampleproperties
  14. On the top menu, click 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.

appdesigner table result

Results

  • You have integrated data from an API.