The palette offers a rich variety of controls that let you create virtually any form. All controls provide functionality as soon as you drop them into your form and can be customized to suit the form you are designing. The purpose of each control is described below.

Input Controls

Input controls allow users to enter data (text, dates, numbers, etc.) into your form and automatically prevent them from entering the wrong data types. For example, if users enter letters into a number control, your form will display an error message and form submission is prevented until valid data is supplied. This validation happens automatically; you do not have to do anything special. The purpose of each input control is described below.

To validate the content in each input control,  assigns a default XML schema data type to each control.  The table below shows the default data types for each input control.

The explanations below describe the controls generically—before you edit them to impose additional restrictions or define behavior specific to the form you’re creating.  

Input controls have a two new properties: Decorator and Placeholder. Refer to Setting Properties for the information.

Text 

Allows users to type any text and is intended for short, one-line entries. Placeholder and decorator properties have been added to the text properties pane in . See Setting Properties for the details.

TextArea

Lets users type any text and is intended for longer, multi-line submissions. When users enter data, scroll bars appear as needed to accommodate the text. This control has a # of Rows property that controls the default number of lines visible in the input area.

In HTML there is no way to set a maxLength on a textarea control which is why the textarea control does not have the maxlength property like the text control. If you need a maxlength, it's best to either choose the text control, or this can be accomplished via a business rule. See the Business Rule for Textarea Max Length.

Since users typically enter multi-line text into textarea controls this can pose a challenge if you want to display that text in an html page. For example you may want to display the entered text in your form's Doc Action display message, in an html formatted email or in on a web page such as your Confluence wiki. The challenge is caused by the fact that line breaks entered into a web form text area are represented by a single newline character \n while line breaks in an html context are represented by the html break characters:

<\br>

In order to display the text in a html context you need to replace the \n with the html break characters. See the business rules chapter textarea newline vs break for a working example.

A new Placeholder property has been added to the textarea properties pane. The Textarea control is the only input control that does not have a decorator.

Do not select a Textarea field as a Searchable Field if the amount of text stored in the field is greater than 32k.

Date, Time, Date/Time

The date control can be used in a form as a date, time or date plus time control. The Control Type property lets you select from a dropdown of choices: date, time or date/time. The designer can choose from a variety of formats for each type. Rules can be applied to the Date/Time control in all variations. See the Rules Examples chapter containing numerous examples and code samples.

You can specify whether or not you want to display the date picker via a checkbox on the Style Properties tab. If checked, you will see the date picker inside the the date control and the date portion of the date/time input control. The date picker brings up a calendar that can be used to enter a date.

The Time control is used to denote the time of the day. This means it has no dependencies on time zones or offsets. It will not shift based on whether or not Daylight Savings Time is observed in a time zone.

The Date/Time control relies on the timezone of the browser. The time portion will be calculated based on the date and whether or not Daylight Savings Time is observed in that time zone. The Date/Time control type is meant to represent a point in time, so certain functions in the Visual Rule Builder (year, month, day, hour, minute) are not available on this control type.

The Date control is used to denote a day and has no dependencies on time zone.

For example, A time of 5:00 PM is entered into a Time control and a date of 2/5/2014 plus 5:00 PM into a Date/Time control by a user located in the America/New_York (Eastern Standard Time). When the submission is viewed in the EST time zone, the Time Control displays 5:00 PM. This value will not change. The time portion of the Date/Time control also displays 5:00 PM, because it takes on the timezone of the browser (EST) and it is not further adjusted because Daylight Savings Time is not observed in EST on February 5th.

If the submission is viewed in the Tijuana (Pacific Standard Time), the Time Control will display 5:00 PM as it did in EST but the Time portion of the Date/Time control will show 2:00 PM as it will be adjusted by the browser timezone, PST. 

Time Zones

In general, form data is displayed in the browser’s time zone and saved in Coordinated Universal Time (UTC) in the submission document. The form’s time zone is inferred automatically from the browser’s time zone. The time zone, once set, cannot be changed for that form instance. An example can be seen when you click on the Test icon in the  designer. The form URL will have the &_formTz=<tz> parameter with the value of the browser's timezone appended to it. The URL for a form being tested in the Eastern DayLight Time (EDT) timezone would be:

http://localhost:8082/frevvo/web/tn/rap.com/user/rap/app/_w-eeENIYEeGYrP3vLLbERA/formtype/_CXKywNIaEeGYrP3vLLbERA/popupform?embed=true&_extId=0.04202334303408861&_formTz=America/New_York

The browser’s time zone can be overridden by appending the &_formTz=<tz> parameter to the form URL. Modern Time Zone Strings must be used with the &_formTz parameter. Other time zone formats are not supported. The time zone strings can be found here.

Here is an example: A Product Order form running in the PST timezone displays all the time and date/time control data in the America/Tijuana timezone if the &_formTz=<tz> is appended to the URL as shown below. 

http://localhost:8082/frevvo/web/tn/qa.com/user/rap1/app/_cm8JIGR7EeG4D7_jeDNSHQ/formtype/_XyC2wGbsEeG2-p_Sm3q9pA/popupform?locale=&_formTz=America/Tijuana

When users enter data into a form, the &_formTz=<tz> parameter is not required. You may notice that URLs for the following  functions will contain the  _formTz parameter appended to them:

• Edit form/workflow
• Test form/workflow
• Initialize submission
• Access form/workflow/tasklist (outside space)
• Access form/workflow/tasklist (from space)

Time data is no longer converted from the browser's timezone to a valid UTC format when posted in the form XML document in the submissions database. Refer to Viewing XML Documents for more information. Business Rules execute in the form time zone. 

Email

Requires users to enter a valid EMail address. The address must conform to the following syntax: <name>@<name>.<string>  Multiple emails can be entered in the email control separated by either a comma or a semicolon; however, the syntax will only be validated on the first email entered.

Money

Allows users to enter U.S. currency. Users may type commas and a decimal point but will not add them to the data automatically. The form also will round all entries to two decimal places. For example, if the user enters 4000, it will display as 4000.00 when the user exits the field.

Phone

Used for entering a phone number and allows any of the following formats: ##########,###-###-####, ###.###.####, ###-####, ###.####.  If you want to enforce one of the 10-digit formats (to require an area code), you can edit the control’s Pattern.

Quantity

Used for entering quantities or any whole numbers (integers). The form displays an error message if users enter decimal points, commas, or anything other than an integer. The Quantity field is expected to hold an integer which can have a max value of 2^32 -1 which is 4294967295.

Number

Used for entering decimal numbers. Users may enter any number of digits after the decimal place.

Selection Controls

 supports 5 types of Selection controls. Selection controls let users choose from a list of options instead of having to enter text.  

• Dropdown
• Radio
• Checkbox
• ComboBox
• T/F

Dynamic Options

Options for the Dropdown, Radio and Checkbox controls can be populated using 2 methods:

• Method 1 - Designers enter the options at design time by typing them in the Options property for the chosen selection control. Options entered in this way are static - they will not change at runtime. The controls are discussed below:
• Method 2 - Designers can dynamically populate options at runtime from an external RESTful web service source. This can be accomplished with a business rule or if your preference is not to write JavaScript you can use the Dynamic Option feature. This method eliminates the need for a business rules.

Refer to the Dynamic Options topic for the details.

Dropdown

This adds a dropdown list to your form. By default the first choice in the dropdown list will be blank; you define the other choices by editing the control’s Options properties. Keyboard selection of an option is not currently supported but is planned for a future release. Users can type-ahead. For example, select a dropdown control and type "S" and it jumps you to options that start with "S". This is extremely useful for dropdown controls that have a long list of options. This control is a standard HTML dropdown so it does not allow using backspace to clear selected options. The Comment property can be used to provide a text box for additional information when the last option in the selection control is chosen. 

ComboBox

The ComboBox control supports three types of data retrieval: frevvoUsers, frevvoRoles and Web Service. Designers select the data source from the Options Src property. See the Dynamic Options feature topic for information about how to set up options for the ComboBox control.

You can use the ComboBox to retrieve values from a database and enable a list of possible partial matches.

LDAP customers often use the ComboBox control if they have many users/roles configured on their LDAP server. What if the designer wants to pull a list of users or roles from their LDAP server into a form or workflow for user selection? Using a traditional dropdown control is not ideal especially when you have thousands of users to pick from. The ComboBox control allows users to type characters in the ComboBox control that filter the choices to the entered characters and display those that match. You can also type a value that is not in the list. You may limit responses to the available options by selecting "Options Value Only" (available only for frevvoUsers and frevvoRoles.)

Drag/drop the ComboBox from the Palette or import it from schema. When you drag/drop the ComboBox from the Palette, it does not have a Control Type property. You cannot change the ComboBox to a different control by changing the value in the Control Type dropdown. You must delete the ComboBox and then add the control that you want. 

Existing forms/workflows that contain the ComboBox control will have the value of the Options URL property in the Options Src field after upgrading.

ComboBox from Schema

You can change the Options Src for ComboBox controls that are added to your form/workflow when you upload a schema.  Notice this control does not have a display as property so you cannot change the appearance of the control using this property.

Information about how to set up Options for the ComboBox control is discussed under the Dynamic Options feature topic.

Radio

This adds mutually exclusive radio buttons. You define the number of radio buttons and the specific choices by editing the control’s Options properties. Note: If you select a radio option as the default and later decide you do not want an option selected by default, you must remove that option from the control and tab out of the options property so that it is removed from the control. Then add the option back to the control's option list. Now that option is no longer a selected default.

A  Comment property can be used to  provide a text box for additional information when the last option in the selection control is chosen. 

Checkbox

This adds a set of checkboxes so users can check one or more. As with the other selection controls, you edit the control’s Options properties to define the number of checkboxes and the specific choices. A Comment property can be used to  provide a text box for additional information when the last option in the selection control is chosen. 

T/F

Use a T/F (Boolean) control in your form for situations where the values will only be Yes or No. For Example: The image shows a T/F control in the Preferences section of a company Travel Request. The label for this field has been changed to Non-Smoking Hotel Room. The employee filling out the request checks the box if they prefer a Non Smoking room.

The control options default to "true=Yes" and "false=No". When you drag the control from the palette, only the "Yes" option will be visible. You can change the option labels from Yes and No to whatever you want. It is important to note changes to the label for false are irrelevant as it will never be visible on the form. The option values cannot be changed and will always stay as true and false. Blank labels for options are not allowed. Checking the “Yes” checkbox of the Boolean control results in a true value in the XML document.

Leaving it unchecked will translate to a false value( no value will show in the XML document).

Notice the Required (false) property on the T/F Properties pane. This property is unchecked by default. If checked, the XML entry shows a false value even when the T/F value is not selected.