versago:form_layout

Layout Basics

The basic form layout process consists of adding rows to the form and then placing “controls” in the rows. See the Managing Rows section to understand how rows can be used and the Form Controls section to understand how controls are defined in the form.

Layout Area

The basic layout area is shown in the image below. Note that the buttons shown (Save and Closer, Save and New, etc…) are for actions when the form is used, not for saving changes to the form.

Controls and Fields Area

In addition to the basic layout area, the tools to select controls and database fields to add to the form layout are found on the right side of the page. There are two (or three) tabs available.

The form controls tab lists the various types of controls (associated with the fields) that can be used in the form. An explanation of the various controls is found here.

The database fields tab(s) list the columns in the associated database tables that can be used in the form. If the form type is Header/Detail, there will be two Database Fields tabs: Database Fields (Header) and Database Fields (Detail).

Control Buttons

  1. [Back] returns to the Form Setup page. Changes on the current page are not lost.
  2. [Save] saves the configuration information on the page, plus any changes made on the Form Setup page, to the database. The Form Layout page remains open for additional work.
  3. [Save & Close] saves the configuration information on the page, plus any changes made on the Form Setup page, to the database. The layout page is closed, and the Form List page is presented.

Managing Rows

Rows are the vertical elements of a form. A form can have as many rows as needed and each row can have up to twelve (12) columns to hold form field elements.

Adding Rows

Form rows are added using the tool at the top of the layout area.

  1. Enter/select the number of rows to be added.
  2. Enter/select the number of columns in the row(s).
    1. All new rows will have the same number of columns.
    2. Add rows individually if they need different numbers of columns.
  3. Click [OK].
    1. Additional rows are added after existing rows.

Updating Rows

Existing form rows can be modified using the tool at the top of the layout area. Changes include:

  • Change the number of columns in the row
  • Change the width relationships

  1. Click the [Edit Row] icon at the right-hand end of the row to be updated.
  2. Enter/select the number of columns to add or remove from the selected row. The current number of columns is automatically entered when the row is selected.
  3. Change the column width values as needed. The current value is automatically entered when the row is selected. This process is described below.
  4. Click the [Update Row] button. The new column settings are reflected in the row.
    1. A warning dialog is presented if the number of columns defined is less than the current number.

Column Width

When updating a row with more than one column, a field named “Column Widths” is displayed.

The numbers separated by commas show the number of columns in the row. The value of the numbers represent the relative size of each column in relationship to a base value of 12. By adjusting the value of the numbers, you can change the size of the columns in the selected row. Regardless of the number of columns in a row, the width values must add up to 12.

For example, using the setting in the image above the row will have four columns of the same width. If the setting were changed to 2,2,2,6 the row will have three “small” columns and one “large” column at the right end. Conversely, if the setting were changed to 6,2,2,2 the row will have one “large” column to the left followed by three “small” columns. Feel free to experiment with column widths so that they match the size of the data being captured.

Inserting Rows

Additional form rows can be inserted into an existing layout using the tool at the top of the layout area.

  1. Click the [Edit Row] icon at the right-hand end of the row above the point where you want to insert a new row.
  2. Enter/select the number of columns in the new row.
  3. Change the column width values as needed. This process is described earlier in this document.
  4. Click the [Insert Row] button.
  5. The new row is added below the current row.
  6. Only one row at a time can be inserted using this process.

Deleting Rows

Existing form rows can be removed (deleted) using the tool at the top of the layout area.

  1. Click the [Edit Row] icon at the right-hand end of the row to be deleted.
  2. Click the [Delete Row] button and confirm the deletion.
  3. Any data fields associated with controls still in the row are released for use elsewhere.
versago/form_layout.txt · Last modified: 2019/08/01 12:18 (external edit)