Introduction to the Advanced Grid

Grids are usually thought of as tables used for conducting surveys or multiple choice questionnaires. A popular example of a grid is a simple form asking customers for feedback:

Using key-value pairs (e.g., machine_readable_text|Human readable text), Site Managers can specify:

• Options that will appear across the first row
• Questions that will appear down the first column

Users can then provide feedback by clicking on the radio button that corresponds to their choice.

However, grids can also be used for more complex applications by allowing all types of webform components (not just radio select options) to be inserted.

---

Compact, well-formatted text-based forms

In this context, a text-based form is a form that mainly uses textfields and textareas.

Traditionally, Site Managers have placed labels above fields so that they align, making forms longer.

If labels are displayed inline, textfields and textareas will generally bump up right beside the label and will align poorly.

Grids can be used to contain form components so that labels and fields are displayed in separate cells.

---

How to format textfields and textareas using a grid

1. Create a grid.
   
   Add a single key-value pair under Options to provide a heading.
   
   
2. Make the other form components children of the grid.
   
   Place the textfields and/or textarea under and slightly to the right of the grid element.
   
   
   
   If the form is saved at this point, all the labels will be displayed in the left column of the grid, while the fields will be displayed in the right column.
   
   
   
   Note: For certain fields to appear in a single row, you can use a fieldset.
3. Create a fieldset.
4. Make the desired fields children of the fieldset.
   
   Place the textfields and/or textarea under and slightly to the right of the fieldset.
   
   
   
   
   The resulting form shows:
   
   • The label of the fieldset in the left-most cell
   • All of the textfields in one cell
   
   

---

Complex order forms in a single table format

The example below is an order form that enables users to customize their very own My Little Pony.

Because a grid can now contain other components, various fields can be included within one table. Furthermore, these fields would respond to conditionals and form validation.

Refer to the example above to see options for:

• Choosing a color for the pony’s:
  • Mane
  • Tail
  • Body
  • Eyes
• Making the pony a unicorn
• Choosing the pony’s markings
• Naming the pony
• Giving the pony a birthday
• Any special requests
• Providing an email address
• Uploading an image file

---

How to create complex order forms using a grid

The instructions below show how to recreate parts of the My Little Pony form in the previous example.

1. Create a grid:
   • Enter the key-value pairs for the five color choices under Options.
     • white|White
     • yellow|Yellow
     • light_blue|Light blue
     • fuchsia|Fuchsia
     • purple|Purple
   • Enter the key-value pairs for Mane and Tail under Questions.
     • mane|Mane
     • tail|Tail

   Note that Body and Eyes were excluded from the Questions.

   Each of the above needs to have a separate select options component because:

   • Body colour will need to be validated against another value, as you will soon see.
   • Eyes can neither be white nor yellow, and so will have less options.
2. Add a select option component labeled Body.
   • Enter the same five key-value pairs under Options:
     • white|White
     • yellow|Yellow
     • light_blue|Light blue
     • fuchsia|Fuchsia
     • purple|Purple
3. Add a select option component labeled Eyes.
   • Enter only the following three key-value pairs under Options:
     • light_blue|Light blue
     • fuchsia|Fuchsia
     • purple|Purple

   Saving the form at this point will display the select components for Body and Eyes lined up with the grid options for Mane and Tail.

   The Eyes select component only displays radio buttons for the Light blue, Fuchsia, and Purple, but not for White or Yellow.

   

   After specifying colors for the Mane, Tail, Body, and Eyes, users will be asked if they would like to make their Pony a Unicorn. If Yes, please. is selected…

   

   A new row for selecting the Horn color will display.

   
   

   If No, thank you. is the choice, the new row would remain hidden. This is done by using conditionals.

4. Add a select option component labeled Horn.
   • Enter key-value pairs for the five colour choices under Options.
     • white|White
     • yellow|Yellow
     • light_blue|Light blue
     • fuchsia|Fuchsia
     • purple|Purple
5. Add a select option component labeled Unicorn.
   • Enter the following key-value pair under Options:
     • yes|Yes, please.
     • no|No, thank you.
6. Add the following conditional:
   • If [Unicorn] [is][Yes, please.] then [Horn] [is][shown]
   

   After specifying whether they want horns and in which color, users are then asked what kind of markings they would like. If any choice besides -None- is made, another row for selecting the Marking color will appear.

   
7. Add a select option component labeled Marking color.
   As in step 4, a new select option with the five key-value pair options is created.
8. Add a select option component labeled Markings.
   • Enter the following key-value pair under Options:
     • spots|Spots
     • stars|Stars
     • hearts|Hearts
9. Add the following conditional:
   If [Markings] [is not empty] then [Marking color] [is] [shown]
   

   Since Marking color and Body have the same options, users should be prevented from specifying the same color, otherwise the markings will not be visible. This is done through Form validation.

10. Create a form validation rule.
    Go to Form validation and click on Unique values. Give the rule a name, and specify that Body and Marking color have to be unique by checking both.

    

    Should the user decide to choose the same Body color and Marking color, error messages notifying them that they did not make a unique choice will be displayed.

    

    Review the form and see that it’s possible to add any sort of component to a grid to create complex but compact forms.

    

---