Layouts: Field grid setup
Summarize
Summary of Layouts: Field grid setup
A field grid in ServiceNow allows you to collect multiple fields within a single layout arranged in a matrix format. Unlike field sets, field grids support referencing other rows and enable users to input repeated sets of information efficiently. This layout is ideal when you require a predetermined number of repeated entries with inter-row relationships.
Show less
Field grids can expand horizontally (columns) or vertically (rows), and each grid is composed of fields defined and associated with a blueprint. The Matrix Loader tool facilitates defining these fields for the grid.
Field grid layout setup
To implement a field grid in a layout, you do not need a column set because the field grid itself manages rows and columns. Instead, three row types must be configured in the layout CSV file:
- fieldgrid: Declares the use of the field grid in the layout.
- fieldgriddata: Represents each column within the field grid.
- field: Represents each cell in the field grid (not each row).
Note that individual cells cannot contain both a label and an input field simultaneously; only the input field is included in the layout.
Field grid UI controls
The layout CSV file’s value field allows customization of various UI aspects of the field grid:
- Gridline visibility: Control grid lines display with options like all, horizontal, vertical, or none (default is all).
- Dynamic column headers: You can set headers dynamically using the
fieldIndexproperty onfieldgriddataelements. - Field grid width: Adjust widths of columns or the entire grid using CSS units (e.g., px, vw, calc). Specifying any width changes the grid’s width mode to auto for precise control.
- Maximum height: You can set a maximum height in pixels for the grid layout.
- Index display: Configure whether index numbers and columns appear, and add optional strings before or after index numbers.
Practical application
Setting up a field grid enables ServiceNow customers to efficiently manage repeated data entry tasks in a structured matrix, enhancing data consistency and usability. By configuring the layout CSV with the appropriate row types and UI control values, customers can tailor the grid’s appearance and behavior to their specific use cases.
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.