Skip to main content

Graphical User Interface (GUI)

Last updated 14/04/2022

Five's Form Wizard Design Pattern

Five's Form Wizard is a custom form conveying progress through several steps in a logical process that allows you to input information in a prescribed order. Subsequent steps will depend on information entered in previous steps. The wizard has been designed to be a quick and easy method of creating forms that allow for validation, as when any steps are overlooked, Five will not permit you to save the form and will return you to the necessary sections that need completion. Five will generate a lot of definitions in the Form Wizard that you set at the table-level.

After you create a form with Five's Form Wizard, you can then modify or delete objects by selecting the record in the list and using the form.

Five's Form Wizard GUI

The Form Wizard is divided across two pages. To navigate between the two pages use the Previous and Next buttons positioned below the wizard app bar.

The first page is divided into the following sections.

  • General
  • Menu
  • Pages

First Page of the Form Wizard
Figure 1 - Form Wizard's first page


The second page will list all the fields from your selected table. The fields will have their predefined definitions that were set at the table-level, these definitions are editable.


Second Page of the Form Wizard
Figure 2 - Form Wizard's second page

General

The General section is for you to select the table that will store the data collected from your form.


General Section
Figure 3 - General section

The General section consists of the following fields.


FieldDescription
Main TableSelect the table holding the fields required for your form. All the tables in your database will be available in the lookup list.
Dependent TableSelect the dependent table holding the fields required for your form. This field will only become active after a main table has been selected. Only tables with a dependent relationship will be available in the field's lookup list.
NameGive your form a name. Five will populate the field with the same value as the Table field in a plural form on the first instance.
Action IDUniquely identify your form. Five will populate the field with the same value as the Name field on the first instance.
Page NavigationSelect how your users will navigate through your form. Default: Top.

The Menu section is where you can specify whether the form requires a menu item and if it should be positioned under a parent menu.


Menu Section
Figure 4 - Menu section

The Menu section consists of the fields listed below.


FieldDescription
Add Menu ItemAdd a menu item for the form. Default: true
CaptionGive your menu item a caption. Five will populate the field with the same value as the General's section Name field on the first instance.
Parent MenuSelect a menu item to become the parent for the current menu item. All the menu items saved in Five will be available in the field's lookup list.

Pages

The Pages section is for you to divide your form over different pages.


Pages Section
Figure 5 - Pages section

The Pages section consists of the fields listed below.


FieldDescription
TypeSelect the type of page. Options - Form, List, Join, or Action.
ActionSelect the action to reference for the page. This field will only be available with the page type selection of List, Join, or Action.
CaptionGive your page a caption.

Fields General

Your field properties will be defined on the second page of the wizard. The majority of the field properties will be populated by Five. All of these properties are editable to suit your requirements. You can perform the following here:

  • Remove fields.
  • Add fields not attached to the database.
  • Reorder fields.
  • Reference other forms.
  • Select a dependent field.
  • Edit captions and display types that have been carried through from the table-level.
  • Select if a field is to be required, read-only and/or included in the list.

Fields General Section
Figure 6 - Fields General Section

The Fields General section consists of the fields listed below.


FieldDescription
FieldSelect the table field name.
CaptionGive your field a caption.
Display TypeSelect how you want to display the data in your end-user application.
ReferenceSelect a form to reference. For Five to populate this field the referenced form will need to be saved in Five first.
DependentSelect a field from the current form on which this field will be dependent. This field will be reset if the field on which the current field is dependent changes.
Required (Req).Select to make the field required.
Read-Only (RO)Select to make the field read-only.
ListSelect to include the field in the list.

App Bars

There are two app bars. The list app bar is located above the list of records. The Form Wizard app bar is located at the top of the wizard.

List App Bar

The list app bar holds the following buttons and functionality.


ButtonDescription
FilterFilter by a field with a display type of _Text, _Integer, _Float, or _Boolean.
Search BarStart typing to reduce the list of records in the list.
New Form WizardA new Form Wizard is made available.
Add ItemA new form is made available.


List App Bar
Figure 7 - List app bar

Form Wizard App Bar

The Form Wizard app bar holds the following buttons.


ButtonDescription
CancelCancel all changes and remove the Form Wizard.
SaveWill become available when editing has been performed in the wizard and will save all changes.
NextLocated just under the app bar and will navigate you to the next page of the wizard.
PreviousLocated just under the app bar and will navigate you to the previous page of the wizard.


Form App Bar
Figure 8 - Form Wizard app bar

Default Settings

Five predefines several properties in the Form Wizard to help you quickly create a form. You can edit these properties in the wizard either by typing new entries in the fields, using the lookup icons in the fields, or selecting the checkboxes. The following information will provide you with an overview of Five's default settings.

On selecting a table in the Main Field the following fields will be populated.

Page One


FieldDefault Setting
NameThe field will be populated with the plural form of the specified main table's name. Exception, a dependent table is selected then the Name field will populate with the plural form of the specified dependent table's name.
Action IDThe field will be populated with the same value as the Name field. Whitespace and symbols will be removed.
Page NavigationDefault is Top.
Add Menu ItemDefault is true.
PagesThe initial page of your form is captioned General and is defined as a Form Page type.


info

You can edit the caption of the first page, however, it must keep the default of Form as its type.


Page Two


FieldDefault Setting
CaptionThe field will populate with the same name as the field in the table. Five will insert a space between any capitalized words.
ReferenceIf a form has previously been saved in Five that the current form references, the field will populate with the reference form name.
Required (Req)The first field will default to required.
ListThe first field will default to be included in the list.

Properties Carried Through From the Table-Level

Five carries through several properties defined at the table-level. The following documentation will provide you with an overview of the properties that are carried through from the table-level. These values are editable.


FieldDescription
FieldThe name and the order of the table field will be carried through to the Fields field.
Display TypeThe Display Type field will inherit the default display type defined at the table-level. If no default display type was defined at the table-level, Five will populate the field with the most appropriate display type based on the data type defined at the table-level.


danger

If a field is set to required at the table-level and you set this field to not required at the form-level, the table-level definition will take precedence.


Editing With the Form Wizard

The wizard is designed to create forms quickly and easily, for this reason not every capability is available in the wizard. You may need to edit the record after saving to add extra features and functionality not available. Editing can be performed by selecting the Form record in the list and clicking the Edit button in the form app bar.


Edit a Form Record
Figure 9 - Edit a Form record