Overview
Configure a list component to pull in data from a Mirata data table, mapping table columns to individual fields within each list item for customized presentation of your records.
We'll use the below table for this example:
Data Table Initialization
Add List Component
Add a list component to your form to serve as a container for displaying data records from a table. This establishes the structure for presenting each record.
Link List to Data Table
Link the list component to your specific data table to populate it with data. This connection ensures the list displays the correct number of items corresponding to your data table's records.
(Optional) select "Show Outlines" on the bottom of the Designer screen to see the specific components of the list.
Highlight the list (not the list item)
Set the initial value of the list to be a "Reference Table" and select your table.
The list will now show 3 records (as shown below). However, we need to specify which data table fields should be shown in the form.
List Item Field Mapping
When referencing data table entries in a list, the fields intended to populate with table entries must be named exactly how the table columns are named. For example, the column 'Task-Description' must be referenced by a form field named 'Task-Description'
The 'Label' of these fields does not matter, since the label is strictly for presentation.
*In designer, your field names cannot have spaces in them. This means that when you build a data table, any column names with spaces cannot be referenced. Therefore, it is suggested that users use dashes or underscores in their column names (ex. Task-Description)
Map Column Fields
Add an integer input field within the list item and name it 'Task' to display the 'Task' information from your data table. This creates a direct link to the corresponding column, showing the integer value for each task. Notice that the above screenshot of the table's 'Schema' shows that 'Task' is stored as an integer as opposed to a string.
Add a text input field within each list item and name it 'Task-Description' to display the 'Task-Description' for each record. This correctly maps to the data table's column, showing the text associated with each task.
Add a text input field within the list item and name it 'Equipment' to display the 'Equipment' details for each item. This connects to the corresponding column in your data table, showing the equipment information for each task.
(Optional) List Item Presentation
Disable Add Row
Disable the 'Add Row' functionality to prevent users from adding new entries directly through the list interface. This ensures new data is managed through other defined processes.
Disable Item Deletion
Disable the deletion option for individual list items to prevent accidental removal of data entries. This ensures records are removed only through designated data management workflows.
Hide Edit Button
Hide the edit button for each list item to restrict users from editing displayed data directly within the list. This maintains the accuracy of the information.
Enable Multi-line Text for Description
Enable the multi-line text option for the 'Task Description' field to ensure longer descriptions are fully visible. This allows the entire content to display clearly within its space.
Set Fields to Read-Only
Set all input fields within each list item to read-only to prevent users from modifying the displayed data. This ensures the information is for viewing purposes only.
Field Customization
Label Fields
Set the label text for the 'Task' field to 'Task' to provide a clear label for the task number. This makes it obvious to the user what information this field represents.
Set the label text for the 'Task-Description' field to 'Task Description' to clearly identify the details of each task. This ensures users understand this field contains the descriptive information.
Set the label text for the 'Equipment' field to 'Equipment' to accurately represent the equipment associated with each task. This provides a clear label indicating the relevant equipment.
Add Style
Users can add borders to the list item, as well as make text bold, italic, different colors, etc.