Using Table and Form Components

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:

1. If necessary, drag-and-drop a new Table Component onto the App Canvas
2. Select the Table Component,
   • Click the Table Component in the Explorer menu.
     or
   • Click the Table Component in the Canvas.
3. In the Appearance & Configuration Panel, select Configuration
4. 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:

1. If necessary, drag-and-drop a new Form Component onto the App Canvas
2. Select the Form Component,
   • Click the Form Component in the Explorer menu.
     or
   • Click the Form Component in the Canvas.
3. In the Appearance & Configuration Panel, select Configuration
4. 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