Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Section
Column

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 but need to be customized (edited) to suit the form you are designing.

The purpose of each control is described below.

Column
width400px

On this page:

Table of Contents
maxLevel2

...

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.  

...

Note

You may notice that the Max Length property for the numeric controls: Number, Quantity and Money is no longer present in the v5 Forms designer. Uploading forms that were designed in v4.1.7+, with the Max Length set to a value, will not show this property in the v5 designer. However, the max length value will be honored when the form is executed in v5 use mode.

Selection Controls

 supports 4 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
Tip

See the Item Width property for styling options.

...

.

...

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. 

...

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.

...

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.

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 Modified

Info
  1. It is recommended that designers drag and drop Combobox controls from the Palette only when adding this control to forms and flows. Adding a schema that contains a Combobox control as a data source for your form/low may produce unexpected results.
  2. The Combobox control will not work for public forms as the call to find users and roles is secured.

...

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

...

You may notice that some file types are misidentified when uploaded in Use mode. Files with .xls and .ppt extensions are described as an application/msword file and .docx and .xlsx are shown with an application/zip description. This is a limitation of the mime detection library used in version 5.1. This library will be replaced in a future release.

...

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.

Note

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.

Info

Selecting zip as the Restricted/Mime type, uploading a zipfile and submitting the form may exhibit some unexpected behavior when downloading the zipfile from the submission if you are using IE9+ as your browser. Clicking on the attachment in the  submission repository does not save the uploaded zipfile as a zipfile. Instead, it will save it as a file named Upload91. As a workaround, you can open the file using winrar.exe and then save it or simply use right click and and select the 'save as' option.

...

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:

Section
Column
width50%

Image Added
Image Removed 

Column
width50%

 

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

Section
Column
width50%

Image Added
Image Removed 

Column

Multi-select

...

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

Note

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

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. 

 

Note

Labeling column headers, must be done from the properties pane – in place edit of column headers is not possible.

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.

Wet Signature and Accessible forms/flows

Forms and flows can be made accessible to help individuals with visual and motor impairment. If the Accessible property is checked for a form/flow, an additional Text field displays. Refer to this topic for the behavior of the Wet Signature control when this property is checked.
 Image Removed

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. 

...