Read-Only Grid Component

Function

a!gridField( label, labelPosition, instructions, helpTooltip, emptyGridMessage, data, columns, pageSize, initialSorts, secondarySorts, pagingSaveInto, selectable, selectionStyle, selectionValue, selectionSaveInto, selectionRequired, selectionRequiredMessage, disableRowSelectionWhen, validations, validationGroup, showWhen, spacing, height, borderStyle, shadeAlternateRows, rowHeader, accessibilityText, refreshAlways, refreshAfter, refreshInterval, refreshOnReferencedVarChange, refreshOnVarChange, userFilters, showSearchBox, showRefreshButton, showExportButton, recordActions, openActionsIn, actionsDisplay )

Accepts a set of data and displays it as read-only text, links, images, or rich text in a grid that supports selecting, sorting, and paging.

The a!gridField() function allows you to create a read-only grid in your interface to display data as rich text, links, images, buttons, tags, record actions, and progress bars. This grid component also supports searching, filtering, selecting, sorting, and paging.

From Design mode, you can quickly and easily set up a read-only grid by dragging and dropping the component into live view and selecting your grid's data source. You can choose from record type, query, variable, rule, or expression. When you choose a record type as your data source, you can reuse features configured on your record list such as user filters, record actions, and export to Excel. You can also use fields from related records to display data on the grid.

Although, Design mode allows for a easier and faster setup for your read-only grid, you can still use the a!gridField() function in Expression mode to customize and configure your read-only grid.

• To learn how to work with the read-only grid, see Configuring the Read-Only Grid.
• To organize editable inputs in a tabular layout, use an editable grid.

See also:

• a!recordData() Function
• a!queryEntity() Function
• Configuring the Read-Only Grid
• Grid Tutorial

Parameters

Name	Keyword	Types	Description
Label	label	Text	Text to display as the grid label.
Label Position	labelPosition	Text	Determines where the label appears. Valid values: ABOVE (default) Displays the label above the component. ADJACENT Displays the label to the left of the component. COLLAPSED Hides the label. The label will still be read by screen readers; see accessibility considerations for more information. JUSTIFIED Aligns the label alongside the component starting at the edge of the page.
Instructions	instructions	Text	Supplemental text about this grid.
Help Tooltip	helpTooltip	Text	Displays a help icon with the specified text as a tooltip. The tooltip displays a maximum of 500 characters. The help icon does not show when the label position is "COLLAPSED".
Empty Grid Message	emptyGridMessage	Text	Text to display in the grid when no data is available. Default is "No items available".
Data	data	recordType, List of Map and List of Dictionary, DataSubset, or PortalReportDataSubset	The data to display in the grid. Use a record type reference or a!recordData() to source your data from records and utilize records functionality, such as user filters and export. For other cases, you can use a query, such as a!queryEntity() with pagingInfo set as fv!pagingInfo to have the grid automatically manage paging. The function a!queryProcessAnalytics(), a Data Subset, a list of Dictionary, or an array of data can also be used. When using a query that returns a datasubset, you must pass the total count (fetchTotalCount: true on the query).
Columns	columns	List of a!gridColumn()	The columns to display in the grid, configured using a!gridColumn().
Rows to Display Per Page	pageSize	Number (Integer)	The maximum number of rows to display at a time. Default: 10
Initial Sorts	initialSorts	List of SortInfo	Sorts applied to the grid upon initial load only. Each sort is applied in the order listed. The first sort in the list will display an active-sort arrow indicator (either up or down for ascending or descending) in its corresponding grid column (if applicable).
Secondary Sorts	secondarySorts	List of SortInfo	Sorts applied to the grid after every user interaction. If the user activates a sort on a column, these sorts will be applied to the other columns in the order they're listed. For example, adding a secondary sort on Month will keep them in order when the user sorts on Year. Secondary sorts do not display an active-sort indicator.
Paging Save Into	pagingSaveInto	List of Save	One or more variables that are updated only when user invokes a paging action on the grid. You can reference the current paging of the grid using fv!pagingInfo.
Selectable	selectable	Boolean	Determines if grid rows are selectable. When selection style is "CHECKBOX" (default), the selection column is displayed. Default: false.
Selection Style	selectionStyle	Text	Determines the style when a row is selected. Valid values: "CHECKBOX" (default), "ROW_HIGHLIGHT".
Selection Value	selectionValue	Text Array or Integer Array	Identifiers of the rows that should appear as selected. Can be set to have rows be pre-selected for the user. Supported types: Text Array and Integer Array.
Save Selection To	selectionSaveInto	List of Save	One or more variables that are updated with the selected identifiers when the user changes selections. Use a!save() to save a modified or alternative value to a variable. You can reference the rows selected and deselected in the most recent user interaction (not all selected or deselected rows) using fv!selectedRows and fv!deselectedRows respectively.
Selection required	selectionRequired	Boolean	Determines if a selection is required to submit the form. Default: false.
Selection Required Message	selectionRequiredMessage	Text	Custom message to display when a selection is required and not provided.
Disable Row Selection	disableRowSelectionWhen	Boolean	Determines for each row if selection is disabled. The condition defined in this parameter is evaluated once for each row. Reference fields from the source using dot notation, such as fv!row.status, or the identifier of the row using fv!identifier. Grids that use record data must use the recordType! domain to reference a record field or related record field. For example, fv!row[recordType!Case.fields.caseName]. Default: false.
Validations	validations	List of Variant	Validation errors to display below the grid when the data is invalid, configured using a!validationMessage(). You can reference the current page of data using fv!currentPage.
Validation Group	validationGroup	Text	When present, the requiredness of the field is only evaluated when a button in the same validation group is pressed. The value for this parameter cannot contain spaces. For example, “validation group” is not a valid value. You need to add an underscore between words: “validation_group”. See the following recipes for more information: Configure Buttons with Conditional Requiredness Validation Groups for Buttons with Multiple Validation Rules'
Visibility	showWhen	Boolean	Determines whether the component is displayed on the interface. When set to false, the component is hidden and is not evaluated. Default: true.
Spacing	spacing	Text	Determines the spacing within grid cells. Valid values: "STANDARD" (web default), "DENSE" (mobile default).
Height	height	Text	Determines height of the grid. Valid values: "SHORT", "MEDIUM", "TALL", "AUTO" (default). When it is set to SHORT, MEDIUM, or TALL, the header is frozen.
Border Style	borderStyle	Text	Determines the style of the grid border. Valid values: "STANDARD" (default), "LIGHT".
Shade Alternate Rows	shadeAlternateRows	Boolean	Determines whether alternate rows are shaded. Default: true.
Row Header	rowHeader	Number (Integer)	Index of the column to be used as the row header. Screen readers will announce the value in each row header when navigating to other cells within that row. Used only for accessibility; produces no visible change.
Accessibility Text	accessibilityText	Text	Additional text to be announced by screen readers. Used only for accessibility; produces no visible change.
Refresh Always	refreshAlways	Boolean	When true, grid data will be refreshed after each user interaction and each interval refresh. Default: false.
Refresh After	refreshAfter	List of Text String	Refreshes grid data each time a specified event completes. Valid values: "RECORD_ACTION".
Refresh After an Interval of Time	refreshInterval	Number (Decimal)	How often grid data gets refreshed in minutes. When null, grid data will not be refreshed on an interval. Valid values: "0.5", "1, 2", "3", "4", "5", "10", "30", and "60".
Refresh on Reference Variable Change	refreshOnReferencedVarChange	Boolean	When true, grid data will be refreshed each time the value of any variable referenced in the data parameter is updated. To refresh grid data when another variable that is not used in the data parameter changes, use refreshOnVarChange. Default: true.
Refresh on Variable Change	refreshOnVarChange	Any Type	Refreshes grid data each time any of these specific variables change. This allows you to refresh the grid data when a variable that is not referenced in the data parameter is updated. You can define a single variable (e.g. refreshOnVarChange: local!var1) or a list of variables (e.g. refreshOnVarChange: {local!var1, local!var2}).
User Filters	userFilters	List of Variant	List of user filter references to display, configured using the recordType! domain. For example, recordType!Case.filters.status. You may only reference user filters defined on the source record type used for the grid data. This parameter only applies when a record type is used as the source in the data parameter.
Show search box	showSearchBox	Boolean	Determines if the record search box should be shown. This parameter only applies when a record type is used as the source in the data parameter. Default: true.
Show Refresh Button	showRefreshButton	Boolean	Determines if the grid should include a refresh button to manually refresh data. This parameter only applies when a record type is used as the source in the data parameter. Default: true.
Show Export to Excel Button	showExportButton	Boolean	Determines if grid data can be exported. This parameter only applies when a record type is used as the source in the data parameter. Default: false.
Record Actions	recordActions	List of Variant	List of record action items to display above the grid, configured using a!recordActionItem(). If you use fv!identifier in the identifier parameter of a!recordActionItem(), you will also need to configure selection for the grid. This parameter only applies when a record type is used as the source in the data parameter.
Open Actions In	openActionsIn	Text	Determines how record actions should open to the user. Valid values: "DIALOG" (default), "NEW_TAB", "SAME_TAB".
Actions Display	actionsDisplay	Text	Determines which details are shown for record actions, regardless of style. Valid values: "LABEL_AND_ICON" (default), "LABEL", "ICON".

Usage considerations

Using read-only grids with record data

Consider the following when using a record type as the source of your read-only grid:

• Records-powered grids are not supported in portals:
  • In a portal, you can't use a record type as the data source for a read-only grid. Instead, use a query. See Working with Data in Portals to learn how to query data to display in your chart.
• Autopopulate a grid with a record list:
  • When a record type is used as the data source for your read-only grid, Appian automatically generates grid columns based on the columns configured for the record list.
• Use records-specific components:
  • You can add user filters, export to Excel, the out-of-the-box record list search, and record actions on your grid. When you add these components, the grid will automatically style the component header for you.
• Reference related data:
  • If you use a record type with data sync enabled as the source of your grid, you can also reference related record fields in your grid.
  • You can use related record fields in your columns, or to sort and filter the grid.
• Filter, limit, and sort related one-to-many data:
  • If you reference a related record field from a one-to-many relationship as a column in the grid, the maximum number of related records returned for each base record is 10.
  • To filter, limit, and sort the related record set returned from the one-to-many relationship, you can leverage the relatedRecordData parameter in a!recordData().
  • Avoid using relationship references to display related one-to-many data. Instead, you should only reference the specific related record field you want to display. This avoids querying more data than necessary, which can impact the grid's performance and export behavior.

  For example, to display a list of cases associated with each customer, you should use the related record field reference recordType!Customer.relationships.cases.fields.title in the grid column. You should not use the relationship reference recordType!Customer.relationships.cases.

Configuring grid display

• If the Value for a column is empty or null, the grid still renders the column with just the label.
• The selectionStyle of ROW_HIGHLIGHT does not have any visual indicator when selection is disabled through the disableRowSelectionWhen parameter.
• For accessibility purposes, every grid should have a row header configured. The first column containing text is usually the correct choice for row header. See the SAIL Design System for more information.

Configuring grid paging

• To reduce clutter on smaller grids, the following happens:
  • No paging controls are displayed when all rows are on one page.
  • Paging controls to jump to the first or last page are not displayed when a grid has less than 3 pages.
• When a read-only grid is used offline, paging and sorting don't function and images won't render.
• If you are managing your own paging, you cannot pass a datasubset which has a paging configuration that uses a batch size of -1.
• When entering a query in the data parameter (either directly, or indirectly from a rule reference), the query must return the total count (fetchTotalCount: true).

Grid height and column width

• Grid heights behave as a fixed height on web but a maximum height on mobile.
• For columns using the "AUTO" width, each column's width is determined by the length of the longest value in that column.
  • See the read-only grid column component for more information on using the "AUTO" width.
  • For complete guidance on when and how to use column widths, see Column Widths.

Design Mode guidance

The following guidance applies when configuring a read-only grid in Design Mode. This guidance does not apply to grids that use a record type as the data source:

• The grid cannot use a query whose paging info contains a batch size of -1 from Design Mode.
• When setting up a grid, if you populate the data parameter from Design Mode, and let the grid manage the paging, the grid will automatically generate an initial set of columns in the order they appear.
  • When you use a local variable as the data source for the read-only grid, grid columns are not automatically generated.
• After initial columns have been generated, Appian will automatically update the grid with new columns to match any new fields you added to the data source. To trigger this behavior when using an indirect data source (from an expression or a rule), go to the data parameter and click Edit, then click OK.
  • If you have changed the arrangement of existing grid columns, new columns will not be automatically generated.
  • Columns will not be removed if the corresponding fields are removed from the source data. You will need to manually delete these columns.
• The initial values for automatically-generated columns are:
  • label : fv!row.<fieldname>, where the field name is converted to title case.
    • If the field name is in camel case, it will be split and converted to title case.
    • If the field name is too long, it will be truncated with elipses (...).
  • value : fv!row.<fieldname>
  • sortField : <fieldname> of the primary key
  • If the data type for the column value is numerical or date-based, then it will set align : "END".
  • If the data type for the column value is a decimal, then it will be wrapped in the fixed() function to two decimal places. Ex. value: fixed(fv!row.cost, 2).

Query editor guidance

The following notes apply when you use the query editor in Design Mode to configure a query and use it as the data source for your read-only grid:

• Appian will automatically use the value set for the query's batch size as the value for the grid's pageSize parameter.
• Appian will automatically use the value set for the query's sortInfo as the value for the grid's initialSorts parameter.

Examples

You can find example configurations of the grid at Configuring the Read-Only Grid and Grid Tutorial.

Feature compatibility

The table below lists this component's compatibility with various features in Appian.

Feature	Compatibility	Note
Portals	Compatible
Offline Mobile	Compatible
Sync-Time Custom Record Fields	Incompatible
Real-Time Custom Record Fields	Incompatible
Process Reports	Incompatible	You cannot use this function to configure a process report.
Process Events	Incompatible	You cannot use this function to configure a process event node, such as a start event or timer event.

Old versions

There are older versions of this interface component. You can identify older versions by looking at the name to see if there is a version suffix. If you are using an old version, be sure to refer to the corresponding documentation from the list below.

Old Versions	Reason for Update
a!gridSelection	The paging grid natively supports selection.
a!gridField_19r1	Now supports embedded queries, columns widths, and rich text.

To learn more about how Appian handles this kind of versioning, see the Function and Component Versions page.

Related Patterns

The following patterns include usage of the Read-Only Grid Component.

• Aggregate Data and Conditionally Display in a Chart or Grid (Reports, Charts, Query Data, Grids, Records): Aggregate data and conditionally display it in a pie chart or grid. In this pattern, we will calculate the total number of employees in each department and display it in a pie chart and a read-only grid. Then, we'll use a link field to conditionally display each component.

• Conditionally Hide a Column in a Grid (Grids, Conditional Display): Conditionally hide a column in a read-only grid when all data for that column is a specific value.

• Configure a Chart Drilldown to a Grid (Charts, Grids, Query Data, Records): Displays a column chart with aggregate data from a record type and conditionally shows a grid with filtered records when a user selects a column on the chart.

• Configure a Chart to Grid Toggle (Charts, Grids): Display a column chart with a toggle to display an alternate grid view of the data.

• Delete Rows in a Grid (Grids): Delete one or more rows of data in a read-only grid.

• Display Last Refresh Time (Auto-Refresh, Grids, Records): Display the last time the interface was updated, either based on a user interaction or a timer.

• Display Processes by Process Model with Status Icons (Grids, Images, Reports): Use an interface to display information about instances of a specific process model.

• Display a User's Tasks in a Grid With Task Links (Grids, Reports, Looping): Display the tasks for a user in a Read-Only Grid and allow them to click on a task to navigate to the task itself.

• Drilldown Pattern (Grids): The drilldown pattern allows users to select an item from a grid to see more details in place of the grid.

• Drilldown Report Pattern (Grids, Charts, Reports): The drilldown report pattern consists of a bar chart and column chart, which each drill down into a grid.

• Filter the Data in a Grid (Grids, Filtering, Records): Configure a user filter for your read-only grid that uses a record type as the data source. When the user selects a value to filter by, update the grid to show the result.

• Filter the Data in a Grid Using a Chart (Charts, Grids, Filtering, Records): Display an interactive pie chart with selectable sections so that a user may filter the results in a grid.

• Grid With Detail (Grids): The grid with detail pattern allows users to select an item from a grid to see more details next to the grid.

• Grid with Selection Pattern (Grids): This pattern is an example of good UX design for a grid that allows users to select items and easily view their selections when there are multiple pages of data. It also provides information on a common save behavior.

• Limit Grid Selection to One Row (Validation, Grids, Records): Limit the number of rows that can be selected to one.

• Limit the Number of Rows in a Grid That Can Be Selected (Validation, Grids, Records): Limit the number of rows that can be selected to an arbitrary number.

• More-Less Link (Grids, Rich Text): Use this pattern to keep grids with rows containing varying text lengths looking clean and uniform. This design also improves readability and the user experience by limiting the amount of text in the interface.

• Refresh Data Using a Refresh Button (Auto-Refresh):

• Save a User's Report Filters to a Data Store Entity (Grids, Smart Services, Filtering, Reports): Allow a user to save their preferred filter on a report and automatically load it when they revisit the report later.

• Searching on Multiple Columns (Grids, Filtering, Reports): Display a grid populated based on search criteria specified by end users.

• Show Calculated Columns in a Grid (Formatting, Grids, Records): Display calculated values in columns in a grid.

• Task Report Pattern (Grids, Filters, Process Task Links, Task Reports): Provides a simple way to create and display an Appian task report.

• Top Customers and Their Latest Order (Records, Reports, Grids): This pattern illustrates how to create a grid that shows the top paying customers, their latest order, and their total sum of sales.

• Use Links in a Grid to Show More Details and Edit Data (Grids): Allow end users to click a link in a read-only grid to view the details for the row, and make changes to the data. The data available for editing may include more fields than are displayed in the grid.

• Use the Write to Data Store Entity Smart Service Function on an Interface (Smart Services, Grids, Looping): Allow the user to publish several rows of data to a table through the a!writeToDataStoreEntity() smart service function.

Feedback