TABLE OF CONTENTS

• Using the Form and Table Components
  • Adding a Form Component to Input Search Values
  • Adding a Table Component to Display Search Results
  • Adding Read-Only Form Component to Show Detailed Information
  • Preview
• Table Component Configuration
• Form Component Configuration

The Table and Form Components offer efficient ways to map data source fields directly onto interface fields. For example, if you have an external API  that provides your app with 10 fields, you can easily display them on the interface by setting the Data Path in the Form Component. You can then use the Component to reorder, toggle visibility, and rename fields (to learn more about formatting data, check the Formatting Data article). 

In traditional applications, mapping API field names to interface components requires careful management. However, with App Studio, if the underlying API changes, the component automatically detects new fields, allowing you to add them without the need for manual mapping or removal from the interface.

In App Studio, both Table and Form Components automatically interpret data sources, providing you with the fields to manage.

Using the Form and Table Components

This example demonstrates how to use the Form and Table Components to create an app where users can search for spacecraft, view search results, and select a record to view more details.

The setup requires the following three Components:

1. A Form Component that allows users to input search values and submit them to a search data set.
2. A Table Component that displays the search results. Users can select a record from this table to view more details.
3. A Read-Only Form Component that shows detailed information about the selected record, providing a read-only view of the record's details.

Adding a Form Component to Input Search Values

1. Click Components on the Explorer and Components panel. 
2. Under Data, select the Form component and drag it onto the canvas.
3. Click on the new Form component (either in the Explorer menu or in the Canvas).
4. Update the name of the newly added component.
5. In the Appearance and Configuration section, click Configuration.
6. In the list of configurations, locate the Data set drop-down list and select the required data set to wire the component to the data set. The form will pull in the URL parameter that will be used to do the search automatically.
7. Set the Search form toggle to ON (Toggle to blue).
   

Adding a Table Component to Display Search Results

1. Select the Table component under the Data category and drag it onto the canvas.
2. Click on the new Table component.
3. Update the name of the newly added component.
4. In the Appearance and Configuration section, click Configuration.
5. Set the Read only toggle to ON (Toggle to blue).
6. In the list of configurations, locate the Data set drop-down list and select the required data set to wire the component to the data set.
7. Optionally, specify the Data path, that is a child object from the Data Set output to display on the table. If not specified, the top level parent is used.

Note: The data you see in the table in App Studio is 'mock' data and not fetched from the actual endpoint. You will see the real data when we move on to making a query.

Adding Read-Only Form Component to Show Detailed Information

1. Repeat Steps 1-6 of the Adding a Form Component to Input Search Values instruction.
2. In the list of configurations, locate the Read only toggle and set it to ON (Toggle to blue).

Preview

The image below has the Search Form Component (1) where the input value is entered, a Table (2) that displays search results, and the read-only Form component (3) that displays the Agency details for the selected spacecraft record.

Table Component Configuration

The table below provides descriptions of each configuration option available for the Table component under Appearance and Configuration > Configuration.

Form Component Configuration

The table below provides descriptions of each configuration option available for the Form component under Appearance and Configuration > Configuration.