Working with Forms

Within Zingy, a form represents a unique type of page specifically designed to engage users in data input and facilitate the editing of existing data. Its primary objective is to establish a seamless interaction between the user and the application, enabling efficient data manipulation and updates.

Normally a form is associated with a Database Table, but you can also create custom forms that are not attached to any specific database table. Examples for both of these cases is described below.

---

Demonstration

Video: Demonstration of forms.

The video above demonstrates a database attached form and a custom form, which are explained in more detail below.

---

Example Form with Database Table

In this example, we will be creating a form page and associate it with a database table named Employees.

This is done with the Table setting for the form by selecting the specific database table as shown below.

Form Settings: Database Table Selection

Database table fields

The image below shows the fields for the Employees database table. Please observe each field's type and sub-type.

Employees database table fields

Automatic Data Field Input elements

The page editor automatically creates data field input elements for all the fields in the associated database table. The following is a summary that outlines how the page editor employs the type and sub-type information of each field to determine the specific page element to be utilized for the data field input.

Field Type	Field Sub-Type	Element created
Text	any	Input element with Type set to Text.
Text	Multi-line	Multi-line element
Text	Multi-line HTML	Multi-line element with Rich Text turned on.
Text	Email	Input element with Type set to Email.
Text	Phone	Input element with Type set to Phone.
Text	Password	Input element with Type set to Password.
Text	List of Values	Dropdown element with options list set to the field's values.
Text	Files	Composite element that allows you to upload files.
Numeric	-	Input element with Type set to Number.
Numeric (decimals)	-	Input element with Type set to Number.
Date/Time	-	Composite element that allows you to select date and time.
Yes/No	-	Toggle Switch element
Large Numeric	-	Input element with Type set to Number.

The page editor will create the data field input elements in two different styles:

• Style1: where the field input elements are inside a Input Group
• Style2: where they are directly utilized.

Feel free to choose a style that gels with your app. The general functionality of the form is not affected by the style chosen.

For more information on database table fields, please see Database Tables.

Based on the information about the type and sub-type of the fields you will observe the following in the demonstration video:

• The First Name, Last Name fields will use an input element with type set to Text.

• The Notes field will use a multi-line element.

• The Department field will use a dropdown element.

---

Example Form with Custom Data

In this example, we will generate a custom form page that is not linked to any specific database table within your application.

This is done with the Table setting for the form by selecting Custom (No Table) option as shown below.

Form Settings: Custom

Custom fields

The page editor is capable of automatically generating data field input elements, even when utilizing the Custom (No Table) option. For this you will be need to define fields based on your custom requirement. The definition of each field is similar to the database fields where a type and sub-type is set along with any other required attributes.

Here we will use fields similar to the Employees database table used in the first example as shown below:

Form settings: Defining custom fields

Handling form submission

Our discussion on Page Flow blocks in this context is just a brief overview. For a more comprehensive understanding of Page Flow and its various blocks, we recommend referring to the dedicated Page Flow section, which delves into this topic and explores other blocks in greater detail.

When you have a form attached to a database table, the data submission is handled automatically. However, in the case of a custom form, you manage the submission manually through Page Flow.

The Form Events block allows you to handle various stages of a user interacting with your form. The submission for custom forms is handled via the Submit Tasks flow parameter where you can take some custom action with the data entered by the user and the mark whether the operation was successful or a failure via the Set Form Event Status block. You then signal that your custom processing is complete by using the Form Submit Complete block.

Handling custom form submission.

In the image above, the purple function block named sendFormDataToMyCustomPlace is an example placeholder function block used to indicate that you need do take some action on the data entered by the user.

---

Adding Custom Logic to Forms

Page Flow allows you to add custom logic to forms (database-attached and custom forms). The following listing shows some important Page Flow blocks that are related to forms. For a complete listing of all Page Flow blocks, please see Toolbox Blocks.

Form Events

Form Data

Set Form Event Status

Set Form Event Status Message

Form Submit Complete

Lock/Unlock Form

Reset Form

Save Form with Data

Set Field Input Value

Get Field Input Value

---

Using the Form

Please refer to the section Using Forms for more information.