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 ].

Figure 1 - Buys record

3. Select the { General record }.

Figure 2 - General record

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

Figure 3 - Open Form Designer button

5. 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.

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

Figure 4 - Stock field

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

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

Figure 5 - Transaction Date field

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

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

Figure 6 - Quantity field

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

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

Figure 7 - Price field

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

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

Figure 8 - Fees field

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

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

Figure 9 - Total field

17. Click the [ Save button ] in the [ Form Designer app bar ].

Figure 10 - Save your design

18. Click the [ Save button ] in the [ form app bar ].

Figure 11 - Save the Buys form