Versions Compared

Key

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

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

Column
width400px

On this page:

Table of Contents
maxLevel2

...

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

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

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

...

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

 Image Modified

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

...

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.

Image Modified

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

...

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.

Image Modified

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.

Image Modified

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

Image Modified

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 Modified

Image Modified 

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.

Image Modified

Use another selection control if the choices are not restricted to Y/N. An example would be a gender control where the possibilities are male or female.

...

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.

Image Modified

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.

Image Modified

Note

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.

...

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 Modified

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

...

width50%

Image Modified

...

Column
width50%

Image Removed 

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

...

...

width50%

Image Modified

...

Column

Image Removed

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.

Image Modified 

Max Size

Max size is the upper limit for each attachment uploaded to an Upload control in your forms/workflow. The internal upper limit is controlled by a configuration parameter - frevvo.attachment.maxsize. In the  cloud. It is set to 20 Mb. If you enter a value into the control's max attachment size property greater than  internal upper limit, you will see an error message displayed on the upload control.

Image Modified

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:

Image Modified

The value in the user profile takes precedence over the configuration parameter but it cannot exceed the internal upper limit configured in the frevvo Cloud - 20 MB.

...

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

Image Modified

Info
  • 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. 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 cannot resolve the template, the {Name} is removed.

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

...

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

Image Modified

File Name Property Behavior in Use Mode

...

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

Image Modified

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

Image Modified

View Attachments in Submissions

...

  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.

Image Modified

File Names for Downloaded Attachments

...

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

Image Modified

Note

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

...

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.

Expand
titleClick here to see how to map the upload control to your PDF...

 

 

 

Panel
bgColorGAINSBORO

Image Added

 

 

 


Image Modified

Message Control

Message controls are most often used to add static text to your form or workflow. Form titles and helpful instructions for your users are just a few ways to use the Message control, It can also be used in the following not so obvious situations:

...

Type the text of your message into the textarea in the Message control properties pane. You can add HTML to format your message in this property as well or invoke the Rich Text Editor  which will create the HTML for you.
Image Modified

Rich Text Editor

...

For example, an Instruction section for users that has a bullet list, bolded text and an image can be quickly and easily created by adding the Message control to the section and applying the text stying and image features available in the Rich Text Editor.

Image Modified

Using the Rich Text Editor

...

Click the icon to display the editor menus. When the menus are displayed, click the icon to hide them.

Image Modified

Info
  • The state of the Show/Hide menu items is remembered so if you exit the Message control with the menus showing you will see them the next time you enter the Rich Text editor.
  • If a Message control cannot be edited in the forms/workflow designers, delete it from the form/workflow then re-add it. The control will become editable again due to changes in the handling of certain html tags.

...

When you click away form the Message control you can get an idea of how it will look to your users. Of course, you can always click the theImage Modified Preview form icon to see how your form displays.

...

Warning

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. may not recognize it as a template and the templates will not resolve to the entered values.

...

Using Custom Fonts in the Message Control

...

  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.
  2. Drag and drop a Message Control into your form/workflow.
  3. Add the markup and text to the Message property.

    Code Block
    <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

...

  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.
  2. Stop Live Forms.
  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.

      Code Block
      titleExample 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 Live Forms.
  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.

...

When you drop a Message Control in a Table, the rich text editor is rendered much smaller when you click on it. This is illustrated below. Notice that none of the rich text editor's menus are displayed.

Image Modified

Clicking the icon to toggle the menus on expands the height of the in-place editor.

Image Modified

The Rich Text editor will be vertically expanded when you show the menus in Message Controls or any group control that you drop a Message control into that is less than 4 columns wide. 

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 as shown in the image. c 

 Image Modified

One approach would be to use the Table and Radio Controls.  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:
Image Modified

 Here is

...

how the form looks

...

in

...

use mode:

...

Image Modified

Message controls as a spacer

Message controls re commonly used as a spacer to center other controls in forms/workflows. In previous releases, the Message property had to be set to a single space. The Message control can now be set to an empty string eliminating the need to add the space. Refer to Centering Images using the Message Control for an example.

Image Modified

Link Control (for URLs)

...

The maximum size of the image that can be uploaded is configured with the frevvo.asset.maxsize context parameter. The default value is 2097152 bytes. If the size of the image exceeds the specified value, the following message displays:
Image Modified

The message informs the designer what the configured limits are so they can take corrective action.

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. Message controls can be set to an empty string. Delete the default text in the message control. 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.

Image Modified

Trigger Control

The trigger control adds a button to your form and is used in conjunction with rules. If your form does not have rules you will not need the trigger control. If your form does have rules, see Triggers & DynamicOptions for details on how to use trigger controls and examples of when you might want to use them.

...