Configuring Add Notes Field

Overview

The "Add Notes" field type can be used to display long descriptions in your form, to help your users while filling out the form. It provides a better layout and some rich text formatting options that other fields don't provide. The text entered in a add notes field will be displayed only in the Form and will not be rendered in the View. For example, in the "IT Inventory" form given below, the fields are grouped under different headings like Profile and Your Work Computer with the help of the Add Notes field. Zoho Creator allows only 65,535 bytes (~64kb) of data in the Add Notes field.

Configuring a add notes field

1. Drag-n-drop the Add Notes field type to the form builder area.
2. Go to its Field Properties and click on the editor under "Notes"
   
3. The Rich Text Editor opens up where you can enter data using the rich text options. You can also switch to Plain Text Editor by clicking on "plain text" on the top right corner and vice-versa.
4. When you Access the application, the Add Notes field will be displayed in the form of what you specified earlier in the editor.

Insert hyperlinks in a form

Forms can be presented with hyperlinks for users to be navigated to a different site or a page. An example to insert a hyperlink is explained below:

1. Go to the edit mode of your Zoho Creator form that must contain the hyperlink.
2. Drag and drop the "Add Notes" field in your form.
3. Go to Field Properties > Notes
   
4. Select HTML iconat the extreme left.
   
5. Enter the required link in the below format.
   button type="button"><a href="http://www.zoho.com">Visit Zoho Home</a></button>               //replace "www.zoho.com" and "Visit Zoho Home" with the required link and link-name.
6. Click on Insert > Done.
   
7. When you access the form in live mode, the hyperlink gets displayed in the form of a button as shown below.
   

Sample Application

You can display custom error messages in the Note field based on user input, using Deluge Scripting. The sample application Update Note in the following link demonstrates how to display customized text in a Note field, based on user input to your form. The script modifies the content of a Note field when a client-side event happens.

About the Application

The application comprises of a form named Test form with the following fields:

1. Fruit of type picklist to display the types of fruits.
2. Flash monkey of type decision check box.
3. note_buffer of type multi-line text to store the html image code, based on the selected fruit.
4. the_note of type note to display the image of the selected fruit.

1. When the form is loaded, the on add ->on load script hides the note_buffer field, using the hide syntax.

2. The on user input script added in the Fruit field updates the note_buffer with a blob of HTML as a multiline string, based on the Fruit selected. This is then displayed in the the_note field.

Code Explanation

if (input.Fruit == “apple”) -If condition to check the Fruit type

input.note_buffer = “<img height=’250′ width=’250′ src=’http://images.jupiterimages.com/common/detail/39/61/23036139.jpg’/>”; - Stores the html code as a multi-line string in the note_buffer field.

input.the_note = input.note_buffer;- Updates the_note field with the value stored in the above note_buffer field.This field displays the actual image.

3. If the show_monkey checkbox is selected, the on user input script added in the show_monkey field updates the note field with the fruit type and the monkey image, else only the fruit type is displayed.