Displaying Repeating Forms

Description

Grids have three different formats.

  • "Tabular" - a multi-record view similar to a browse, view, or spreadsheet, which you have seen already.

  • "Columnar" - a single-record view that places the field labels to the left of the fields. You can modify the columnar style to display multiple records.

  • "Stacked Columnar" - a single-record view that places the field labels above the fields. You can modify the stacked columnar style to show multiple records.

 Creating a Columnar Grid

  1. Create a new grid based on the AlphaSports customer table.

  2. Display the Component Type page.

  3. In the Grid layout list select "Columnar".

 Select the Fields

  1. Display the Grid > Fields page.

  2. Select the "Customer_ID", "Firstname", "Lastname", "Company", "Bill_Address1", "Bill_State_Region", "Bill_Postal_Code", and "" fields and click to move them from the Available Fields list to the Selected Fields list.

  3. For the different fields, change the Row Properties > Row label values as follows.

    • 1. "Customer_ID" to "ID".

    • 2. "Firstname" to "First Name".

    • 3. "Lastname" to "Last Name".

    • 4. "Bill_Address1" to "Address".

    • 5. "Bill_State_Region" to "State".

    • 6. "Bill_Postal_Code" to "Postal Code".

  4. Select the "" field. Click to move it to the top of the Selected Fields list.

  5. Select each of the fields in the Selected Fields list.

    • 1. Change the Label Properties > In-line style field to "width: 1in;".

    • 2. Change the Row Properties > Row label in-line style field to "width: 1in;".

 Setting Columnar Grid Properties

The following example produces a 3 by 3 grid with 9 forms. If the grid is not going to allow the user to enter new records, and you want a neat rectangular array, the Rows of data property must be even divisible by the Repeating columns property.

  1. Display the Grid > Properties page.

  2. Change the Layout Options > Repeating columns to 3.

  3. Change the Layout Options > Rows of data to 9. These two changes causes the display of a 3 by 3 grid of forms.

  4. Change the Layout Options > Font size to "Smaller".

  5. Open the Style list and select "Arizona".

  6. Click the 'disk...' icon to save the component as "AlphaSports_Customer_Grid_2".

  7. Click Close to close the Grid Builder.

  8. Click New > Web Page (A5W) to display the HTML Editor.

  9. Click save and name the page "AlphaSports_Page_2".

  10. Click Insert Component.

  11. Click Select, select the "AlphaSports_Customer_Grid_2" and click OK > OK.

 Preview the Grid

Click the 'lightning' icon to preview the grid in your browser. It should look something like this.