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

...

To validate the content in each input control,  assigns frevvo assigns a default XML schema data type to each control.  The table below shows the default data types for each input control.

...

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. 

Image RemovedImage Added

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:

...

...

The Money control allows users to enter U.S. currency. Users may type commas and a decimal point but will 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.

...

The Number control is used for entering decimal numbers. Users may enter any number of digits after the decimal place.

Selection Controls

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

...

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

...

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

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

 Image Modified

Drag/drop the ComboBox from the Palette or import it from schema ComboBoxfrom Schema. When you drag/drop the ComboBox from the Palette, it does not have a Control Type 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. 

...

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 allowed. Checking the “Yes” checkbox of the Boolean control results in a true value in the XML document.

...

The upload control contains special properties to control the max attachment size allowed (in bytes), the min and max number of attachments MaxSize, the Min/MaxNumberof Attachments to accept per form submission and to allow the form designer to specify restrictions RestrictedContentTypesandOtherMime/Ext 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  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 Changingthefilenameofanuploadedattachmentintheform/flowsubmission property allows designers to specify a naming convention for the attachment in the form/workflow submission.

...

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

...

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

...

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

...

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  cloudthe frevvo cloud, it is set to 25 MB. If you enter a value into the control's max attachment size property greater than  internal than frevvo internal upper limit, this property will reset. If left blank, it defaults to 26214400.

...

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

...

...

The Message Control has a Rich Text EditorRichTextEdit 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.

...

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.  will  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 entering text EnteringText and an icon in the top left that shows/hides the editor toolbar and menus.
   

...

...

...

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

   Expand
   title Click here for an example of a tenant custom JavaScript to load the Google Roboto condensed and the trial Century Schoolbook Roman fonts.
   Code Block // 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.

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

Image RemovedImage Added

Message Control and Business Rules

...

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 Table and Radio ControlsHorizontalLayoutusingtheTableControl.  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:

...

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

Trigger Control

...

The submit control adds a new button to your form that, when clicked, will submit the form. By default, new forms already contain a single submit button labeled "Submit." Submit buttons can only be added to the bottom of the form in a special drag/drop area.

Image RemovedImage Added

The background color of the Submit control is controlled by the form style. Submit and Cancel buttons are automatically decorated. The Submit button has a darker gradient background color to highlight it compared to the Cancel button.

...

If you have a required control inside a collapsed section, the section label turns red to cue users that they must expand the section and supply the required information before they submit the form. If you delete a section control while designing your form,  will  frevvo will automatically delete all controls you dragged inside the section. See Optional Sections for details on using the required property with sections and how that affects the validation.

...

You can drop another control in between two panels. In the image below, two panels 4 columns wide were dragged/dropped on the canvas. A Money control is dragged/dropped on the canvas and the width is changed to 4 columns. Moving the first panel to the left of the the Money control and dropping it when the  up green arrow appears will put the Money control in between the two panels.

If you delete a panel  automatically panel frevvo automatically deletes any controls you’ve dragged inside it.

...

A table/grid layout in a form is a useful space saving technique. The use of panels to create columns can be replaced by using the table control. This control makes table/grid form layout easy by allowing you to create a table with user designated columns and rows. You can edit the table name, column names, drag and drop new controls from the palette, and set the widths of the columns. You can control the number of rows in the table by clicking on Add/Remove icons that appear to the left of the first column in the table. You can hide the delete icon to eliminate deletion of a row in a table rows using the deletable property or allow only a certain number of items based on user input using a business rule. You can also use business rules for computed values, enabling/disabling fields, showing/hiding fields etc. When tabbing through a form, use Shift-Right arrow or click on a table cell to begin tabbing into a table. Tables are always 12 columns wide when you drag/drop it from the palette. Table controls do not have an identifying icon like 1063249489 Panels and 1063249489 Repeats do.

Image RemovedImage Added

When you drag the table control into your form, the control will have three rows and three columns. The Table is assigned a default name i.e.Table95. The columns will display the default names of col 0, col 1 and col 2 respectively. The  and   icons will display for each row in the table, allowing addition and deletion of rows. Deleting all the rows will result in a table with one row. Notice the name of each tables column is unique.

...

Other controls can be dragged into the table (Dropdown, Radio, Checkbox, Message, Text, Text area, Date, Email, Money, Phone, Quantity, Number, T/F). Drag the control from the palette. The new control will appear as a column positioned to the right of the column where it is dropped. For Example, a date control can be dragged from the palette and dropped over the Description of Expense column. Adjust the column widths ColumnWidths in the table if necessary. Notice that the cells in the added control column do not have the Required property checked. The form designer must set the Required property as appropriate for newly dragged columns. Help icons for a column with a label that has multiple lines may not align properly. Adjust the column widths if possible. 

...

Check the Prompt property checkbox on the Table control Properties panel to display a confirmation message if users attempt to delete a table row. The text of the message can be customized in the Prompt Msg property.The Prompt Msg property is only visible when the Prompt property is checked.

At runtime,  displays  frevvo displays the prompt when the user attempts to delete a repeat item if the Prompt property is checked. This applies to Table rows and Repeat items. If the user selects Ok the item is deleted. Selecting Cancel aborts the delete.

...

Dragging a message control from the palette and dropping it into a table will provide a column in the table that can be used to label the table rows. Move the message column to the desired position. The text of the message control of each cell in that column can then be set as desired.  The days of the week in the Day column of the Timesheet form shown below is an example of using the message control with modified text for row labels. Remember the Rich Text Editor MessageControl is available for easy creation of your Message control content.

...

1. Drag a Table control from the palette and drop it on the designer canvas.
2. Drag a Message control from the palette and drop it into the table to create a column. Click on the column header and check the Hide Label property on the Settings tab. Delete unwanted columns.
3. Modify the rows of the Message control column for the labels. The Rich Text Editor MessageControl is available for easy creation of your Message control content.
4. Drag a Radio control from the palette to the canvas. 
   1. Set up the Yes/No options for the Radio Control.
   2. Specify the item width on the Style tab so that the options display horizontally.
5. Drop the Radio Control into the table to make a second column. 
   1. Click on the column header and check the Hide Label property.
6. This is what the table will look like in Use mode. 
   

...

You can have multiple controls inside a repeat. To do this, first add your controls to a section control, and then drag the section into the repeat control. Only one section is allowed inside a Repeat control. Sections inside repeats will not have the Securities Properties Tab SecurityProperties, since signatures are not supported in Repeats.

...

If you add a control from a repeating element that was uploaded as part of a schema (maxOccurs > 1),  automatically  frevvo automatically will generate a repeat control and nest the repeating item in that control. The repeat control will automatically enforce the minimum and maximum occurrence constraints. When referring to repeat controls in various places such as Form Action display message, you must use a special template syntax. See templates for repeat controls for the details.

...

Check the Prompt property checkbox on the control inside a Repeat control Properties panel to display a confirmation message if users attempt to delete a repeating item. The text of the message can be customized in the Prompt Msg property.The Prompt Msg property is only visible when the Prompt property is checked.

At runtime,  displays  frevvo displays the prompt when the user attempts to delete a repeating item if the Prompt property is checked. If the user selects Ok the item is deleted. Selecting Cancel aborts the delete.

...

If your form has PageBreak controls in it, they will be visible by default when you edit your form in the form designer. You can hide them by clicking the  icon in the toolbar.
Image RemovedImage Added

When you drag/drop a PageBreak control from the palette into your form, the visibility will automatically be toggled so the controls are visible. Drag and drop a Page Break control from the palette into your form to specify pages on your mobile devices. You can set a page break for Phone, Tablet or both by checking the Tablet and Phone checkboxes on the Properties panel of the control. If neither is selected, it has no effect.  When the designer clicks Finish, will frevvo will generate a Smartphone layout and a Tablet layout with the page-breaks specified. If page-breaks are not specified, there will be just one page. The Employee on Boarding form shown below, when rendered on the iPad and iPhone, displays the company information, the new employee's date of birth and manager's name on the first page and the new employee's name, social security number and home phone on the next page because the first PageBreak control has both phone and tablet checked. If tablet is unchecked on the second PageBreak control, the name and address panels will display on the same page on the tablet.

...

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 PageBreaksinaTabControl for the details.

PageBreaks in a Tab Control

...

Forms and workflows 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.

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

...

Refer to Electronic Signatures for more information.

Limitations

•  does frevvo does not support drag and drop of a Signature control into a repeat control or its descendants or a table control. 
• The signature control in thin forms is not supported. 

...