Data Grid form control

A form control that lets a form user view, change, or delete the data in a table.


Data Grid form control

Configure the Data Grid form control

To configure the Data Grid Data Grid icon control, do the procedure in this topic.

Video: Common Configuration Settings in eForm Controls

Examples

How to Start

  1. Open eForm Builder.

    For information about how to open this screen, refer to eForm Builder screen.


    Eform Builder screen
  2. On the eForm Builder screen, in the Toolbox, open the Advanced Controls tab.

    Advanced Controls tab
  3. On the Advanced Controls tab, drag a Data Grid Data Grid icon form control onto your eForm.

    Data Grid Form Control

Procedure

  1. Complete the settings on the configuration screens.

    You can use the Data screen screen to specify a variable.

General

Specifies the basic configuration for the Data Grid form control.

Figure: General tab

General tab

Fields

Field NameDefinition

Label
Description:
Specifies the text label that shows on your form for the control.
Allowed Values:
One line of text (a string).

Accepted:

  • Letters
  • Numbers
  • Spaces
Default Value:
Different for different controls.
Example:
This is a common configuration field that is used in many examples. Refer to:
  • Examples - Step-by-step use case examples, information about what types of examples are provided in the AgilePoint NX Product Documentation, and other resources where you can find more examples.

Internal Name
Description:
Specifies a unique, technical name for your control.
Allowed Values:
One line of text (a string).

Not Accepted:

  • Spaces
Default Value:
Different for different controls.
Example:
This is a common configuration field that is used in many examples. Refer to:
  • Examples - Step-by-step use case examples, information about what types of examples are provided in the AgilePoint NX Product Documentation, and other resources where you can find more examples.

Help Text
Description:
Specifies the text to shows when a runtime app user hovers their cursor over the form control.
Allowed Values:
More than one line of text.
Default Value:
None
Example:
Refer to:

Help Text Display
Description:
Specifies if the field shows the text in the Help Text field when the runtime app user hovers over the label or field.
Allowed Values:
  • None - Does not show the help text.
  • Hover On Label - Shows the help text when you put your mouse on the label.
  • Hover On Field - Shows the help text when you put your mouse on the field.
  • Hover On Both - Shows the help text when you put your mouse on the label and Field.
Default Value:
None
Example:
Refer to:

Configure

Configures advanced settings for your form control.

Figure: Configure tab (top fields)

Configure tab

Fields

Field NameDefinition

Required
Description:
Specifies if the field is mandatory.
Allowed Values:
  • Deselected - The field is not mandatory.
  • Selected - The field is mandatory.
Default Value:
Deselected
Example:
Refer to:

Validation Message for Required Field
Description:
Specifies the message to show if the form user does not enter data in a mandatory form control.
Allowed Values:
More than one line of text.
Default Value:
Enter the ${L}

${L} is a variable that shows the name of the form control.

Example:
Refer to:

List Type
Description:
Specifies the data source to get the options in the list.
Allowed Values:
  • Inline List - Completes the list with the values specified in the form control.
  • Lookup List - Completes the list with the values from an external data source.
Default Value:
Inline List
Example:
Refer to:

Header
Description:
Specifies the heading for the column.
To Open this Field:
  1. On the Configure tab, in the List Type field, select Inline List.
Allowed Values:
One line of text (a string).

Accepted:

  • Letters
  • Numbers
  • Spaces
Default Value:
Column 1

Internal Name
Description:
Specifies a unique, technical name for your header.
To Open this Field:
  1. On the Configure tab, in the List Type field, select Inline List.
Allowed Values:
One line of text (a string).

Not Accepted:

  • Spaces
Default Value:
Column1

Data Type
Description:
Specifies the data type for the column.
To Open this Field:
  1. On the Configure tab, in the List Type field, select Inline List.
Allowed Values:
  • string
  • number
  • boolean
  • datetime
  • enum

Format
Description:
Specifies the date and time format that the form control shows.
To Open this Field:
  1. On the Configure tab, in the List Type field, select Inline List.
  2. In the Data Type field, select datetime.
Allowed Values:
  • yyyy-MM-dd HH:mm:ss - Shows the date-time in the format year-Month-day hour:minute:second.
  • yyyy/MM/dd - Shows the date in the format year/Month/day.
  • yyyy-MM-dd - Shows the date in the format year-Month-day.
  • MM/dd/yyyy HH:mm:ss - Shows the date-time in the format Month/day/year hour:minute:second.
  • MM/dd/yyyy - Shows the date in the format Month/day/year.
  • dd-MM-yyyy HH:mm:ss - Shows the date-time in the format day-Month-year hour:minute:second.
  • dd-MM-yyyy - Shows the date in the format day-Month-year.
  • dd MMM yyyy HH:mm:ss - Shows the date-time in the format day Month year hour:minute:second.
  • dd MMM yyyy - Shows the date in the format day Month year.
  • MMM dd yyyy HH:mm:ss - Shows the date-time in the format Month day year hour:minute:second.
  • MMM dd yyyy - Shows the date in the format Month day year.
Default Value:
None
Example:
  • 09/21/1978
  • 1978/09/21
Limitations:

This field is available in these releases:

Width (%)
Description:
Specifies width of the column in proportion to the area of your form control.
To Open this Field:
  1. On the Configure tab, in the List Type field, select Inline List.
Allowed Values:
An integer.

Represents

  • A percentage
Default Value:
None

Width (px)
Description:
Specifies the width of the column in pixels.
To Open this Field:
  1. On the Configure tab, in the List Type field, select Inline List.
  2. Select the Accept Width In Pixels field.
Allowed Values:
An integer.
Default Value:
None
Limitations:

This field is available in these releases:

Mandatory
Description:
Specifies if the column is mandatory.
To Open this Field:
  1. On the Configure tab, in the List Type field, select Inline List.
Allowed Values:
  • Deselected - The column is not mandatory.
  • Selected - The column is mandatory.
Default Value:
Deselected

Visible
Description:
Specifies to show or hide the columns on the form.
To Open this Field:
  1. On the Configure tab, in the List Type field, select Inline List.
Allowed Values:
  • Selected - Shows the column on the form.
  • Deselected - Hides the column on the form.
Default Value:
Selected
Limitations:

AgilePoint NX OnDemand (public cloud), or AgilePoint NX PrivateCloud or AgilePoint NX OnPremises v7.0 Software Update 1 or higher.

Visible in Mobile
Description:
Specifies if the form field shows on a mobile device.
To Open this Field:
  1. On the Configure tab, in the List Type field, select Inline List.
Allowed Values:
  • Selected - The form field shows on a mobile device.
  • Deselected - The form field does not show on a mobile device.
Default Value:
Deselected
Limitations:

AgilePoint NX OnDemand (public cloud), or AgilePoint NX PrivateCloud or AgilePoint NX OnPremises v7.0 Software Update 2 or higher.

Read-Only
Description:
Specifies whether the column accepts user input.
Allowed Values:
  • Selected - A user can not enter a value for the column. The column shows as read-only.
  • Deselected - A user can enter a value for the column.
Default Value:
Deselected

Groupable
Description:
Specifies whether to group the column based on a column header at runtime.

The runtime app user can drag a column header to group.

To Open this Field:
  1. On the Configure tab, in the List Type field, select Inline List.
Allowed Values:
  • Selected - Groups the column based on a column header selected at runtime.
  • Deselected - Runtime grouping is disabled.
Default Value:
Deselected
Limitations:

AgilePoint NX OnDemand (public cloud), or AgilePoint NX PrivateCloud or AgilePoint NX OnPremises v7.0 Software Update 2 or higher.

Use Custom Template
Description:
Specifies whether to use the custom HTML and JavaScript code snippet to change the visual style of the values in the column.
To Open this Field:
  1. In the List Type field, select Lookup List.
  2. Deselect Auto Generate Lookup Columns.
Allowed Values:
  • Selected - Uses the custom HTML and JavaScript code snippet to change the visual style of the values in the column.

    You must specify the custom HTML and JavaScript code snippet in the Template field.

  • Deselected - Uses the default visual style for the column.
Default Value:
Selected
Example:
Refer to:
Limitations:

This field is available in these releases:

Template
Description:
Shows the custom HTML and JavaScript code snippet used to format the column.
To Open this Field:
  1. Select Use Custom Template.
Allowed Values:
Read only.
Example:
Refer to:
Limitations:

This field is available in these releases:

HTML editor
Description:
Specifies a code snippet to format the columns.
To Open this Field:
  1. Click Expand HTML Expand HTML icon.
Allowed Values:
HTML code in Kendo UI Templates syntax.

For more information, refer to:

These additional options are available:

  • You can use JavaScript.

    For more information, refer to (Example) Use Custom JavaScript in an eForm.

  • You can use CSS.

    For more information, refer to (Example) Use Custom CSS in an eForm.

  • You can use images.

    These requirements apply to images used in custom template:

    • Images must be stored in a web server or cloud storage location accessible through HTTPS that AgilePoint NX can access.
    • Images cannot be stored on a local file system, such as your local machine or the AgilePoint Server machine.
    • Images must be referenced with an absolute URL or base64 encoded value.
Default Value:
None
Example:
Refer to:
Limitations:

Delete Delete icon

Function:
Deletes the selected row.
To Open this Field:
  1. In the List Type field, select Inline List.

Add Column

Function:
Adds more rows.

Lookup Source
Description:
Specifies a reusable lookup configuration. The lookup configuration includes the data source and other configuration values for the lookup.
To Open this Field:
  1. In the List Type field, select Lookup List.
Allowed Values:
A valid lookup source
Default Value:
None
Example:
Refer to:

Add Lookup Add Lookup icon
Function:
Opens the screen to configure a lookup.

There is more than one path to configure a lookup. Make sure you use the document that shows the path for your lookup.

To Open this Field:
  1. In the List Type field, select Lookup List.
Example:
Refer to:

Auto Generate Lookup Columns
Description:
Specifies if the form control completes the header and columns using information from your data source.
To Open this Field:
  1. In the List Type field, select Lookup List.
Allowed Values:
  • Selected - Completes the header and columns of the grid using data from your data source.
  • Deselected - Does not complete the header and columns of the grid.
Default Value:
Selected

Bound Column
Description:
Completes the column value using a specified field from your lookup source.
To Open this Field:
  1. In the List Type field, select Lookup List.
  2. Deselect Auto Generate Lookup Columns.
Allowed Values:
A column value from the list.
Default Value:
None

Format
Description:
Specifies the date format that the form control shows.
To Open this Field:
  1. In the List Type field, select Lookup List.
  2. Deselect Auto Generate Lookup Columns.
  3. In the Bound Column field, select any field that specifies the date value.
Allowed Values:
  • yyyy/MM/dd - Shows the date in the format year/Month/day.
  • yyyy-MM-dd - Shows the date in the format year-Month-day.
  • MM/dd/yyyy - Shows the date in the format Month/day/year.
  • dd-MM-yyyy - Shows the date in the format day-Month-year.
  • dd MMM yyyy - Shows the date in the format day Month year.
  • MMM dd yyyy - Shows the date in the format Month day year.
Default Value:
None
Example:
  • 09/21/1978
  • 1978/09/21
Limitations:

This field is available in these releases:

Configure Enum Configure Enum icon
Opens this Screen:
Configure Option
To Open this Field:
  1. In the List Type field, select Lookup List.
  2. Deselect Auto Generate Lookup Columns.
Function of this Screen:
Configures the list of values for the columns.

Accept Width In Pixels
Description:
Specifies whether the app designer can configure the width of the column in pixels.
To Open this Field:
  1. On the Configure tab, in the List Type field, select Inline List.
Allowed Values:
  • Selected - Specifies the width of the column in pixels.
  • Deselected - Specifies the width of the column as a percentage of the form width.
Default Value:
Deselected
Limitations:

This field is available in these releases:

Allow Add
Description:
Specifies whether the form user can add new records.
Allowed Values:
  • Selected - Lets the form user add new records.
  • Deselected - Does not let the form user add new records.
Default Value:
Selected

Allow Delete
Description:
Specifies whether the form user can delete records.
Allowed Values:
  • Selected - Lets the form user delete records.
  • Deselected - Does not let the form user delete records.
Default Value:
Selected

Allow Edit
Description:
Specifies if the form user can change values in the data grid.
Allowed Values:
  • Selected - Lets the form user change the values.
  • Deselected - Does not let the form user change the values.
Default Value:
Selected

Pop-up Edit
Description:
Specifies if the form user can change values in the data grid on an edit screen.
Allowed Values:
  • Selected - Lets the form user change values in the data grid in an edit screen.
  • Deselected - Does not let the form user change records in the data grid on an edit screen.
Default Value:
Deselected

DateTime Conversion
Description:
Specifies whether to change the date-time to ISO format.
Allowed Values:
  • Selected - The date-time value uses ISO format.
  • Deselected - The date-time value uses a specified, non-ISO format.
Default Value:
Deselected

Mandatory Column Validation Message
Description:
Specifies the message to show if the form user does not complete a mandatory column in the form.
Allowed Values:
More than one line of text.
Default Value:
Please complete the mandatory columns for ${L}

${L} is a variable that shows the name of the form control.

Minimum Records Validation Message
Description:
Specifies the message to show if the form user does not enter a set minimum number of values in the form.
Allowed Values:
More than one line of text.
Default Value:
Please enter minimum number of records for ${L}

${L} is a variable that shows the name of the form control.

Maximum Items
Description:
Specifies the maximum number of records the form user can enter in the form.
Allowed Values:
An integer.
Default Value:
10

Minimum Items
Description:
Specifies the minimum number of values for the form user to enter in the form.
Allowed Values:
An integer.
Default Value:
0

Appearance

Specifies the look and feel for your form control.

Figure: Appearance tab

Appearance tab

Fields

Field NameDefinition

Font Family
Description:
Specifies the font family of the input text and label.
Allowed Values:
A font name from the list.
Default Value:
  • Modern theme - Roboto
  • Classic theme - Arial
Example:
Refer to:

Font Style
Description:
Specifies the style of the font for the input text and label.
Allowed Values:
  • Bold - Shows the input text and label in bold.
  • Underline - Shows the label underlined.
  • Italic - Shows the label in italic.
Default Value:
None
Example:
Refer to:

Foreground Color
Description:
Specifies the foreground color for your control.
Allowed Values:
A color value using a hex code, RGB code, or RGBA code.

You can enter a color code, or select a color from the palette.

Default Value:
#ff0000
Example:
Refer to:

Apply Font Properties To Control
Description:
Specifies if the control gets the font properties from the properties set in the form settings.
Allowed Values:
  • Selected - The control gets the font properties from the properties set in the form settings.
  • Deselected - The control does not get the font properties from the properties set in the form settings.
Default Value:
Deselected
Example:
Refer to:

Label CSS Class
Description:
Specifies a CSS class for the label of your control.
Allowed Values:
A valid CSS class.
Default Value:
None

If you specify your CSS CSS icon on the top menu, the CSS is populated.

Example:
Refer to:

Container CSS Class
Description:
Specifies a CSS class for the container of your control.
Allowed Values:
A valid CSS class.
Default Value:
None

If you specify your CSS CSS icon on the top menu, the CSS is populated.

Example:
Refer to:

Font Size (px)
Description:
Specifies the size of the input text and label for your form control.
Allowed Values:
An integer.

Range

  • Greater than 0
Default Value:
  • Classic theme - 12
  • Modern theme - 14
Example:
Refer to:

Behavior

Specifies how the control shows on your form.

Figure: Behavior tab

Behavior tab

Fields

Field NameDefinition

Visible
Description:
Specifies if the runtime app user sees the field.
Allowed Values:
  • Selected - The runtime app user sees the field.
  • Deselected - The runtime app user does not see the field.
Default Value:
Selected
Example:
Refer to:

Label Position
Description:
Specifies the position of the text label that shows on your form for the control.
Allowed Values:
  • Inherit - The position of the label is as specified in the form settings.
  • Left - Specifies that the position of the label is to the left of the container.
  • Top - Specifies that the position of the label is to the top of the container.
Default Value:
Inherit
Example:
Refer to:

Advanced

Specifies advanced settings for your form control.

Figure: Advanced tab

Advanced tab

Fields

Field NameDefinition

Field ID
Description:
Shows an ID of the control.
Allowed Values:
Read only.
Default Value:
Different for different controls.
Example:
Refer to:

Maximum Height (px)
Description:
Specifies the maximum height for your control in pixels.
Allowed Values:
An integer.

Range

  • 1-9999
Default Value:
300

Allow Import From Excel or CSV
Description:
Specifies whether to show the Import option at runtime so the runtime app user can import data from a Microsoft Excel or CSV file.
Allowed Values:
  • Selected - Shows the Import button at runtime, and runtime app users can import data.
  • Deselected - Hides the Import option at runtime, and runtime app users can not import data.
Default Value:
Deselected
Limitations:

This field is available in these releases:

Export as CSV
Description:
Specifies if an Export as CSV button shows on the form control This button exports the data grid to a file in .csv format.
Allowed Values:
  • Deselected - The Export as CSV button is not shown.
  • Selected - The Export as CSV button is shown.
Default Value:
Deselected

Filter Columns To Export
Description:
Specifies whether the Columns To Export screen lets the runtime app user select columns to include or exclude when they export the data from the Data Grid form control in .csv format at runtime.
To Open this Field:
  1. In the Advanced tab, select Export As CSV.
Allowed Values:
  • Selected - Shows the Columns To Export screen to select the columns when the runtime app user exports the data from the eForm.
  • Deselected - Exports the data in .csv format from all columns in the Data Grid form control, and does not show the Columns To Export screen.
Default Value:
Deselected
Limitations:

This field is available in these releases:

Enable Filtering
Function:
Specifies whether to show the filter icon at runtime where the form user can specify a condition to filter the column.
Allowed Values:
  • Selected - Shows the filter icon at runtime to where the form user can specify a condition for the column filter.
  • Deselected - The user can not filter the column.
Default Value:
Deselected
Limitations:

AgilePoint NX OnDemand (public cloud), or AgilePoint NX PrivateCloud or AgilePoint NX OnPremises v7.0 Software Update 2 or higher.

Persist Filtering
Function:
Specifies whether to store the filters applied to the columns in the Data Grid form control at runtime, so the app can use it in all subsequent times the eForm loads.
Allowed Values:
  • Selected - Stores the filter condition applied to the columns in the Data Grid form control.

    When a runtime app user opens the eForm next time, the filters are applied to the columns by default.

  • Deselected - Does not store the filters for the columns. The next time the form opens, it shows the default column view
Default Value:
Deselected
Example:
Refer to:
Limitations:

This field is available in these releases:

Enable Order Columns
Function:
Specifies whether the runtime app user can change the order of the columns in the Data Grid form control at runtime.
Allowed Values:
  • Selected - The runtime app user can change the order of the Data Grid columns.
  • Deselected - The Data Grid column order is fixed, and the runtime app user can not change the order.
Default Value:
Deselected
Example:
Refer to:
Limitations:

This field is available in these releases:

Persist Columns Order
Function:
Specifies whether to store the column order selected for the Data Grid form control at runtime, so the app can use it each time the eForm loads.
Allowed Values:
  • Selected - Stores the column order selected for the Data Grid form control.

    When a runtime app user opens the eForm the next time, the eForm shows the columns in the order selected in the last session.

  • Deselected - Does not store the column order selected for the Data Grid form control.

    The eForm shows the columns in the order the same as the first time the eForm was loaded.

Default Value:
Deselected
Example:
Refer to:
Limitations:

This field is available in these releases:

Page Size
Description:
Specifies size of the field on your form.
Allowed Values:
An integer.
Default Value:
10

Data Security Settings
Description:
Specifies whether to store information from the field in the process schema, so the app can use it again, or to simply pass on the information after the form is submitted without storing the information. This option helps to protect sensitive user information.
Allowed Values:
  • Persist - Stores the data from the field in the process schema, so the app can use it again.
  • Do Not Persist - Does not store the data from the field in the process schema. This option provides greater security for sensitive user information.
Default Value:
Persist
Example:
Refer to:

Show On Tablet Devices
Description:
Specifies if the form field shows on a tablet.
Allowed Values:
  • Selected - The form field shows on a tablet.
  • Deselected - The form field does not show on a tablet.
Default Value:
Selected
Example:
Refer to:

Show On Mobile Phone Devices
Description:
Specifies if the form field shows on a mobile device.
Allowed Values:
  • Selected - The form field shows on a mobile device.
  • Deselected - The form field does not show on a mobile device.
Default Value:
Selected
Example:
Refer to: