App Builder - Form Fields

You can add fields to your form and also rearrange them through simple drag and drop.

1. Select the Forms tab in Edit mode.
2. Drag and drop the required field type displayed on the left-side, to the form.

Refer the topic, Form Field Types for more information on each field type supported by Zoho Creator. For example, to add a "Multi Line" text field, drag and drop the multi line field type as shown below.

This will display the dialog where you specify the field Label Name and other optional configurations to the field.

Zoho Creator supports 20 types of form fields. The type of the field has to be specified while creating the form. If the field should contain only a date value, then choose the Date field type. If it is to contain a value out of a list of values, then choose a picklist. It you want the list also be be modifiable by users, then choose a import data field. To view the complete list of field types supported by Zoho Creator, refer the topic Form Field Types.

To modify the label name of a field,

1. Select the Form from the Forms Tab in Edit mode.
2. Place the mouse over the field to be edited
3. Select the Edit this Field option as shown in the screen-shot below:

4. In the Edit dialog, specify the new Label name.
5. Click Done to update the changes.

If you rename the field it will reflect only in the form and not in the view. To reflect the changes in the view, please follow the steps given below:

1. Select the View from the Views Tab in Edit mode.
2. Select the particular view from the View tab.
3. Click on Column Properties.
4. Rename the Display name for the field.
5. Click Done to save the changes.

Yes, you can set a field to be a required field in the form. Setting a form field to “Required”, forces the user to fill in the selected form field. If the user attempts to submit the form while a required field is blank, an error message appears with the field name and the form data is not submitted.

To set a form field as required while adding a field,

1. Drag and drop the required field to the form.
2. Click on Options.
3. Select the check box This is required field.

To set an existing field as required,

1. Select the Form from the Forms Tab in Edit mode.
2. Place mouse over the field to be edited.
3. Select the Edit this Field option. The edit dialog will be displayed with the current field configurations.
4. Select the checkbox This is required field.
5. Click Done to update the changes.

Yes, you can set a field to be unique. Setting a form field as unique will not accept any duplicate values for the field, while submitting the form.

To set a field as unique while adding a field,

1. Drag and drop the required field to the form.
2. Click on Options.
3. Select the checkbox No duplicate entries.

To set an existing field as unique,

1. Select the Form from the Forms Tab in Edit mode.
2. Place mouse over the field to be edited.
3. Select the Edit this Field option. The edit dialog will be displayed with the current field configurations.
4. Select the checkbox No duplicate entries
5. Click Done to update the changes.

Yes it is possible to provide tooltip for the fields in your form.

To add tooltip help while adding a new field,

1. Drag and drop the required field to the form.
2. Click on Options.
3. In the Instructions text area, type the text you want to display as tool tip.
4. Click Done to save.

To add tool-tip help to an existing field,

1. Select the Form from the Forms Tab in Edit mode.
2. Place mouse over the field to which you want to provide tool tip.
3. Click Edit the field.
4. In the pop up window, click on Options.
5. In the Instructions text area, type the text you want to display as tool tip.
6. Click Done to save.

You can view the tool tip by clicking Access this application.

You can use the Add Notes field type to type the required descriptions and place the field right below or above the Field you prefer. The Add Notes field is used to give Instruction as to how the Form is filled. Also refer FAQ - Add Notes.

Hiding a field in the form, will make the field accessible only to the author/owner of the application.

To set a field as hidden while adding a field,

1. Drag and drop the required field to the form
2. Click on Options.
3. Select the checkbox Hide this field to others
4. Click Done to update the changes.

To set an existing field as hidden,

1. Place mouse over the field to be edited.
2. Select the Edit this Field option. The edit dialog will be displayed with the current field configurations.
3. Select the checkbox Hide this field to others
4. Click Done to update the changes.

Note:

To hide a field when not required, use the Hide Deluge task. Refer Deluge Reference -> Client side functions -> Hide/Show for more information.

When a field has been placed in the form, it can only be changed to a related field type. For example, when you place a "Multi Select" field, it can only be changed as a "Check box" field type. The field will be filled with blank values when there is any mismatch between the old and new field types. To change a field type,

1. Place mouse over the field to be edited.
2. Select the Edit this Field option. The edit dialog will be displayed with the current field configurations.
3. Select the new field type from the Field Type list.
4. Click Done to update the changes.

Deleting a field will delete all the data corresponding to that field and it cannot be recovered. If a field is referred to in formula fields, or in other forms as an import field, or in view criteria/filters, Zoho creator will display a message with the details about the referenced fields. The field cannot be deleted unless the references are removed.

To delete a field,

1. Select the form and move the mouse over the field to be deleted.
   
2. Select the Delete this Field option. Zoho Creator displays a confirmation message before actually deleting the field.
   
3. Click OK to delete the field or Cancel to return back to the form without deleting.

To sort a picklist alphabetically,

1. Place the picklist field on the form.
2. In the "Adding " dialogue box click on Options.
3. Select the checkbox Show choices in alphabetical order.
4. Click Done to update the changes.

You can change the date format from the Application Settings dialog. To invoke this dialog, select the Settings link displayed in your Home page or the Application Settings link displayed in top-right corner, when you open your application in Edit mode.

Currently, Zoho Creator does not limit the number of lines or the number of characters that can be input into a Multiline field.

Use the <br> HTML tag to insert line breaks in field values.  For Multiline text fields, \n can be used in addition to <br> html tags. The Allow HTML Tags (option available in More Actions -> Application Settings dialog) must be set to Yes, to execute the HTML tags. 

Use the LookUp field type, to import data from a field in one form to another form. Refer FAQ -> Forms -> Create relationship between Forms, for more information.

You can use the Set Criteria option in lookup fields to restrict the entries that will be displayed in the lookup field, based on a given criteria. Let us take the example of the Library Manager application, which consists of the following forms:

1. Book form with the fields (Name, Author, Status). The Status field can have one of the following values 'Available' / 'Issued'
   
2. IssueBook form with the fields (BookName, IssueDate and IssuedTo). Here, the field 'BookName' is a look up to the 'Name' field of 'Book' form.

   By default, the field 'BookName' in 'IssueBook' form will display all the books present in the 'Book' form. But our requirement will be to list only the books with Status as 'Available' in the 'BookName' picklist field. We can easily achieve the above requirement by giving the following criteria for the look up field 'BookName'. In the screen-shot given below, the deluge criteria Status="Available", is added to the BookName lookup field.

   

   The equivalent deluge script definition of the Book_Name field is given below.

   Book_Name ( displayname = "Book Name" type = picklist values = Books[Status == "Available"].Name )

   Another widely used scenario is restricting the picklist entries based on the user who logs into the application. For example, assume that an organization has created an appraisal form to be used by managers to appraise his subordinates. When a manager logs in, only his subordinates must be available for choosing in the employee picklist. In this case, the lookup field will be the 'Employee_Name' from 'Employee' form and the 'Set Criteria' will be ManagerMailID == zoho.loginuserid, where ManagerMailID, is the deluge field name in the Employee form which holds the zoho login emailid of the manager and zoho.loginuserid returns the email id of the user who has logged into the application.

   Also Refer: Tips & Tricks -> Display Picklist based on loginuser.

The formula field will not be displayed in your form. As the value of the formula field is automatically calculated, it will be displayed only in the view.

No, you cannot use a formula field in another formula field. Refer the topic, Deluge Reference - formula, for more information.

You can use the Deluge round() function to round the result of your formula expression to two decimal places. The syntax is given below:

(<your expression>).round(Integer)

Example: (Decimal_field + Number_field).round(2)

Zoho Creator supports Image field type to add images to your form. The Image field also provides option to specify the alternate text, URL, title and target to display the image. This can be done by selecting Options that is displayed in the dialog when you add the Image field.

To add a image field,

1. Drag and drop the Image field type to your form. Specify the Image Label name, for example "Photo"
2. Click on Options and under Appearance click on the required check boxes, as shown below.

Alternate Text Required - The ALT text is meant to provide alternative or substitute text, primarily for use when the image is not being displayed.
URL Required - The URL is meant to provide the link to be displayed, when the image is clicked.
Title Required - The Title is meant to display a popup text that will be displayed, when you run your mouse over an image.
Target Required : The Target is meant to provide option to specify if the image must be displayed in the same window or a new window.

3. Click "Done" to add the image field to your form. The screen-shot given below, shows the Photo image field added to the form, in Edit mode.

4. Go to Live mode, by selecting Access this application to enter data to your form.

5. Specify the Image Source, Alt text, Link, Title etc., as shown below. Please note that in the Source textbox only links to images present in some other server can be entered. Links to images from your hard disk cannot be entered as source. If you want to upload an image in Zoho Creator, use the File Upload field type.

6. The image will be displayed in the form view, as shown below:

Yes, you can upload files in Zoho Creator by adding the File Upload field type. To upload files to your form,

1. Go to Live mode, by selecting Access this application.
2. Click on the Browse button displayed near the file upload field and give the location of the file that needs to uploaded and submit the form. The uploaded file will be displayed as a link in your View.
3. Selecting the link will open the file in the specific program based on the file type.

Note:

The maximum size of each file that can be uploaded is only 5 MB. The total file storage space you will get depends on the user pack you buy. Zoho Creator considers total file storage of the account and not of the individual users.

Also refer : How can I upload an image in Zoho Creator?

The Storage Space is concerned only with the total size of all the Uploaded files. The maximum size of an Uploaded file cannot exceed 5 MB. Currently, Zoho Creator does not provide an option to show how much of file upload space you have used up or how much is left. We will be providing this option soon in our future updates. For now, you will be notified as soon as you get close to your maximum storage space limit, based on your subscription plan. To view your Subscription plan, select the Account Settings option displayed on the top-right corner of your Home page.

You can send the uploaded file as a link in your e-mail message. Refer the topic, Deluge - Tips & Tricks -> Customizing Email Messages.

Yes, you can upload images in Zoho Creator using the File upload field type. Currently, the uploaded image will be displayed only as a link and will not be rendered in the view. To render uploaded images,

1. Upload the image in your File Upload field, for example named "Upload_Picture"
2. Create an Image field, for example named "Display_Picture"
3. In the Form Actions -> On load block, hide the Image field so that it is not displayed in the form.
4. In the Form Actions -> On Success block, set the Image field named "Display_Picture" with the following html code, where "sampleapps" refers to the app owner name.

"<img src='http://creator.zoho.com/DownloadFile.do?filepath=/" + Upload_Picture+"&sharedBy=sampleapps' title='Sample Images" + "' alt='Display Uploaded Images in Zoho Creator" + "' width='64' height='75'/>"

Select More Actions -> Application Settings link displayed in the top-right corner, in Edit mode and select the "Allow HTML Tags" to "Yes", to display html contents in the data. Select the View in live mode, to view the uploaded images, as shown below.

You can use the URL field type, to add URL with link name, title and target. To add a URL field type to your form,

1. Drag and drop the URL field to your form, in edit mode.
2. Click on Options and under Appearance click on the required check boxes, as shown below.

Link Name Required: The Link Name is meant to display a text in place of the URL.
Title Required: The Title is meant to display a popup text that will be displayed, when you run your mouse over the url.

Target Required: The Target is meant to provide option to specify if the image must be displayed in the same window or a new window.

3. Click "Done" to add the url field to your form. The screen-shot given below, shows the url field named Site URL, added to the form, in Edit mode.

4. Go to Live mode, by selecting Access this application to enter data to your form.
5. Specify the Image URL, Link Name, Title and Target as shown below:

6. The url will be displayed in the form view, as shown below:

To set a url field programatically with the required URL, Link Name and Target, refer Tips & Tricks -> Updating Field Values.

The "Add Notes" field type can be used to display long descriptions in your form, to help your users while filling out your form. This field will not be displayed in your form view. Refer the topic Tips & Tricks -> Displaying Custom Error Messages to display customized text in a Note field, based on user input to your form.