Layouts: Field grid setup
Summarize
Summary of Layouts: Field Grid Setup
A field grid is designed to collect multiple fields in a layout that allows for referencing of other rows, unlike a set. This matrixed layout is beneficial for requesting repeated information efficiently, enabling users to create tables of repeated values with flexible columnar or row expansion.
Show less
Key Features
- Field Grid Types:
- fieldgrid: Indicates the use of a field grid in the layout.
- fieldgriddata: Represents each column in the field grid.
- field: Required for each cell in the grid layout.
- UI Controls: Modify various UI aspects by updating the value field in the layout CSV file, including gridline visibility, dynamic column headers, and field width.
- Fieldgrid Elements: Additional configurable options include index visibility and maximum height.
- Fieldgriddata Elements: Options for setting field headers and widths, affecting the overall grid layout.
Key Outcomes
By implementing field grids, ServiceNow customers can effectively manage and display repeated data in a structured manner. This setup enhances data entry efficiency and improves user experience by allowing for dynamic adjustments to the layout based on specific requirements.
A field grid collects multiple fields in a single layout, but unlike a set, it can reference other rows.
A field grid presents numerous fields in a matrixed layout. These are helpful when you need to request the same set of information a predetermined number of times. Field grids allow users to create a table of repeated values. In a field grid, rows can reference other rows, while in a set a user cannot write rules between indexes.
Field grids can expand in columnar or row direction (that is, horizontally or vertically).
Define all fields that are intended to be displayed in the field grid. Matrix Loader is a good tool for this. Associate the fields with the blueprint in which they will be used.
Field grid layout setup
To add a field grid to the layout, a column set is not needed because the field grid creates the rows and columns. Instead, the following row types are needed:
- fieldgrid: this type tells the layout that a field grid will be used in the layout
- fieldgriddata: this type is used for each column of the field grid
- field: this type is needed for each cell in the field grid (not each row)
The first three images show the CSV file. The last image shows the corresponding user layout. The numbers above align with the numbers in the images below. (Because number 3 is shown several times, a letter is added for clarity.) Individual cells in the field grid cannot have both a label and an input field. Note that by 3C, both a label and input field are added to the layout CSV file. However, only the input field goes in the layout.
Field grid UI controls
Various aspects of the field grid UI can be controlled by updating the value field in the layout CSV file:
- Gridline visibility
- Dynamic column headers
- Field grid field width
Fieldgrid elements
The following values can be added to the value column of fieldgrid elements:
- indexPre: String value to be displayed in the index column before the index number. optional
- indexPost: String value to be displayed in the index column after the index number. optional
- indexVisible: true | false, whether to display the index number and column in the field grid layout. Optional, default: true
- maximumHeight: Maximum height to set in CSS px. I.e. "180px". optional
- gridlines: all | horizontal | vertical | none, control how grid lines are displayed between cells. Optional, default is all.
Fieldgriddata elements
The following values can be added to the value column of fieldgriddata elements:
- fieldIndex: name of field to use for header value. Optional. If included, the label for the fieldgriddata element should be blank.
- width: width of the fields. Optional. If included, examples of valid value are auto, 300 (px are assumed here), 300px, 20vw, and calc(100% - 100px).
Field grids default to 100% width, but if even one width value is specified for a contained fieldgriddata component, the field grid’s width will change to auto so that a specified width can be applied.