Data components

Data

Hidden

You can use the Hidden component to create a resource property that can be custom set inside a form. It doesn't display in rendered forms.

Container

You can use the Container component to wrap a set of fields into an object with a container key. A Container with the key financialPerformance submits as:

{
                    data: {
                    financialPerformance {
                    grossProfitMargin: "0.83",
                    [tab]netProfitMargin: "0.43"
                    }
                    }
                    }

Data Map

Data type: System.Collections.Generic.Dictionary<System.String,System.String>

Use the Data Map component to create key-value pairs. The component is editable at runtime, so users can create new key-value paris, by clicking Add Another.

Note: The Key field is by default a Text Field and cannot be changed. The Value field can be changed with other components.

• Label for Key column - set a label to show for the Key column. If left empty, the name of the column stays as Key.
• Disable Adding / Removing Rows - hides the buttons that allow adding or removing rows when the form shows.
• Show Key Column Before Value - select if you want the Key column to show before the Value column.
• Add Another Text - set the text to display for the Add Another button.

The Layout tab is specific only to the Data Map component:

• HTML Attributes - add custom HTML attributes to the component.
  Note: Attributes from other components dominate the attributes that you configure.
• PDF Overlay - apply styling settings to PDF forms.

To learn how to use the Data Map component check out the Using the Data Map component tutorial.

Data Grid

You can use the Data Grid component to render multiple rows of data, similar to a data table. You can drag and drop multiple components in the Data Grid to match your use case.

In the Form Renderer window, the rows inside the Data Grid component can be added or removed.

• Disable Adding / Removing Rows - hides the buttons that allow adding or removing rows when the form renders.
• Allow Reorder - reorder rows by dragging and dropping them.
• Equal Column Width - makes the widths of columns equal.
• Enable Row Groups - allows separating rows into groups. Add groups, label them, and select the rows for each group.
• Initialize Empty - the Data Grid will have no visible rows when initialized.

Edit Grid

You can use the Edit Grid component to render multiple rows of data, similar to a data table. You can drag and drop multiple form components into the Edit Grid, to capture loads of data.

When the form renders, you can add a duplicate of the Edit Grid, by clicking Add Another.

• Open First Row when Empty - opens the first row when the Edit Grid is empty.
• Disable Adding / Removing Rows - hides the buttons that allow adding or removing rows when the form shows.
• Add Another Text - changes the name of the Add Another button.
• Save Row Text - changes the text of the Save Row button.
• Remove Row Text - changes the text of the Remove Row button.

The Templates tab is specific to the Edit Grid component only. The Header,Row, and Footer Templates allow you to customize the grid using JavaScript. You can modify what type of components display in the rows within a grid or the look of the header / footer.

Header Template

This is the Lodash Template used to render the header of the Edit Grid component.

Important: The Header Template doesn't work with Form Actions.

There are two variables available:

• value - the array of row data.
• components - the array of components in the grid.

Row Template

This is the Lodash Template used to render each row of the Edit Grid component.

Important: The Row Template doesn't work with Form Actions.

There are three variables available:

• row - object of one row's data.
• components - the array of components in the grid.
• state - current row's state (draft/saved).

To add Click type events, add the following classes to elements: editRow and removeRow.

Footer Template

This is the Lodash Template used to render the footer of the Edit Grid component.

There are two variables available:

• value - the array of row data.
• components - the array of components in the grid.

Data Table

You can use the Data Table component to render multiple rows of data, similar to a data table. Data Table is a read-only component that you can use to display large amounts of data. You can drag and drop multiple form components into the Data Table component.

• Sortable - sort data inside columns in ascending or descending order. You sort the data at runtime.
• Filterable - filter data inside each column. Filter the data at runtime.
• Column(s) Resizable - change the width of the columns at runtime. The Column(s) Resizable capability allows you to see the data inside columns better.

• Pagination - display the data of the Data Table component on pages that are numbered. The pagination capability also includes setting the number of items per page.

• Inline editing - allow editing at runtime, similarly to how you would do it in Excel.

Sortable

You can sort data inside columns in ascending or descending order. You sort the data at runtime, in the form.

The data in the Data Table is displayed in the same order as in the input data table. To sort all data in the Data Table, click any column header in the form.

• First click sorts the data in ascending order.
• Second click sorts the data in descending order.

• Third click restores the original order.

  

Filterable

You can filter data inside each column. You can filter the data while the form is showing.

To filter data in a column:

1. Hover over the column header and click the triple bar menu.
2. Choose a filtering operation.
3. Input a value in the Filter field of the triple bar menu. The input value in the Filter field is a condition for the filtering operation.

Based on the type of data, the following filter operations are available:

Filter operation	Text	Number	Date/Time
Contains
Not contains
Equals
Not equals
Starts with
Ends with
Less than
Less than or equals
Greater than
Greater than or equals
In range
Blank
Not blank