Creator Help

Configuring a 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 with the help of the Add Notes field.

Configuring a add notes field

  1. Drag-n-drop the Add Notes field type to the form builder area.
  2. Add the required text/images that should appear in your form.
  3. Click on Use Editor link on the top to format the text with the desired color, size, style etc.
  4. When you Access the application, the Add Notes field will be displayed in your Form.

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.

Adding Deluge Script

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

on add
{
on load
{
hide note_buffer;
}
}

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.

Fruit
(
type = picklist
values = {"apple", "banana", "cantelope"}
on user input
v
if (input.Fruit == "apple")
{
input.note_buffer 
else if (input.Fruit == "banana")
{
input.note_buffer = 
}
else if (input.Fruit == "cantelope")
{
input.note_buffer = "
}
input.the_note = input.note_buffer;
}
)

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.

show_monkey
(
displayname = "Flash monkey?"
type = checkbox
defaultvalue = false
on user input
{
if (input.show_monkey)
{
input.the_note = input.note_buffer + "<img height='250' width='250' src='http://upload.wikimedia.org/wikipedia/commons/2/27/Baby_ginger_monkey.jpg' />"; 
}
else
{
input.the_note = input.note_buffer;
}
}
)

Top