Integrate data from an API

In this step, we use an API with equipment details. We integrate the data in a table for an exemplary equipment overview.

Procedure

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

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

  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 either for your API or API 1equipment.

  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. On the 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 oTableEquipment.

  9. On the Model tab, click into the setInitLoad field and select online from the list.

    appdesigner componentproperties restapi model online
  10. On the application tree pane, select oTableEquipment.

  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 1equipment.

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

  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.

Result: For each property you selected, a column component is added to your Table component. To see the changes, restart the preview.

Results

  • You have integrated data from an API.