====== Field Grid ======
A field grid is a type of [[Form|form]] in WorkXpress. The purpose of a field grid is to contain and display [[Field|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|presentation layer]] is displayed, clicking on one of the blue plus icons ({{:interface-layer:form-plus.png?nolink|}}).
===== Features =====
Field grid features can be edited by clicking on the blue field grid icon ({{:grid.png?nolink|}}) when the [[Presentation Layer|presentation layer]] is displayed.
==== Header Bar ====
  * [[Form Setting - Title|Title]]
  * [[Form Setting - Display Alternate Header Text|Display Alternate Header Text]]
  * [[Form Setting - Form Icon|Form Icon]]
  * [[Form Setting - Hide Title Bar|Hide Title Bar]]
  * [[Form Setting - Hide Title Bar Background|Hide Title Bar Background]]
  * [[Form Setting - Hide Form Background|Hide Form Background]]
==== Expand/Contract ====
  * [[Form Setting - Allow the Form to Be Collapsed|Allow the Form to Be Collapsed]]
  * [[Form Setting - Start Collapsed|Start Collapsed]]
  * [[Form Setting - Remember Collapsed Setting by User|Remember Collapsed Setting by User]]
==== Sizing Settings ====
  * [[Form Setting - Max Height|Max Height]]
  * [[Form Setting - Form Width|Form Width]]
==== Tooltip ====
  * [[Form Setting - Tooltip|Tooltip]]
==== Autorefresh ====
  * [[Form Setting - Refresh Form Every X Seconds|Refresh Form Every X Seconds]]
==== Block Association ====
  * [[Form Setting - Temporary Block Association|Temporary Block Association]]
  * [[Form Setting - Traversal Type|Traversal Type]]
==== Grid Columns ====
  * [[Form Setting - Number of Columns|Number of Columns]]
==== Save and Add Options ====
  * [[Form Setting - Allow Form to Be Saved Independently of the Page|Allow Form to Be Saved Independently of the Page]]
  * [[Form Setting - Use Alternate Button Text for Save|Use Alternate Button Text for "Save"]]
  * [[Form Setting - Use Alternate Button Text for Add|Use Alternate Button Text for "Add"]]
  * [[Save and Add Behavior|Save and Add Behaviors]]
===== 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 [[http://w3schools.com/css/default.asp|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:

[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.

====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]

|< 50% 50% >|
^  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 |

|< 50% 50% >|
^  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 |

|< 50% 50% >|
^  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 |

|< 50% 50% >|
^  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 [[https://docs.google.com/spreadsheet/ccc?key=0An7VT2cYp9HLdHhBNWpyWlhZNlhEVDFLbEVCLTloQmc&usp=sharing|full, working list, of CSS Selectors]] on Google Drive.