4 - Create Forms

Last updated 2/05/2025

There are only two forms that we need to add to the Book Club application, however, the Users form supplied by Five will need to edited to add extra fields. The Users form was created automatically by Five when we turned the Book Club application a multiuser application.

While building the Book Club forms, you will learn the following:

• How to add forms with Five's Form Wizard
• How to edit forms with Five's form
• How to interact with the Users form automatically added by Five; and
• How to use Five's Form Designer

Navigate to the Form Wizard

1. Click Visual in the menu.

2. Click Form Wizard in the sub-menu.

Figure 1 - Form Wizard menu item

Add the Classifications Form

1. Click the lookup icon in the Main Data Source field and select Classification.

info

Five will give your form a name, an action ID, and a menu item, they are all the same as your table name but are pluralized. There is only one field in the Classifications form, so the form can be saved without going to the second page of the Form Wizard.

Figure 2 - Add Classifications form

2. Click the Save button in the Form Wizard app bar.

Figure 3 - Save button

Add the Books Form

1. Click the lookup icon in the Main Data Source field and select Book.

2. Click the Next button.

Figure 4 - Add Books form

info

On the second page of the Form Wizard is the Reference field, you can see Five has already made reference to the Classifications and Users forms. This is because the foreign relationships were created at the table-level, and the Users and Classifications forms are already saved in Five. These fields have a display type of _Lookup and Five will take the values from the first logical field included in the list in the referenced form and list the values in the lookup on the current form.

Any fields that were configured at the table-level as required will automatically be set to required at the form-level.

tip

A required field at the table-level will take precedence over a required field at the form-level. This means if you have a field set as required in the table but not on the form, the field will still be required to have a value!

3. Click the Cancel button in the Caption field for the BorrowMemberKey field and type Borrowed By.

4. Click the lookup icon in the Display Type field for the Title field and select BookTitle

tip

This is one of the custom display types you saved in the previous chapter!

5. Click the List checkbox for the MemberKey, Image, Title, and ISBN fields.

Figure 5 - Configure Books form fields

6. Click the Save button in the Form Wizard app bar.

Figure 6 - Save button

Edit the Books Form

While in the Form Wizard, you can only reference a form once because after you reference a form record, it is removed from the lookup in the Reference field. We need to edit the Books form record and make the Borrowed By field reference the Users form so we can get the names of our borrowing members in the lookup.

To edit a form record, you must select the record in the Forms view.

1. Click Visual in the menu.

2. Click Forms in the sub-menu.

Figure 7 - Forms menu item

3. Select the Books record in the list.

4. Click the Pages tab.

Figure 8 - Pages tab

5. Select the General record.

Figure 9 - General record

6. Click the Fields tab.

Figure 10 - Fields tab

7. Select the Borrowed By record.

Figure 11 - Borrowed By record

8. Either click the Edit button in the form app bar or click directly in the Reference Form field.

Figure 12 - Edit button

9. Click the lookup icon in the Reference Form field and select Users.

Figure 13 - Reference Form field

10. Click the Save button in the form app bar.

Figure 14 - Save button

11. Click the Save button in the form app bar above the list.

Figure 15 - Save button

Edit the Users Form

The Users form that Five adds into your multiuser application can be edited to suit your requirements.

We are going to add some fields to the Users form. These are the fields that we added into the iUser table and will be used for the Parcel Locker locations to know where a book is available to pick up.

warning

The Users form definition is defined by Five and you should not delete any of the fields configured by Five. You can add additional fields.

It is recommended that if you do not wish to show any of the fields on the Users form defined by Five, that you hide these fields.

1. Select the Users record in the list.

2. Click the Pages tab.

Figure 16 - Pages tab

3. Select the General record.

Figure 17 - General record

4. Click the Fields tab.

Figure 18 - Fields tab

5. Click the Add Fields button.

Figure 19 - Add Fields button

6. Click the lookup icon in the Field field and select AddressLine1.

7. Click the lookup icon in the Display Type field and select _Text.

8. Click the Save button in the form app bar.

Figure 20 - Add Address Line 1 field

9. Click the Add Fields button.

10. Click the lookup icon in the Field field and select AddressLine2.

11. Click the lookup icon in the Display Type field and select _Text.

12. Click the Save button in the form app bar.

Figure 21 -Add Address Line 2 field

13. Click the Add Fields button.

14. Click the lookup icon in the Field field and select Suburb.

15. Type

true

in the Include In List If field.

16. Click the lookup icon in the Display Type field and select _Text.

17. Click the Save button in the form app bar.

Figure 22 - Add Suburb field

18. Click the Add Fields button.

19. Click the lookup icon in the Field field and select State.

20. Type

true

in the Include In List If field.

21. Click the lookup icon in the Display Type field and select State.

22. Click the Save button in the form app bar.

Figure 23 - Add State field

23. Click the Add Fields button.

24. Click the lookup icon in the Field field and select PostCode.

25. Type

true

in the Include In List If field.

26. Click the lookup icon in the Display Type field and select _Integer.

27. Click the Save button in the form app bar.

Figure 24 - Add Post Code field

tip

You can reorder the field records in the list by clicking, holding, and dragging the handler at the beginning of each row!

28. Drag the Full Name record and place above the User ID field.

Figure 25 - Reposition Full Name field

29. Drag the Address Line 1 record and place under the Role field.

Figure 26 - Reposition Address Line 1 field

30. Repeat this for the Address Line 2, Suburb, State, and Post Code fields so they are positioned consecutively under each other.

Figure 27 - Reposition Address Line 2, Suburb, State, and Post Code fields

31. Click the Save button in the form app bar above the list.

Figure 28 - Save button

Design the Layout of the Books Form

Five has its own Form Designer that gives you the ability to redesign the layout of your form by repositioning and resizing fields. The Form Designer requires no code and you can create a different layout for a form for desktop and mobile.

You can also use the Pre Width, Width, and Post Width fields on the Display page. If you are manually setting the widths of your fields on the Display page, each row has 12 grid positions.

Guidelines to help you in the Form Designer:

• When dragging a field up or down, wait for the yellow line to appear below the field before dropping into position.
• When dragging a field to resize, position your mouse just on the inside of the field and wait until it changes to a drag handler before dragging.

1. Select the Books record in the list.

2. Click the Pages tab.

Figure 29 - Pages tab

3. Select the General record.

Figure 30 - General record

4. Click the Open Form Designer button.

Figure 31 - Open Form Designer button

5. Drag the Classification field below the Member field.

Figure 32 - Drag Classification field

6. Drag the edges of the Member and Classification fields to take the full width of the row.

Figure 33 - Resize Member and Classification fields

7. Drag the Borrowed By field below the ISBN field.

Figure 34 - Drag Borrowed By field

8. Drag the Title field to the row holding the UPLOAD IMAGE button.

Figure 35 - Drag Title field

9. Drag the edges of the UPLOAD IMAGE field to take the first five grid positions of the row.

10. Drag the edge of the Title field to take the rest of the row.

Figure 36 - Resize Upload Image and Title fields

11. Drag the edges of the Author, ISBN, and Borrowed By fields to take the full width of each row.

Figure 37 - Resize Author, ISBN, and Borrowed By fields

12. Click the Save button in the Form Designer app bar.

Figure 38 - Save button

13. Click the Save button in the form app bar.

Figure 39 - Save button