palette offers a rich variety of controls that let you create virtually any form. All controls provide functionality as soon as you able

...

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

...

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. . Email addresses with apostrophes and longer domain names are allowed.

Email validation follows the OWASP recommendation. It validates that there is

• at least one '@' character
  
• the local-part is not greater than 64 characters
  
• the domain is not longer than 255 characters.

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.

...

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

Dropdown

...

Dynamic Options

Options for the Dropdown, Radio and Checkbox controls can be populated using 2 methods:

• Method 1 - 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:
• Method 2 - Designers can dynamically populate options at runtime from an external RESTful web service source. This can be accomplished with a business rule or if your preference is not to write JavaScript you can use the Dynamic Option feature. This method eliminates the need for a business rules.

Refer to the Dynamic Options topic for the details.

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

LDAP customers may have The ComboBox control supports three types of data retrieval: frevvoUsers, frevvoRoles and Web Service. The source for the options is selected from the Options Src property. Information about how to set up Options for the ComboBox control is discussed under the Dynamic Options feature topic.

You can use the Combobox to retrieve values from a database and enable a list of possible partial matches.

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

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 Removed

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 Removed

...

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.

Image Added

Drag/drop the ComboBox from the Palette or import it from schema. When you dnd 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. 

Existing forms/flows that contain the ComboBox control will have the value of the Options URL property in the Options Src field after upgrading.

Radio

...

ComboBox from Schema

You can change the Options Src for Combobox controls that are added to your form/flow 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 Added

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.

...

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.

...

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 RemovedImage Added

...

Max size is the upper limit for each attachment uploaded to your forms/flow. The internal upper limit is controlled by a configuration parameter - frevvo.attachment.maxsize. In the  cloud. It is set to 10 mbMb. 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.

...

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

Image RemovedImage Added

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

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

Image RemovedImage Added

View Attachments in Submissions

...

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  Preview form icon to see how your form displays.

Using Templates in a Message Control

...

Save Value Property

Check the Save Value property to include the value of the Message control in the form/flow submission document. This property is unchecked (default) when you add new Message controls to your form/flow. 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

Controls in your forms/flows that are dynamically populated can be included in the message text by using templates. The templates in the Message control are replaced with the values in these controls at runtime. For example, let's say you have a Product Order form with controls for the customer to select the product, color, size and select the option to include a gift card. When the order is complete, you want to display a message to the customer recapping the order. The image shows the control templates in the message text in the designer and the form at runtime. A business rule hides the Message control until the order is complete.

Message Control and Business Rules

The Message control supports the value property. The Save Value property must be checked for there to be a value and have it accessible in a business rule.

Message Control Style and Settings Tabs

You can chose a message type to display different background colors, decorators or a border 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

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

...

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

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.
   
   Image Modified
   
   Here is what the form looks like in Use mode:
   .
   Image Modified

...

Link Control (for URLs)

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. 

Image Control

This control lets you include an image (picture, Templates are allowed in the Link controls href/url property.

Save Value Property

Check the Save Value property to include the value of the Link control in the form/flow submission document. This property is unchecked (default) when you add new Link controls to your form/flow. Refer to the Save value property topic for more information and to see how this property can help with Link controls in Optional Sections.

Link Control and Business Rules

The Link control supports the value property. The Save Value property must be checked for there to be a value and have it accessible in a business rule.

Image Control

This control lets you include an image (picture, logo, etc.) in your form. The control allows you to use .JPG, .GIF, and .PNG files or any other image type that your browser supports. 

...

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.

Image File Size

...

Save Value Property

Check the Save Value property to include the value of the Image control in the form/flow submission document. This property is unchecked (default) when you add new Images controls to your form/flow. Check the Save Value property if you are using the Image control in a template i.e.Print Headers/Footers in the form/flow PDF.

Refer to the Save value property topic for more information and to see how this property can help with Image controls in Optional Sections.

Image File Size

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:

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

<iframe width="100%" height="500" src="//www.youtube.com/embed/-vNOPmC5fVc" frameborder="0"></iframe>

...

If you are using MySql and you are uploading a large video, you may see this message:

Image Removed

...

a single line break HTML tag - <br/>.. 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.

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.

...

<center>Click on the <img src="/frevvo/images/icons/add.gif"/> icon to add addmoremore phone numbers to the list.<br/></center>

...

• You may drag in only one control, and you may not drag in tab controls, panels or other repeat controls. 
• You may not drag in trigger, image, video, link, upload, tab, table or signature controls. 

...

Mobile forms work best when they are broken up into small, logical pieces. The PageBreak control lets the designer create a mobile layout consisting of multiple pages where each page contains a small number of controls (logical groupings). The user navigates between the pages via Back/Next buttons, or on a device that supports it, by swiping left/right.

Tablet and Smartphone forms  

Forms are generated using HTML5 controls so features like Custom Keyboards, Date pickers etc. can be used. For example:

...

If your form has PageBreak controls in it, they will not be visible by default when you edit your form in the form designer. You can toggle the visibility of these controls via the the form designer. You can hide them by clicking the  icon in the toolbar.

When you drag/drop a PageBreak control from the palette into your form, the visibility will automatically be toggled so the controls are visible.

...

The PageBreak control cannot be dropped BELOW any control. It can be dropped BETWEEN 2 controls or ABOVE any control. For example, say you had a form with two panels side by side and you wanted to drop a PageBreak control in between them. Drag the PageBreak control from the palette to the left of the second panel in the form until you see the  up arrow as shown in the image below:

Drop the control when you see the Image Modified green up arrow and the PageBreak control will drop between the two panels.

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.

...

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.

.   The Image Removedtoggle switch just above the textarea message property turns the Rich Text Editor on/off. When yThe textarea replaces the Rich Text Editor. The status of the Rich Text Editor will be remembered - so if it was turned on when your saved your form/flow, it will be turned on the next time the form/flow is opened for editing

Save Value Property

Check the Save Value property to include the value of the Form Viewer control in the form/flow submission document. This property is unchecked (default) when you add new Form Viewer controls to your form/flow. Refer to the Save value property topic for more information and to see how this property can help with Form Viewer controls in Optional Sections.