This documentation is for frevvo v10.0. Not for you? Earlier documentation is available too.

Palette Controls

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.



Palette Controls Chart

ControlDescriptionControl Description
Selection Controls (View this short video on Selection Controls.)Input Controls (View this short video on Input Controls.)
A single-select options list displayed in dropdown format.Allows users to type any text and is intended for short, one-line entries.
A single-select options list displayed in radio button format.Lets users type any text and is intended for longer, multi-line submissions.
A multi-select options list displayed as checkboxes.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)Requires a valid email (user@domain format).
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.Allows users to enter U.S. currency.
Allows user to add (or remove) controls to enter additional information as needed.Used for entering a phone number, and allows several 10-digit phone number formats.
Displays controls in a tab layout.Used for entering quantities or any whole numbers (integers).
A group of controls without a border or label; often used to create vertical alignment or tab order.Used for entering decimal numbers. Users may enter any number of digits after the decimal place.
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)
A read-only control that accepts rich text to display information to users. Can also be used as a spacer.Use a T/F (Boolean) control for situations where the values will only be Yes or No.
Display a clickable link to users.Include an image (picture, logo, etc.) in your form.
Displays a clickable button that can trigger some event set up in business rules, such as a search.Adds a button to your form that, when clicked, will submit the form. (Note that forms include a submit button by default.)
Allows users to upload files as attachments in your form/workflow.Adds a page break for phone and/or tablet views.
An electronic wet signature that allows the user to sign with mouse, trackpad, or touch screen.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.
Displays a mapped PDF you have uploaded/mapped in Forms Generated for this Form dialogue.

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.

Input ControlXML Schema Type
Textxsd:string
Datexsd:date
EMail

types:emailType, an xsd:string restriction pattern defined in  types.xsd.

Moneytypes:number, an xsd:double restriction defined in types.xsd.
Phonetypes:phoneType,  an xsd:string restriction pattern defined in  types.xsd.
Quantityxsd:integer
Numbertypes:number, an xsd:double restriction defined in types.xsd.
T/Fxsd:boolean

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 is 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


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 TextArea control 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.

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 allows the user to enter a date, time, or date/time combo. 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.

A date picker can be enabled or disabled on the Style Properties tab. If Date Picker is 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 Date control is used to denote a day and has no dependencies on time zone.
  • The Time control is used to denote the time of the day. This means it has no dependencies on TimeZones 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.

For example, the time 5:00 PM is entered into a Time control and the date 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 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 frevvo 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

Some timezones may not return the expected results. This is a known issue with the JVM. Contact Customer Support for assistance.

When users enter data into a form, the &_formTz=<tz> parameter is not required. You may notice that URLs for the following frevvo 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)

You must specify the _formTz=<tz> parameter appended to the share URL when initializing a form with time or date/time controls from an XML init document, the _data parameter or a business rule that uses the rule identifier,form.load. The form server needs to know the timezone in which to return the date and time. Successful initialization cannot be guaranteed if the &_formTz parameter is not supplied. Refer to Initializing Forms with Data for the details. This URL parameter is not needed if your form/workflow only contains Date controls.

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

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

  1. The Combobox control will not work for public forms as the call to find users and roles is secured.
  2. The ComboBox control will not work in Edit mode. Click the  save and test icon to verify your changes.
  3. The maximum number of items returned from a query is 1000 when using the ComboBox control in a form/workflow if your tenant is using the LDAP Security Manager. This is an LDAP limitation.
  4. The maximum number of items returned from a query is 1000 when using the ComboBox control in a form/workflow if your tenant is using the Azure SAML Security Manager.

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.

  • Do not use the '>' character in a radio control option label if the radio is used inside a repeat control. This causes a known issue where the selected option in one radio repeat deselects when the value in the next radio item is selected.
  • Radio controls that do not display in a yellow background even if the Required property is set, can be reset to the proper state by changing the control type to different type and then back again.

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 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 allowedChecking 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 max attachment size allowed (in bytes), the min and max number of attachments to accept per form submission and to allow the form designer to specify restrictions 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 File Name 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-FileUpload feature. See below for more information.

You will not see the Required property on the Properties panel for the Upload control. This is because "Required" is not a valid property of an upload control so trying to set that property using a rule will not work. However, you can make the control required by setting the min # property greater than 1. If you need to make the Upload control required from a rule, you can put the upload control into a section, uncheck required on the section and then create a rule to make the section required.

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 restricts the content to those types. Uploads can be restricted by using MIME Types (limited set supported) or 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 extension and additional mime type filtering. An upload matches on an extension if it's name ends in a period followed by one of the extensions.  The comparison is case insensitive.  Likewise, an upload matches on mime type if it's 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.

If you select "xml" for the restricted content types of an upload control, it will only accept xml files with an xml declaration. To upload xml files that do not have the xml declaration, the designer can enter xml into the Other Mime/ext field on the Property panel of the upload control. The Upload control will then accept any file with an .xml extension.

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 has 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 has been specified and the uploaded content does not match, the error message below will display:

Multi-select

The user can select more than a one file (during a single file browse) to be uploaded by holding down the control/command key then click on each file you want to select. The multi-select feature support has been added in HTML 5 with a multiple attribute. Multi-select of files for the frevvo Upload control is supported in newer versions of browsers. For example, multi-selection of files works in Safari, Chrome and Firefox.

The multi-select feature is not supported in Internet Explorer (IE 9) or IOS for mobile devices. Furthermore, the name of the uploaded file will be image.jpg. This is not a frevvo issue. It is a limitation of IOS.

The multi-select of files in the browser is dependent upon the max files property of the upload control. Multi-select is disabled by setting the max # files to 1. It is possible to select too many files . For example, turn on multi-select by setting the max # to 2. Multi-select 3 files. This will show an error and none of the 3 will be uploaded.

 

Max Size

Max size is the upper limit for each attachment uploaded to an Upload control in your forms/workflow in bytes. The internal upper limit is controlled by a configuration parameter - frevvo.attachment.maxsize. In the frevvo cloud, it is set to 20 MB. If you enter a value into the control's max attachment size property greater than frevvo internal upper limit, this property will reset. If left blank, it defaults to 10485760.

When a user attempts to upload a file greater than the max size, they will see an error message displayed on the upload control.

You can also set the max attachment size per user by editing the user's profile as the admin user and editing the Configuration field shown below:

The value in the user profile takes precedence over the server configuration parameter but it cannot exceed the internal upper limit configured in the frevvo Cloud - 20 MB. The value in the control Max Size property takes precedence over both the user and server parameters if it is more restrictive. Individual users will still be bound by the max attachment size set in their user profile, even if the upload control setting is higher.

On premise, customers can control the frevvo internal upper limit via the frevvo.attachment.maxsize parameter in the <frevvo-home>/tomcat/conf/frevvo-config.properties file.

Changing the file name of an uploaded attachment in the form/workflow submission

The File Name property allows designers to set up an attachment name that applies to all files uploaded with an upload control. Attachments with configured file names will be seen when viewing the attachment section of a submission.

This property only affects the name of the file, not the extension which will be automatically appended. The file name can be a:

  • Fixed name - The attachment name of the file is entered and is used without change.
  • Dynamic - The attachment name can be configured to be dynamic. It can be any combination of static text, form control templates and/or a template representing the name of the upload file as derived from the local file system - {$FILENAME}

The default setting of the File Name property is: "{$FILENAME}". This special template names the attachment using the file name as derived from the local file system. Leaving the File Name property empty is synonymous to setting it to "{$FILENAME}".


  • File names for uploaded attachments should not exceed 255 characters
  • Special characters that are not universally allowed in filenames ( / \ ? % * : | " < > ) are removed.
  • Curly braces {} used in file name property of the upload control are treated as a control template value. frevvo will try to replace the template with a matching value. If no match is found then the template will not be included in the filename. For example, if the File Name property is set up as Full {Name} but there is not a Name control in the form with a value in it. The resulting filename of the attachment will be Full.docx  Since frevvo cannot resolve the template, the {Name} is removed.

  • When using a template in the file name, make sure the template field has data in it before uploading the attachment.
  • Specifying a Repeat or multiple rows in a Table in a template requires the special syntax that includes the pipe (|) - ex:{|Control Name}. Configuring a template using the pipe (|) to specify repeats will not work for the Upload control File Name property. The pipe character will be removed and only the 0th index value of the repeating control or table will be used as the filename.

Expand the File Name field by clicking/dragging the three diagonal lines in the bottom right corner.

The image displays the file names for attachments visible in the form/workflow submission detail when:

  • the File Name property uses a control template from the form/workflow (the custInfo field) and the default template {$FILENAME}
  • the File Name property is empty or uses the default template {$FILENAME}
  • the File Name property uses a fixed name (My Filename)

File Name Property Behavior in Use Mode

When a user uploads an attachment to the Upload control, the file name will be the name of the file from the local file system.

  • Hovering over the file link in your form/workflow shows a tooltip that displays: "<filename> uploaded as <attachment_name>". The attachment will be stored in the form/workflow submission with the attachment name mentioned in the hover message.

If the same attachment is uploaded more than once in a form/workflow,  "_#" is appended to the subsequent attachment file names where "#" is a number starting at 1.

  • filename.pdf
  • filename_1.pdf
  • filename_2.pdf

View Attachments in Submissions

Once the designer has configured the File Name property and submissions have been created, attachments named with the specified criteria are viewed in the attachment section of a submission. Follow these steps to view them:

  1. Click on the Submissions icon.
  2. Double click on a submission for the Submission Details.
  3. Submission attachments are listed in the Attachment section of the Data tab.

File Names for Downloaded Attachments

The following is true when downloading attachments:

  • If the filename contains a space it will be replaced with a  '+' in the downloaded filename. For example, if the filename is "My File.pdf" the downloaded file is named "My+File.pdf"
  • If the filename contains special characters than the encoded value of the special character is included in the downloaded filename. For example, if the filename is "My Name@@" then it changes to "My+Name%40%40.txt "
  • When downloading an attachment from the View Submission Details lightbox, the link to edit a submission or from Test Mode:
    • The filename of the downloaded attachment will be the original filename if the File Name property is empty or set  to {$FILENAME}.
      The filename of the downloaded attachment will use the configured filename if the File Name property is set to a fixed name i.e. MyFile.

      The original filename will be used as the download name when downloading attachments from upgraded submissions.

Enable Camera

The"Enable Camera" property for the upload control refers to the camera in your mobile device .It is enabled by default. Here is how it works:

  • Checking this property has no effect in a desktop browser
  • If maxFiles=1, you will be able to take a picture with the camera and upload it. You will see a prompt similar to the image below when you tap "Choose Files".
  • If maxFiles=0 or if maxFiles > 1, on mobile iOS, you can enable or disable the camera. If enabled, you can take a picture with the camera and upload it but cannot upload multiple files at a time. If disabled, you can upload multiple files at a time but the user will not be presented with the option to take a picture from the camera for uploading.
  • IOS Safari decides access to the camera on the iPhone or iPad. Unchecking the "Enable Camera" checkbox does not disable the camera because it is not possible. If you check it, it will disable the multi-select (multiple attribute) of files to upload, even when max # is > 1.

The Enable Camera property does not apply to Android devices. Android always makes the camera available.

Mapping an Upload Control 

You can take a picture with your iPad or iPhone and map the photo into a generated pdfImage types supported are: gif, png, jpg/jpeg and bmp. Tiff is not supported. Non image file types uploaded are ignored. The designer should be aware of the following when mapping the Upload control:

  • The Upload control can be only be mapped to text fields in the pdf acroform.  
  • Only a single file will be mapped per control. Mapping takes the first found image file in the case of an upload control with multiple files.  

  • The image will resize to the dimensions of the acrofield.

The image shows an upload control in a form where jpg files for a koala bear and a jellyfish have been uploaded.  Drag the Upload control from the Mapping Form Outline and drop it on the text field in your acroform. Viewing the pdf via the Form Viewer control, shows the koala bear image in the pdf.

Message Control

Message controls are most often used to add static text to your form or workflow. Message Controls are often used to add form titles and helpful instructions for users to your form. You can also use it to:

The Message Control has a RichTextEdit which allows you to enter and format text easily. If your prefer, you can type the message content into the Message property, and add your own HTML for formatting.



   RTE toggled "on"

RTE toggled "off" (use HMTL)

Rich Text Editor

The message control supports rich text input in design mode via the Rich Text Editor (RTE). The editor simplifies the creation of your message content eliminating the need for the designer to provide HTML code. The RTE menu provides a simple way to format message content such as font, colors, bullet and numbered lists and more. You can even include a Google Map or an image if desired.

For example, you can easily create an Instruction section for users that has a bullet list, bold text and an image in a Message control using the text styling and image features available in the Rich Text Editor.

Using the Rich Text Editor

Follow these steps to use the Rich Text Editor.

  1. Drag a Message control from the palette and drop it into your form/workflow. Click on it, and look at the property panel to the left.
  2. Click the Rich Text toggle switch to turn the Rich Text Editor on. frevvo will remember the RTE mode you set for each control the next time you edit the form/workflow.
  3. When you toggle it on, the message property will be replaced with a link to "Edit with rich text editor." Click the link to open the RTE Editor window. You can also click the red pencil icon  on the control to open the RTE Editor window.
  4. The editor consists of an editing area for EnteringText and an icon in the top left that shows/hides the editor toolbar and menus.

Rich Text Editor Toolbar

The Rich Text Editor has a variety of menus/buttons for enhancing entered text. Hover the cursor over each button for a helpful tooltip about it's function. 

Entering Text

There are two ways to apply text styling features;

  1. Select the feature from the toolbar first, then type your text. For example, to write in bold, click the button on the toolbar then type your text. Bolded characters display as you type.
  2. Highlight a portion or all of the text in the Editing area with your mouse, then select the desired feature from the toolbar.

You can include (copy/paste) special characters that get encoded as special entity references in the text of the Message control. Examples of these special characters are left and right quotes etc... frevvo forces special non-ascii entities to be encoded numerically. Check this website for the list of known entity references.   

Exiting the Rich Text Editor

To exit the Rich Text editor window, click the X in the top right corner. When you click away from the Message control you can get an idea of how it will look to your users. You can also click the Preview form icon to see how your form displays.

If you want to return to editing the message content in the properties panel with HTML, turn Rich Text off by sliding the toggle switch to the off position. Notice that any rich text formatting you did in the RTE is now represented by HTML code in the message property.

Save Value Property

Check the Save Value property to include the value of the Message control in the form/workflow submission document and the translation file used for multi language support. This property is unchecked (default) when you add new Message controls to your form/workflow. Refer to the Save Value property topic for more information and to see how this property can help with Message controls in optional sections.

Using Templates in a Message Control

Use caution when adding templates and applying formatting to them in the Rich Text Editor. The RTE changes underlying markup. This could result in an HTML tag such as the <strong> tag in the HTML that could disrupt the template. frevvo may not recognize it as a template and the templates will not resolve to the entered values.

Using Custom Fonts in the Message Control

If your organization has special font requirements, custom fonts can be used to style Message Control text. Typically custom fonts can be added dynamically with JavaScript.  The exact JavaScript will vary based on the font.

There are two methods for enabling custom fonts:

  1. HTML markup, or
  2. On premise customers can add custom fonts to the font dropdown in the Rich Text Editor. This is optional.

Both methods described below require custom JavaScript to dynamically load custom fonts to frevvo. The JavaScript varies based on the font. Contact the font vendor to obtain the exact JavaScript for your custom font(s). Use the Custom JavaScript feature to upload the JavaScript to each project or to your tenant. frevvo recommends uploading the JavaScript to the tenant so that it will be available to all designers and all projects.

  • If you choose to include custom fonts in the HTML markup added to the Message Control property, contact the vendor to obtain the exact HTML needed.
  • If you choose to add custom font(s) to the Message Control Rich Text Editor, contact the font vendor for the correct value to use for the font name in the frevvo.message.rte.extra.fonts configuration property.
HTML Markup
Follow these steps to use HTML markup:
  1. Upload custom JavaScript to dynamically load custom fonts to each project or to your tenant. 

     Click here for an example of a tenant custom JavaScript to load the Google Roboto condensed and the trial Century Schoolbook Roman fonts.
    // frevvo custom JavaScript
     
    var TenantCustomEventHandlers = {
        fontsLoaded: false,
        setup: function (el) {
            if (!this.fontsLoaded) {
     
                // Load Roboto Condensed font
                this.addStyleSheetToDoc("https://fonts.googleapis.com/css?family=Roboto+Condensed:700");         
     
                // Load trial Century Schoolbook.  The following js was generated by myfonts using the
                // free trial option.  With this you can put markup in message controls like the following:
                // <h1 style="font-family: 'Century Schoolbook Roman';">Header looks great</h1>
     
                (function() {
                    var trial = document.createElement('script');
                    trial.type = 'text/javascript';
                    trial.async = true;
                    trial.src = 'https://easy.myfonts.net/v2/js?sid=42(font-family=Century+Schoolbook+Roman)&sid=44(font-family=Century+Schoolbook+Bold)&
                    key=CwN4ZsXpUs';
                    var head = document.getElementsByTagName("head")[0];
                    head.appendChild(trial);
                })();
                this.fontsLoaded = true;
            }
        },
        addStyleSheetToDoc: function (href) {
                     
            // don't load it again if it's already there
            var ss = document.styleSheets;
            for (var i = 0, max = ss.length; i < max; i++) {
                if (ss[i].href == href)
                    return;
            }
                     
            if (document.createStyleSheet) {
                document.createStyleSheet(href);
            } else {
                var l = document.createElement("link");
                l.rel = "stylesheet";
                l.href = href;
                document.getElementsByTagName("head")[0].appendChild(l);
            }
        }
    }
  2. Drag and drop a Message Control into your form/workflow.
  3. Add the markup and text to the Message property.

    <h1 style="font-family: 'Century Schoolbook Roman';">h1 style - Century Schoolbook Roman</h1>
    <h2 style="font-family:'Roboto', sans-serif">h2 style - Roboto</h2>
  4. Save and test your form/workflow

Adding Custom Fonts to the Rich Text Editor

If you want  custom fonts to be available in the Message Control's Rich Text Editor, on premise customers can add the frevvo.message.rte.extra.fonts property to the <frevvo-home>\tomcat\conf frevvo-config.properties file .

Follow these steps:

  1. Upload custom JavaScript to dynamically load custom fonts to each project or on the tenant level. 

     Click here for an example of a tenant custom JavaScript to load the Google Roboto condensed and the trial Century Schoolbook Roman fonts.
    // frevvo custom JavaScript
     
    var TenantCustomEventHandlers = {
        fontsLoaded: false,
        setup: function (el) {
            if (!this.fontsLoaded) {
     
                // Load Roboto Condensed font
                this.addStyleSheetToDoc("https://fonts.googleapis.com/css?family=Roboto+Condensed:700");         
     
                // Load trial Century Schoolbook.  The following js was generated by myfonts using the
                // free trial option.  With this you can put markup in message controls like the following:
                // <h1 style="font-family: 'Century Schoolbook Roman';">Header looks great</h1>
     
                (function() {
                    var trial = document.createElement('script');
                    trial.type = 'text/javascript';
                    trial.async = true;
                    trial.src = 'https://easy.myfonts.net/v2/js?sid=42(font-family=Century+Schoolbook+Roman)&sid=44(font-family=Century+Schoolbook+Bold)&
                    key=CwN4ZsXpUs';
                    var head = document.getElementsByTagName("head")[0];
                    head.appendChild(trial);
                })();
                this.fontsLoaded = true;
            }
        },
        addStyleSheetToDoc: function (href) {
                     
            // don't load it again if it's already there
            var ss = document.styleSheets;
            for (var i = 0, max = ss.length; i < max; i++) {
                if (ss[i].href == href)
                    return;
            }
                     
            if (document.createStyleSheet) {
                document.createStyleSheet(href);
            } else {
                var l = document.createElement("link");
                l.rel = "stylesheet";
                l.href = href;
                document.getElementsByTagName("head")[0].appendChild(l);
            }
        }
    }
  2. Stop frevvo.

  3. Navigate to <frevvo-home>\tomcat\conf.
  4. Edit the frevvo-config.properties file
  5. Add the frevvo.message.rte.extra.fonts property with a value listing the extra fonts in this format:
    1. Each font in the list is delimited by a semi-colon. 
    2. The font itself must be identified by its name in single quotes. Prefix the font name with an optional display name, if desired. Separate the display name from the font name by a forward slash. The display name is used in the font drop down of the Rich Text Editor. If the display name is not provided, the actual font name will be used. 

    3. The font names and font type (sans-serif) on the right side of the equal sign in the example above came from the vendor. Contact the font vendor for the correct information for the custom font(s) that you are using.

      Example of the Configuration property for Custom Fonts
      frevvo.message.rte.extra.fonts=Century Schoolbook Roman/'Century Schoolbook Roman';Roboto/'Roboto', sans-serif
  6. Save the file.

  7. Restart frevvo.
  8. Login as a designer user.
  9. Create/Edit a Project
  10. Create/Edit a Form
  11. Drag and Drop a Message control into your form.
  12. Enable the Rich Text Editor of the Message control by sliding the Rich Text toggle to the right.
  13. Click to show the Rich Text Editor menu
  14. Click on the Font dropdown in the toolbar.
  15. Custom fonts are appended to the standard supported fonts.

Message Control Style and Settings Tabs

To display different background colors, decorators or a border, choose a message type from the Message Type dropdown on the Setting tab of the property panel. You can still select style properties on the Style Tab.

Message Control in a Table

When you drop a Message Control in a Table and turn the Rich Text Editor on, the red pencil icon will not be visible on the control. Click the "Edit with rich text" link in the properties panel to open the RTE Editor window.

Message Control in a Repeat

You can drag and drop a Message control from the palette into a repeat or into a section that then gets dropped into a repeat. You can write Rules affecting the Message controls in repeats. Message controls in Repeats can contain templates. Repeat controls containing Message controls can be converted to Tables. Refer to the Control Type property for the details. 

Horizontal Layout using the Message Control

Let's say you wanted to modify a section of your form to reflect a horizontal layout. One approach would be to use the HorizontalLayoutusingtheTableControl.  Another alternative is to use three Message controls and three Radio controls. Follow these steps: 

  1. Drag and drop a Panel onto the designer canvas.  
  2. Drop Message controls into the panel for the user instruction and the labels Fellowship announcements, Conferences and workshops and Other major news and events. Select None in the Message Control Type field.
  3. Click on the Style tab. Set the width of the Message Controls to half the size of the panel.
  4. Place 3 Radio controls with Yes/No options to the right of the Message Controls for the 3 choices. Check the Hide Label property for each.
    1. Click the Style tab and enter 50% in the Item Width property
  5. You may have to insert a single line break HTML tag in the Message property to align the Message Control text with the Yes/No options of the Radio Control.

Here is what the form looks like in the Forms Designer:

 Here is how the form looks in use mode:

Center, Right-align or Justify Message Control

Text in Message Controls is left-aligned by default. The Message Control Style tab has a "Center" property which is the simplest way to center text in a Message Control, whether or not you are using the Rich Text Editor. At this time the RTE does not provide a way to change the text alignment in your Message Control. However, standard html tags allow this function. Here are some examples.

Right Align
<p style="text-align: right;">This text is RIGHT ALIGNED.</p>

Justify
<p style="text-align: justify;">This text is JUSTIFIED....</p>


Message controls as a spacer

Message controls are commonly used as a spacer to center other controls in forms/workflows. Simply delete the default Message text and change the Message Type to "None" to use a blank message as an invisible spacer for aligning other controls in your form. Refer to