Skip to main content

Five's Form Designer

Last updated

Overview

The grid in Five's Form Designer is used for positioning and sizing fields for quick and consistent form creation.

Fields in the grid can hold all display types such as lookups, text, checkboxes etc along with any custom fields you may create.

In width, the grid holds twelve positions. By default, each new field is set a pre-width of two, a width of two, and a post-width of two.

Change the Layout of your Fields with Five's Form Designer

Exercise twelve will explain how to use Five's Form Designer. By using the Form Designer you will have the creative control over the layout of your form. All the fields you add to your form will be available in the Form Designer for you to change their position and size by dragging and dropping the fields.

The video below demonstrates how you can drag and drop fields in the Form Designer.


Edit the Buys Form to Change the Layout of the Fields

  1. Select the { Buys record } in the list ].

  2. Click the Pages tab ].


Buys Record
Figure 1 - Buys record

  1. Select the { General record }.

General Record
Figure 2 - General record

  1. Click the Open Form Designer button ] in the form app bar ] to open Five's Form Designer ].

Open Form Designer Button
Figure 3 - Open Form Designer button

  1. Click, hold, and drag the { Stock field } from the beginning edge to the left.

tip

You have to grab the inside edge of the field whenever you are dragging a field to enlarge or reduce.


  1. Click, hold, and drag the { Stock field } from the end edge to the left.

Stock Field
Figure 4 - Stock field

  1. Click, hold, and drag the { Transaction Date field } up to be beside the { Stock field }.

  2. Click, hold, and drag the { Transaction Date field } from the end edge to the left.


Transaction Date Field
Figure 5 - Transaction Date field

  1. Click, hold, and drag the { Quantity field } from the beginning edge to the left.

  2. Click, hold, and drag the { Quantity field } from the end edge to the left.


Quantity Field
Figure 6 - Quantity field

  1. Click, hold, and drag the { Price field } up to be beside the { Quantity field }.

  2. Click, hold, and drag the { Price field } from the end edge to the left.


Price Field
Figure 7 - Price field

  1. Click, hold, and drag the { Fees field } from the beginning edge to the left.

  2. Click, hold, and drag the { Fees field } from the end edge to the left.


Fees Field
Figure 8 - Fees field

  1. Click, hold, and drag the { Total field } up to be beside the { Fees field }.

  2. Click, hold, and drag the { Total field } from the end edge to the left.


Total Field
Figure 9 - Total field

  1. Click the Save button ] in the Form Designer app bar ].

Save Your Design
Figure 10 - Save your design

  1. Click the Save button ] in the form app bar ].

Save the Buys Form
Figure 11 - Save the Buys form