TABLE OF CONTENTS

• Field Management
  • Renaming Fields
  • Reordering Fields
  • Changing Field Visibility
  • Setting Default Values
  • Configuring Record Details Component
  • Making Elements of the Table Expandable
• Data Interaction Management
  • Sorting
  • Pagination
  • Conditional Formatting

This article provides detailed instructions on how to format data within your app. By following these guidelines, you’ll be able to customize and optimize how your data is presented, making it more accessible and user-friendly. Proper data formatting enhances user experience, allowing users to navigate, sort, and interpret information more easily.

In this article, you’ll learn how to:

• Manage fields, including renaming, reordering, adjusting visibility, setting defaults values, configuring a record details component, and making table fields expandable.
• Enhance data interaction, with features like sorting, pagination, and conditional formatting.

Field Management

This section covers how to manage fields within forms and tables, including renaming, reordering, and adjusting field visibility, as well as setting default values, configuring a record details component, and making elements of a table expandable.

Renaming Fields

Renaming fields allows you to customize the labels of your data, making them more meaningful for users. This is particularly useful when default field names don't align with the specific terminology or context of your workspace.

To rename a field:

1. Navigate to the Design editor and select the component whose field(s) you want to rename. 
2. In the Appearance and Configuration panel, select Configuration.
3. Scroll down to the Fields section and click on the field you want to rename.
4. Enter the new name in the Display name field. The component will automatically display the updated name.

Reordering Fields

Reordering fields helps maintain a logical order of fields, prioritizing the most important information by placing it where users can easily see it. This improves navigation and helps users analyze data more efficiently.

To reorder a field:

1. Navigate to the Design editor and select the component whose field(s) you want to reorder. 
2. In the Appearance and Configuration panel, select Configuration.
3. In the Fields section, drag and drop the fields to arrange them in the desired order.
   

Changing Field Visibility

Customizing the visibility of fields allows you to control which fields are shown or hidden based on the needs of your users. Controlling field visibility ensures that users only see relevant information.

To update field’s visibility:

1. Navigate to the Design editor and select the component for which you want to change the field’s visibility.
2. In the Appearance and Configuration panel, select Configuration.
3. Scroll to the Fields section and click on the required field.
4. Locate the Visibility toggle and adjust it according to your needs, enabling or disabling it as necessary. Alternatively, you can use an expression (f(x)) to evaluate whether a field should be visible.
    

Setting Default Values

Setting default values for fields ensures that certain data is pre-populated based on the value of an expression, which speeds up the data entry process. 

To set a default value:

1. Navigate to the Design editor and click on the component where you want to set a default field value. 
2. From the Appearance and Configuration panel, select Configuration.
3. Scroll down to the Fields section and click on the required field.
4. Locate the Default value field and enter the desired default value. You can enter a particular value directly into the field or use mustaches to set the default value based on variables or expressions.
   

Configuring Record Details Component

A detailed record view allows users to explore data more comprehensively by clicking on a record and viewing more detailed information in a separate component. This feature can be implemented by configuring either a Form component or a Text component, depending on your needs.

To configure a Form component to display details:

1. Navigate to the Design editor and select Components on the Explorer and Components panel.
2. Drag and drop the Form component onto the canvas. 
3. In the Appearance and Configuration panel, select Configuration.
4. Locate the Read Only toggle and enable it so that the component displays the fields.
   
5. For the Data set, select the required data set. Optionally, specify the Data path, that is a child object from the Data set output. If not specified, the top level parent is used instead of the child object.
   
6. Proceed with further configuration so that the form displays the required details. For example, you may want to rename, reorder or hide particular fields.
    

To configure a Text component to display details:

1. Navigate to the Design editor and select Components on the Explorer and Components panel. 
2. Drag and drop the Text component onto the canvas. 
3. In the Appearance and Configuration panel, select Configuration.
4. Under Configuration > Text, specify the mustache value that references a Data set or Component value. You can also add some static text alongside the dynamic mustache value for additional context.

The image below has the Form component that displays the Agency details for the selected spacecraft and the Text component that displays full description for the spacecraft.

Making Elements of the Table Expandable

Making table elements expandable improves user experience by allowing users to access more detailed information directly within the table. This feature is particularly useful when table data is complex and requires additional space for proper representation. Each expandable element acts as a container for this extra data.

To make a table expandable:

1. Navigate to the Design editor and click on the component for which you want to enable expandable elements. 
2. In the Appearance and Configuration panel, select Configuration.
3. Locate the Expandable toggle and enable it. 
4. Optionally, configure additional settings such as Allow multiple expanded rows, which allows multiple rows to be expanded simultaneously, or Expanded area height.
   You can further enhance the expandable element by adding a container inside it, allowing you to include additional components or content.
   
   

Data Interaction Management

This section focuses on improving how users engage with data in the app, ensuring that they can navigate, sort, and interact with the information effectively.

Sorting

Sorting allows users to quickly find the information they need by arranging data in a clear and organized order.

To enable sorting:

1. Navigate to the Design editor and click on the component for which you want to enable sorting. 
2. In the Appearance and Configuration panel, select Configuration.
3. Scroll down to the Fields section and click on the field to expand its properties.
4. Locate the Sortable toggle and enable it. This adds a sorting toggle next to the column name, allowing users to sort data easily.
   

Pagination

Pagination helps to manage large data sets by breaking them into manageable pages, improving navigation for your users. This applies to the entire data set and does not support automatic pagination for APIs that return result sets across multiple transactions.

To enable pagination:
 

1. Navigate to the Design editor and click on the table for which you want to apply pagination.
2. In the Appearance and Configuration panel, select Configuration.
3. Locate the Pagination toggle and enable it. 
4. Optionally, indicate the Page size.
    

Conditional Formatting

Conditional formatting allows you to apply specific styles or highlights to data based on certain conditions, making key information stand out.

To enable conditional formatting:

1. Navigate to the Design editor and click on the table for which you want to apply conditional formatting.
2. In the Appearance and Configuration panel, select Configuration.
3. Scroll down to the Fields section and click on the field for which you want to enable conditional formatting. 
4. Scroll down and click the Edit conditional formatting button.
5. Click the Add new rule button.
6. Fill out the form with your desired conditions and styles.
7. Click Add to apply the rule.