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 oPageStart in the application tree.

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

    appdesigner bar footer
  3. On the component library, open sap.m > Application and drag and drop the BarContent component onto oBarFooter 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, click oRestAPI.

  9. In the Attributes tab on the properties pane, click into the setInitLoad field in Model and click Clear.

  10. On the application tree pane, click oButton.

  11. On the properties pane, open the Events tab and enter a name for the press event, for example UpdatePress.

  12. Click the document-text icon next to the name.

    appdesigner componentproperties document text

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

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

    appdesigner javascript codesnippets
  14. On the side menu of the Code Snippets window, open API, select oRestAPI and click Copy.

  15. On the shell bar, click Save and Activate.

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

  17. In the preview, click Update to show data in your table.

Results

You have created an application to display and update information about equipment:

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