Add a footer with a button

In this step, you add a footer bar with a button to update data displayed in your application.

Procedure

  1. On the component library, open sap.m > Application and drag and drop the Bar component onto Page in the application tree.

  2. From the pop-up menu that opens when you drop the component, select setFooter.

    appdesigner bar footer
  3. On the component library, open sap.m > Application and drag and drop the BarContent component onto BarFooter in the application tree.

  4. From the pop-up menu that opens when you drop the component, select Middle.

  5. On the component library, open sap.m > Simple Controls and drag and drop the Button component onto Middle in the application tree.

  6. On the properties pane, open the Properties tab.

  7. In text, enter Update and in type, select Emphasized from the list.

    Result: You have added a footer with a button to update the table. Now you add functionality to the button so that the button makes the API call rather than the table itself.

  8. On the application tree, select oRestAPI.

  9. In the Attributes tab on the properties pane, click into the setInitLoad field in Model and select Clear. This is because we want to trigger the API when we select the button to fetch the latest data.

  10. On the application tree pane, select Button.

  11. On the properties pane, open the Events > press and select JavaScript.

    Result: On the preview pane, the JavaScript editor opens.

  12. In the JavaScript editor, right-click and select Code Snippets.

  13. On the side menu of the Code Snippets window, open API, select RestAPI, and select Copy.

    The generated code snippet will provide you with parameters to use for querying the data. For fetching all the data do the following:

    apiRestAPI();
  14. On the shell bar, select Save and Activate.

  15. Run a preview in a new browser tab or in the App Designer.

  16. In the preview, select Update to show data in your table.

Results

app from scratch footer before
Figure 1. Before the press event
app from scratch footer after
Figure 2. After the press event
  • You have created an application with multiple components including a table and a Rest API.

  • You have integrated data from an API.

  • You have created a button to update data in the table.