Field Grid

A field grid is a type of form in WorkXpress. The purpose of a field grid is to contain and display fields, usually about one record.

How to Create

Field grids are created in one of two ways: either clicking the “Forms” button in the left hand palette and then dragging the Classic Forms button over the page's background, or, when the presentation layer is displayed, clicking on one of the blue plus icons ().


Field grid features can be edited by clicking on the blue field grid icon () when the presentation layer is displayed.

Header Bar


Sizing Settings



Block Association

Grid Columns

Save and Add Options

CSS Selectors

The CSS Skin Builder, accessible in any Build environment by clicking Handbook, then CSS Skin Builder under the Tools header allows you to customize the appearance of forms in virtually any way imaginable provided a basic understanding of CSS.

The CSS Selectors for forms are, generally, 2 parts: Which forms to modify, and what to modify in the form.

Which forms to modify:

You can choose to modify every field grid in your application by selecting forms of the type, Field Grid, or e338:


You can also choose to modify just a specific field grid in your application by selecting that form in particular:

[code].wx_layout[data-wx_layout_id=“FORM ID”][/code]

You can find the form ID by hovering over the form's control point for editing it, it will start with an a, for example a2012034.

What to modify in the form

Add these modifiers after the .wx_layout definition for which forms to modify to select a particular part of a form.

For instance, to modify the Icon/Text Area on the left in the header bar of every field grid form, you could use:

[code].wx_layout[data-wx_layout_type=“e338”] > .wx_layout_title_bar .wx_layout_title[/code]

Container Div - Wrapper > .wx_layout_title_bar
Container Div - Middle Wrapper > .wx_layout_title_bar > .wx_layout_title_bar_middle_wrapper
Container Div - Inner Wrapper > .wx_layout_title_bar .wx_layout_title_bar_inner_wrapper
Icon/Text Area on the left > .wx_layout_title_bar .wx_layout_title
Button Area on the Right > .wx_layout_title_bar .wx_layout_title_container .wx_field_data
Collapsing tool
Foreground Open > .wx_layout_title_bar .wx_collapser .wx_collapser_foreground
Foreground Closed > .wx_layout_title_bar .wx_collapser.wx_closed .wx_collapser_foreground
Background Open > .wx_layout_title_bar .wx_collapser
Background Closed > .wx_layout_title_bar .wx_collapser.wx_closed
Content Div > .wx_layout_content div.wx_content
Non-Required Label in both View and Edit Modes td.wx_field
Required Label in both View and Edit Modes td.wx_field.wx_required
Required Label in View Mode Only [data-wx_current_mode=“1”] td.wx_field.wx_required
Non-Required Data Area in both View and Edit Modes .wx_field_data
Required Data Area in both View and Edit Modes .wx_field_data.wx_required
Data Area Descriptive Text .wx_field_descriptive_text
Container > .wx_layout_content > .wx_layout_footer
Add Button > .wx_layout_content > .wx_layout_footer .wx_save_button
Save Button > .wx_layout_content > .wx_layout_footer .wx_save_button
Edit Button > .wx_layout_content > .wx_layout_footer .wx_edit_details

View the full, working list, of CSS Selectors on Google Drive.

form type - field grid.txt · Last modified: 2016/12/01 13:29 by kstennett
Copyright WorkXpress, 2023