Pages
      Back to home
      1. Betty Blocks Documentation
      2. Building your application
      3. Pages

      Adding data to your application

      This article contains an example of how you can display data using a data component in the page builder.

      You can design and build the user interface that you want to use for displaying information. This example is based on building a Bill of Materials based on a remote data source, SAP Hana. A model, Bill of Materials, is used for providing the data fields that are displayed.

      1. Navigate to the Pages module in the Builder bar. The Pages quick menu is opened (A).

      2. Click New page. The Choose a page template menu is displayed.

      3. Click on the Blank page template. The Create new page dialog is displayed.

       

      Creating a new page

      4. Specify the page name you want to use and the page path. In this example, we are using Bill of Materials.

      5. Choose the type of page: with Authenticated access or Public.

      6. Click on the Create page button.

      7. Drag and drop the single column layout component to the canvas. The Column layout is displayed at the top of the canvas.

      8. Specify data in the search field to quickly navigate to the DATA components. Drag and drop the Data Table component to the column component on the canvas. The Configure data table wizard is displayed.
      Creating a new page window
      Adding component to the page's canvas

      9. Click on Select model to open the Models dialog.

      10. Navigate to and select Bill of Material from the list displayed. Press Select to confirm that you want to select this model.

      11. Click on Bill of Material. The detailed list of properties in the remote model is displayed.
      Configure data table

      12. Navigate to and press the Add (+) button for each property you want to include in your data table.

      You can add and remove properties as required based on the information that you require for your business application. As shown in the example below, the following properties included in the example:

      Created at - ID - Material - Plant Name - Plant

      Note: Where you add a property that is not required, you can remove it by selecting the Trash button in the property row.

      13. Click Save. The Configure data table wizard is closed. The canvas page now shows a series of columns based on the properties you selected. The order reflects the order in which the properties were added.

      14. You can use the component options to specify, for example, the number of rows you want displayed. It is possible to do that via the Pagination in Options.