The frevvo 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.

Open

Palette Controls Chart

Control	Description	Control	Description

Control	Description	Control	Description
Selection Controls (View this short video on Selection Controls.)		Input Controls (View this short video on Input Controls.)
Dropdown	A single-select options list displayed in dropdown format.	Text	Allows users to type any text and is intended for short, one-line entries.
Radio	A single-select options list displayed in radio button format.	TextArea	Lets users type any text and is intended for longer, multi-line submissions.
Checkbox	A multi-select options list displayed as checkboxes.	Date	Can be used as a date, time or date plus time control with customizable date and/or time formats, and optional date picker.
Group Controls (View this short video on Group Controls)		Email	Requires a valid email (user@domain format).
Section	A group of controls with a border and label that can be expanded or collapsed; may also be set up as "Signed Section" for authenticated users.	Money	Allows users to enter U.S. currency
Repeat	Allows user to add (or remove) controls to enter additional information as needed.	Phone	Used for entering a phone number, and allows several 10-digit phone number formats.
Tabs	Displays controls in a tab layout.	Quantity	Used for entering quantities or any whole numbers (integers).
Panel	A group of controls without a border or label; often used to create vertical alignment or tab order.	Number	Used for entering decimal numbers. Users may enter any number of digits after the decimal place.
Table	Displays a set of controls in a grid/table layout with ability to add/remove rows as needed.
Miscellaneous (View this short video on Miscellaneous Controls)
Message	A read-only control that accepts rich text to display information to users. Can also be used as a spacer.	T/F	Use a T/F (Boolean) control for situations where the values will only be Yes or No.
Link	Display a clickable link to users.	Image	Include an image (picture, logo, etc.) in your form.
Trigger	Displays a clickable button that can trigger some event set up in business rules, such as a search.	Submit	Adds a button to your form that, when clicked, will submit the form. (Note that forms include a submit button by default.)
Upload	Allows users to upload files as attachments in your form/workflow.	PageBreak	Adds a page break for phone and/or tablet views.
Signature	An electronic wet signature that allows the user to sign with mouse, trackpad, or touch screen.	ComboBox	A special type of selection control that supports three types of data retrieval: frevvoUsers, frevvoRoles and Web Service. Also supports typeahead and entering values not in the options list.
Form Viewer	Displays a mapped PDF you have uploaded/mapped in Forms Generated for this Form dialogue.

On This Page

• 1 Palette Controls Chart
• 2 Input Controls
  • 2.1 Text 
  • 2.2 TextArea
  • 2.3 Date, Time, and Date/Time Controls
    • 2.3.1 Date, Time and Date/Time Submission Values
  • 2.4 Email
  • 2.5 Money
  • 2.6 Phone
  • 2.7 Quantity
  • 2.8 Number
• 3 Selection Controls
  • 3.1 Setting Options
  • 3.2 Dropdown
  • 3.3 ComboBox
  • 3.4 ComboBox from Schema
  • 3.5 Radio
  • 3.6 Checkbox
  • 3.7 T/F
    • 3.7.1 Value Property of T/F in Business Rules
• 4 Upload Control
  • 4.1 Min/Max Number of Attachments
  • 4.2 Setting Min/Max Properties with a Business Rule
  • 4.3 Restricted Content Types and Other Mime/Ext
  • 4.4 Error Messages 
  • 4.5 Multi-select
  • 4.6 Max Size
  • 4.7 Changing the file name of an uploaded attachment in the form/workflow submission
  • 4.8 File Name Property Behavior in Use Mode
  • 4.9 View Attachments in Submissions
  • 4.10 Enable Camera
  • 4.11 Mapping an Upload Control 
• 5 Message Control
  • 5.1 Rich Text Editor
  • 5.2 Using the Rich Text Editor
  • 5.3 Save Value Property
  • 5.4 Using Templates in a Message Control
  • 5.5 Using Custom Fonts in the Message Control
  • 5.6 Message Control and Business Rules
  • 5.7 Message Control Style and Settings Tabs
  • 5.8 Message Control in a Table
  • 5.9 Message Control in a Repeat
  • 5.10 Horizontal Layout using the Message Control
  • 5.11 Center, Right-align or Justify Message Control
  • 5.12 Message controls as a spacer
  • 5.13 Embed an Image, PDF, or Video in a Message Control
• 6 Link Control (for URLs)
  • 6.1 Save Value Property
  • 6.2 Link Control and Business Rules
• 7 Image Control
  • 7.1 Save Value Property
  • 7.2 Image File Size
  • 7.3 Centering Images using the Message Control
• 8 Trigger Control
• 9 Submit Control
• 10 Group Controls
  • 10.1 Sections
  • 10.2 Tabs
    • 10.2.1 Tab Widths
  • 10.3 Panels
  • 10.4 Table
    • 10.4.1 Adding a Column to the Table Control
    • 10.4.2 Table Min and Max Properties
    • 10.4.3 Prompt and Prompt Message Properties for Tables
    • 10.4.4 Table Column Properties
    • 10.4.5 Column Widths
    • 10.4.6 Labeling the Rows of a Table
    • 10.4.7 Deleting a Table Control
    • 10.4.8 Changing a Table Control to a Repeat
    • 10.4.9 Horizontal Layout using the Table Control
• 11 Repeats
  • 11.1 Prompt and Prompt Message Properties for Repeating items
  • 11.2 Changing a Repeat Control to a Table
• 12 PageBreak
  • 12.1 PageBreaks in a Tab Control
  • 12.2 Testing Your Mobile Form
• 13 Signature
  • 13.1 Limitations
• 14 Form Viewer Control
  • 14.1 Save Value Property

 

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, frevvo 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. Refer to Setting Properties for the information.

Text 

Text controls allow users to type any text and are intended for short, one-line entries.

TextArea

The TextArea control lets users type any text and is intended for longer, multi-line submissions. Scroll bars appear as needed to accommodate the text entered. This control has a # of Rows property that controls the default number of lines visible in the input area. The TextArea control is the only input control that does not have a decorator.

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. 

Open

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. The challenge is caused by the fact that line breaks entered into a TextArea control are represented by a single newline character \n while line breaks in an HTML context are represented by the HTML break characters:

In order to display the text in an 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.

Email

The EMail control requires users to enter a valid email address. The address must conform to the following syntax: <name>@<domain>. The email control provides rudimentary syntactic validation by checking for the presence of an "@" between the local-part (name) and domain, both of which can contain any character. The local-part can have a max length of 64 characters and the domain 255. Your usage may have stricter rules on what an email address can contain. In this case, you may want to use a text control with a pattern that represents your usage instead.

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

The Money control allows users to enter U.S. currency. Users may type commas and a decimal point but frevvo 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

The Quantity control is 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.

Number

The Number control is used for entering decimal numbers. Users may enter any number of digits after the decimal place.

Selection Controls

frevvo supports five 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

Setting Options

Options for the Dropdown, Radio and Checkbox controls can be populated using two methods. These are discussed in detail in the Control Properties chapter.

1. Design Time (Static Options)- 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.

2. Web Service (Dynamic Options) - Designers can dynamically populate options at runtime from an external RESTful web service source, such as the frevvo Database Connector. The frevvo Dynamic Option feature allows you to do this without code right in the control properties panel. If you prefer, you can also set dynamic options using a business rule. Refer to the Dynamic Options topic for the details.
   
   

Dropdown

The Dropdown control displays a list of options in a dropdown menu and allows a single selection. The first choice in the dropdown list is 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.

frevvo 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.) Checking Options Value Only is recommended when using the ComboBox value in form routing; allowing a value that is not in the list could result in an invalid task assignment.

Drag/drop the ComboBox from the Palette or import it from ComboBoxfrom Schema. When you drag/drop the ComboBox from the Palette, it does not have a ControlType 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 options 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. However, changes to the label for false are irrelevant as they 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 null value, so no value will show in the XML document.

Notice the Required (false) property on the T/F Properties panel. This property is unchecked by default. If checked, the XML entry shows a false value when the T/F value is not selected. However, this property does not require a T/F control to be checked, since the unchecked option is still a valid value (false).

A T/F control added to a table will hide the "Yes" option label. A Boolean checkbox should be used only if there are two states: Y/N. The column header label in the table can help make the choice obvious. For Example, you could create a column header - Non-Smoking Room in the table and if the user checks the box the value will be true and if the box remains unchecked, the value will be false.

Use another selection control if the choices are not restricted to yes/no, or if you want to require the user to check the box. For example, you may want to require the user to check a box "I agree to the policies." In this case, a better option would be a checkbox control with a single value rather than a T/F control.

Value Property of T/F in Business Rules

The value property behaves differently for a T/F control depending on whether it is from schema or not.

• From schema, when checked: control.value === true

• From scratch, when checked: control.value[0] === true

If you use the Visual Rule Builder to build a rule with the T/F control, the resulting rule covers both value states so the designer will not have to make further changes.

Upload Control

Use this to allow the user to upload and submit attachments with your forms. You can attach photos from your device photos library or take a new photo with the device camera. The Upload control is decorated with an image that cannot be changed. When you click on the Upload control in use mode, the button text is underlined.

The upload control contains special properties to control the MaxSize, the Min/Max Number of Attachments to accept per form submission, and to allow the form designer to specify Restricted Content Types and Other Mime/Ext on the types of files allowed to be uploaded to the control/form. When a user uploads content to an upload control with a content filter applied, frevvo will check the upload against the filter and if there is no match, reject the upload with an error message.

Attachments are viewable in the Submissions Repository. You can configure your form's Doc Action property to send attachments to a URL endpoint (ex: servlet) that can save the attachments locally within your company.

The Filename property allows designers to specify a naming convention for the attachment in the form/workflow submission.

Min/Max Number of Attachments

You can specify the minimum and maximum number of attachments that can be uploaded to your form using the Min # and the Max # properties. Setting the min and max values to 0 or if the maximum # field is left empty means an unlimited number of files can be uploaded. Setting the min # to a value greater than zero makes the field required. Set the min # to 1 to ensure that the user uploads at least one attachment to your form. Use the max # for the maximum attachments allowed. Clicking on Add Files will not display the upload lightbox when the maximum # of attachments have been uploaded. No further uploads will be allowed. Setting the Max # to 1 disables the Multi-File Upload feature. See below for more information.

Setting Min/Max Properties with a Business Rule

The min and max properties can be changed with a business rule using the properties, minFiles, and maxFiles. The values for minFiles and maxFiles can be read and changed at runtime if required. Check out this very simple example.

Restricted Content Types and Other Mime/Ext

Use the Restricted Content Types field on the Upload Control Property pane to restrict the content type of the files uploaded to your form. This property lets the designer specify one or more types which restrict the content to those types. Uploads can be restricted by using MIME Types (limited set supported), File Extensions, or both.

Select the content types you want to allow by checking the associated check box in the Restricted Content Types field. The choices are pdf, MS Word, MS Excel, MS PowerPoint, MS Access, gif, jpeg, png, tiff, rtf, tar, zip, gzip, xml, and bmp. frevvo will map the content types that you choose to one or more mime types. Content type filtering will be enabled for the extensions selected. For example, the image shows an upload control in a form that will only allow files with .jpeg, .pdf and .png extensions. This list can be expanded for customers using frevvo On Premise by modifying the context parameter: frevvo.upload.file.types in the web.xml file. See Installation Tasks for the details.

An easier way to add extensions or other mime types for filtering can be accomplished via the Other Mime/Ext field. You can use this field to restrict uploads to a mime type or file extension that is not included in the subset of the most common file content types provided by frevvo. Enter one or more extensions (of any length) or mime types, separated by a space, to enable the extension and additional mime type filtering. An upload matches on an extension if its name ends in a period followed by one of the extensions.  The comparison is case insensitive.  Likewise, an upload matches on mime type if its mime type matches one of the additional mime types entered. For example, the extensions, txt, and htm, shown in the Other Mime/Ext field in the image above, restricts uploaded files to ones that have .jpeg, .png, .pdf, .txt, and .htm extensions.

The frevvo mime utility now uses the Apache Tika toolkit for improved mime detection. Files with .xls, .xlsx, ppt  and .docx extensions are now correctly described when uploaded in use mode.

Error Messages 

The user will see error messages if upload filtering is applied and the uploaded content types do not match. The error message shown below will be displayed if content type only filtering or both content type and extension/mime filtering have been applied and the uploaded content does not match either restriction. For instance, uploading a file with a .jpeg extension will not match the selected content type choices or the .docx file extension listed in the Other Mime/Ext field as shown in the Upload Control Property Pane image:

When extension and additional mime type filtering only have been specified and the uploaded content does not match, the error message below will display:

Multi-select

The user can select more than one file (during a single file browse) to be uploaded by holding down the control/command key and then clicking on each file you want to select. The multi-s