...

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.  

...

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

For example, A time of 5:00 PM is entered into a Time control and a time zone.The Date/Time control relies 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 . The time portion will be calculated based on the date and whether or not (EST) and it is not further adjusted because Daylight Savings Time is not observed in that 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.

Image Removed

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. 

Image Removed

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 Image Removed 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:EST on February 5th.

Image Added

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. 

Image Added

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 Image Added 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/rapqa.com/user/raprap1/app/_w-eeENIYEeGYrP3vLLbERAcm8JIGR7EeG4D7_jeDNSHQ/formtype/_CXKywNIaEeGYrP3vLLbERAXyC2wGbsEeG2-p_Sm3q9pA/popupform?embed=true&_extId=0.04202334303408861locale=&_formTz=America/New_York

...

Tijuana

When users enter data into a form, 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/flow
• Test form/flow
• Initialize submission
• Access form/flow/tasklist (outside space)
• Access form/flow/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>

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: ###.###.####, ###-###-####,###-####, or ##-####.  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.

Number

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

Selection Controls

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

• Dropdown
• Radio
• Checkbox
• T/F

The  palette does not include a Combo Box control — a dropdown list in which a user can type a new value or option — because they are not part of standard XHTML. However, many  customers use dropdowns, radio buttons, or checkboxes with an Other option and the Comment property to provide a text box for additional information when the last option in the selection control is chosen. 

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. parameter is not required. You may notice that URLs for the following  functions will contain the  _formTz parameter appended to them:

• Edit form/flow
• Test form/flow
• Initialize submission
• Access form/flow/tasklist (outside space)
• Access form/flow/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>

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: ###.###.####, ###-###-####,###-####, or ##-####.  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.

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
• T/F
• Combobox

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 Control

LDAP customers may 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 flow for user selection? Using a traditional dropdown control is not ideal especially when you have thousands of users to pick from. Dropdown control options are confined to a predefined list and maybe limited by the default max result size of an LDAP query. The Combobox control allows users to pick from a predefined list of values or type a value that is not in the list.

 The Combobox is used internally for functions such as creating the Access Control List.

Here's how it works:

1. Drag the Combobox control into your form/flow
2. Set the Options Url to one of two static frevvo URLS: Replace <tenant name> with your tenant name.
   1. This url returns a list of ALL users returned by the tenant's security manager
      
      1. /frevvo/web/tn/<tenant name>/users?match=    
   2. This url returns the list of ALL roles returned by the tenant's security manager
      
      1. /frevvo/web/tn/<tenant name>/roles?match=    
         
3. The ?match= URL parameter currently has no supported options

Image Added

Users can typeahead to narrow the choices based on the letters entered. User ids and roles are case sensitive so remember to use the correct case when typing.

Image Added

The combobox supports the ability to specify single or multiple values. Simply check the single value checkbox if you want to limit the choice to one value.

Image Added

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.

...

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.

...

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.

Image RemovedImage Added

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 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,  will check the upload against the filter and if there is no match, reject the upload with an error message.

...

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-select feature. See below for more information.

...

Dynamic Required vs Optional

It is not possible to make an upload control required dynamically in a business rule. This control does not have a required property on the Properties panel for the Upload control

...

. However, you can make the

...

control required by setting the min # property greater than 0. 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. Please see the documentation for controlling required vs optional for section controls.

Restricted Content Types and Other Mime/Ext

...

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.  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 in-house by modifying the context parameter: frevvo.upload.file.types in the web.xml file. See Installation Tasks for the details.

Image RemovedImage Added

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

...

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 Upload control is supported in newer versions of browsers. For example, multi-selection of files works in Safari, Chrome and Firefox.

...

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

 itself sets an upper limit on attachment sizes. If you enter a value into the control's max attachment size property greater than ' internal default upper limit, you will see an error message displayed on the upload control.

...

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:

• It 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 may 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. 

Image Removed

...

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

Image Added

Mapping an Upload Control 

...

Let's say you wanted to modify a section of your form to reflect a horizontal layout as shown in the image.

One approach would be to use the Table and Radio Controls.  Another alternative is to use a Message control in conjunction with a Radio control to accomplish this. Follow these steps: 

1.  Use a Message control for the labels Fellowship announcements, Conferences and workshops and Other major news and events
   
    Image Modified
   
   
2. Place the Radio control with options to its right. 
   
    Image Modified
   
   
3. Check the Hide Label property of the radio control. 
   
   Image Modified 
   
   
4. Here is what the form looks like in Use mode: 
   
   Image Modified
   

You can use the Message control to center images uploaded to your form. Click here for the details.

...

Use the Link Control when you want to include a URL in your form. When users click the link, the button text is underlined and the target URL will open in a separate browser window. The Link control has a default button color and is automatically decorated. You cannot remove the decorator or change the button color. Unlike most controls, the default width of the control, when dragged from the palette and dropped into your form is 3 columns. Click here for more information. The New Line  property is checked by default. 

...

Choose images that fit sensibly in your form before you upload it. The “regular” form size is 600px. You can resize an uploaded image by selecting the image control in the designer, clicking on the style tab in the properties panel and setting the width.

Centering Images using the Message Control

You can add a Message control on the left side of an image uploaded to your form to center the image. Replace the default text in the message control with one or more spaces. Change its Message Type to None. This will add a blank area on the left of that image and move it into the center. Click the Style tab if you need to modify the width of the message control.

Video Control

This lets you include video files in your form and works the same way as the image control. The control supports .SWF files and other video file formats that are supported by your browser. This control does not allow the designer to resize the video area. If your video is already hosted on another web service it is often best to embed your video into your form using a message control and adding the following html code to that control as shown below:

...

Use sections to create groups of controls that users can expand and collapse. Sections are always 12 columns wide when you drag/drop it from the palette and each is itself divided into 12 columns. Click here for more information.

Click the Image Removedicon Image Addedarrow to expand a collapsed section or Image Removed to Image Addedor to collapse an expanded section. When users access your form the section can be expanded or collapsed—it’s up to you. If you want the section collapsed initially, make sure it is collapsed when you save (finish) your form. You can   show/hide the section expand/collapse icon via a checkbox on the control style tab.

...

Columns in a table may require different properties depending on your specifications. There is a properties panel for each column where the properties shown in the image below can be selected. Checking a property on the column property panel will apply the selection to all the rows in that column in the table.The required and comment properties for the Visible property is available at the column level and can be used to Show/Hide a column at runtime using a business rule.

If you have a dropdown, radio and checkbox controls are or checkbox control in your table the required and comment properties are selectable on the cell property panel. 

Modifications made to one cell in a table on the cell property panel will be replicated in all the rows of the column in the table.  The The Control Type drop down, provides choices to change the type of control from a text control to one of the following types: Email, Money, Phone, Quantity, Number. Changing the Control Type of one cell will change the control type for all of the cells in the column of the table. For example, all of the cells in a column in a table that will be used to collect mileage information can easily be changed to number controls by selecting that choice in the Control Type dropdown on one of the cell property panels.  

...

Required cells in a table will display in the edit and test modes with a pink yellowish background color as shown. When you drag the table control from the palette into your form, all cells are marked required. Individual cells can be designated as required/optional by checking/unchecking the required checkbox on each cell property panel. Changes made to the required property in one cell in a column will add/remove the requirement from all the cells in the column. Refer to Setting Properties for more information.

Image Removed Image Added

Error messages for invalid data in a table will display one at a time. 

...

Let's try another example. You are designing a form for mobile devices. You drag and drop one control on the form. Now you want to add the PageBreak control and then add other controls below it. You cannot drop the PageBreak below any control so you will have to add the other controls first and then drop the PageBreak control where you want it. Once you add more than one control to the form, you can drop controls from the palette or the form above or below the page break. You can drag and drop the PageBreak itself anywhere at the root of the form. The PageBreak control should not be dropped inside sections, panels, tables or repeat group controls. The only exception is the Tab control. See below for the details.

...

You cannot enter a signature into the control in edit mode. In use mode, clicking or touching a signature control presents the signature entry dialog that is illustrated in the image below. Use your mouse, track pad, touchscreen, stylus or a stylus configured Topaz Electronic Signature Pad to sign. You can clear the signature in order to sign again by clicking the Clear button.The Cancel button negates any changes. All signature controls are empty of any signature (shows the X and a line) when the user first displays the form. Entered signatures are only applied to the use mode form when the user selects Done.

Notice the signature is displayed in the form scaled down into the signature control.

Image Removed

The Text field provides a text entry area where you can type your name using the keyboard. Typed text will be entered displayed in the form scaled down into the signature area. The text field is very helpful for individuals with motor impairment using an accessible form.Image Removedcontrol.

Image Added

Forms and flows can be made accessible to help individuals with visual and motor impairment. Refer to this topic for the behavior of the Wet Signature control when this property is checked.

will display the error message "Signature support not available. Please use a later browser version with HTML5 support for canvas." if your browser does not support HTML5 canvases. 

...

The Form Viewer Control is used to allow a generated PDF to be viewed as part of a form/flow. This control is visible in the Forms designer palette to be used when generating "Pixel Perfect" PDFs in the Forms designer. Refer to this documentation for the details.

Combobox Control

Using a traditional dropdown control for user selection is not ideal especially when you have thousands of users to pick from. This is often the case for   customers who want to pull a list of users or roles from their LDAP server into a form or flow.

.