As an App Builder, the Table and Form Components are efficient ways to map data source fields onto interface fields.
For example, if you have an external API that provides your App with 10 fields you can display them on the interface by setting the Data Path of the Form Component. You can then use the Component to order, toggle visibility, and rename those fields. Traditional applications, would have to carefully manage the mapping of API field names to Interface Components. If the underlying API changes, then the Component detects the new fields and you can add them without the need to carefully map API fields onto, or remove them from the interface.
In App Studio, both Table and Form Components automatically interpret Data Sources to give you the fields to manage.
For a full list of Components see: Introducing App Studio.
Using the Form and Table Components
The following example introduces the Form and Tables Components. In this example, the App provides a user with the ability to search for Users, display a list of search results, and allow the user to select a record to find out more information about their selection.
This example requires the following 3 Components:
- A Form Component—that an App User can use to provides values to submit to a search Data Set.
- A Table Component—that displays the search result, and an App User can use to select a record to open.
- A read-only Form Component—to display a Record in more detail.
For more information about changing the appearance of a Component see: Altering the appearance of a App Studio Component.
Configuring Table Components
To configure a Table Component:
- If necessary, drag-and-drop a new Table Component onto the App Canvas
- Select the Table Component,
- Click the Table Component in the Explorer menu.
or - Click the Table Component in the Canvas.
- Click the Table Component in the Explorer menu.
- In the Appearance & Configuration Panel, select Configuration
- As you require configure the following:
Configuration Description Show Record Index Adds an additional column that automatically increment from 1 onwards. Read Only Prevents users from setting values in the table cells. Show header Displays the header of each column Keep header in view Maintains the header in view as the user scrolls through the table rows Show selection column Adds an additional column with a checkbox App users use to Selection Specifies that App users can select rows of the table. Empty message A message that displays if there no data to display on the table Error message A message what displays if the Data Set, typically an External Data Source, errors. Data Set Specifies the Data Set to present data from when it evaluates. Data path Select an array of objects from the Data Set output to display on the table Filters You add filters to select specific records that match the criteria of the filter from the Data path array Show field type icon Displays an appropriate icon in the column header of each row Event handlers See: Adding event handlers
Configuring Form Components
To configure a Form Component:
- If necessary, drag-and-drop a new Form Component onto the App Canvas
- Select the Form Component,
- Click the Form Component in the Explorer menu.
or - Click the Form Component in the Canvas.
- Click the Form Component in the Explorer menu.
- In the Appearance & Configuration Panel, select Configuration
- As you require configure the following:
Configuration Description Layout Select a suitable layout for the Form to use to display fields. Label position Places the field label relative to the field. Read Only If disabled, you provide the App user with input fields to complete or provide inputs on, that they can edit.
If enabled, you use the form to display the fields and records of a single Data Set record.Submit on value change If enabled, the Data Set to evaluate every time the App User updates a value. You use this if you need to capture User inputs without waiting for a form to Submit. Primary button text Specifies the text on the App button Show secondary button Displays the secondary button Secondary button text Sets the text on the secondary action button Data Set Specifies the Data Set to present data from when it evaluates. Data path Select an array of objects from the Data Set output to display on the table Event handlers See: Adding event handlers
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article