- Introduction to WorkXpress
- Building Your Application
- Examples and Best Practices
- Technical Manual
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.
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.
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.
You can choose to modify every field grid in your application by selecting forms of the type, Field Grid, or e338:
[code].wx_layout[data-wx_layout_type=“e338”][/code]
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.
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]
Header | |
---|---|
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 | |
---|---|
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 |
Footer | |
---|---|
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.