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

width	400px

On this page:

Table of Contents

maxLevel	2

...

A new Placeholder property has been added to the textarea properties pane. The Textarea control is the only input control that does not have a decorator.

Do not select a Textarea field as a Searchable Field if the amount of text stored in the field is greater than 32k.

Date, Time, Date/Time

The date control can be used in a form as a date, time or date plus time control. The Control Type property lets you select from a dropdown of choices: date, time or date/time. The designer can choose from a variety of formats for each type. Rules can be applied to the Date/Time control in all variations. See the Rules Examples chapter containing numerous examples and code samples.

...

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.

...

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

Image Modified

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.

...

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.

...

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

In-house, customers can control the internal upper limit via the frevvo.attachment.maxsize parameter property in the web.xml or frevvo.xml files<frevvo-home>\tomcat\conf\frevvo-config.properties file. Initially, this value is set to 10485760 bytes. 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:

...

The value in the user profile takes precedence over the configuration parameter.

...

The value in the Max Size property for an Upload control takes precedence over the value in the Max Attachment Size field. All values must be entered in bytes and cannot exceed the max size configured on the server level. Refer to the Maximum Size for Attachments topic for more information.

Changing the file name of an uploaded attachment in the form/flow submission

The File Name property allows designers to set up an attachment name that applies to all files uploaded with an upload control. Attachments with configured file names will be seen when viewing the attachment section of a submission.

...

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.

...

Tip

If you are using the Chrome browser, you must type the text, select it and then click the menu option.
You can include (copy/paste) special characters that get encoded as special entity references in the text of the Message control, Examples of these special characters are left and right quotes etc... forces special non-ascii entities to be encoded numerically. Check this website for the list of known entity references.

Adding Custom Fonts to the Rich Text Editor

Custom fonts can be added to the list of fonts displayed in the Font dropdown of the Rich Text Editor. Refer to Using Custom Fonts in the Message Control for implementation details.

Exiting the Rich Text Editor

...

If your organization has special font requirements, custom fonts can be used to style text in the Message Control . The custom fonts must be available to to the HTML document containing the form. text. Typically custom fonts can be added dynamically with JavaScript. The exact JavaScript may will vary based on the font.

There are two methods to use the available for enabling custom fonts in the Message Control. :

HTML markup OR
In-house customers can add custom fonts to the font dropdown in the Rich Text Editor. This is optional.

Warning

Both methods described below require custom JavaScript to dynamically load custom fonts to Live Forms. The JavaScript varies based on the font. Contact the font vendor to obtain the exact JavaScript for the your custom font(s) you are using. Use the Custom JavaScript feature to upload the JavaScript to an each application or to your tenant. frevvo recommends uploading the JavaScript to the tenant so that it will be available to all designers and all applications.

If you choose to include custom fonts in the HTML markup added to the Message Control property, contact the vendor to obtain the exact HTML needed.
If you choose to add custom font(s) to the Message Control Rich Text Editor, contact the font vendor for the correct value to use for the font name in the frevvo.message.rte.extra.fonts configuration property.

...

Upload custom JavaScript to dynamically load custom fonts to each application or to your tenant. The custom JavaScript will vary depending on the fonts that you are using. Contact the vendor for the correct JavaScript for the custom font(s) that you are using.

Expand

title	Click here for an example of a tenant custom JavaScript when added to load the tenant that loads 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);
		}
	}
}

Drag and drop a Message Control into your form/flow.
Add the markup and text to the Message property. Since all fonts are different, you may need to contact the vendor for instructions to include the font in your HTML
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>
Save and test your form/flow.

Adding Custom Fonts to the Rich Text Editor

If you want custom fonts to be available in the Message Control's Rich Text Editor, in-house customers can add the frevvo.message.rte.extra.fonts property to the <frevvo-home>\tomcat\conf frevvo-config.properties file .

...

Upload custom JavaScript to dynamically load custom fonts to each application or on the tenant level. The custom fonts must be available to the HTML document containing the form. Typically custom fonts can be added dynamically with JavaScript. The exact JavaScript may vary based on the font. Contact the vendor for the correct JavaScript for the custom font(s) that you are using.

Expand

title	Click here for an example of a tenant custom JavaScript loads to load the Google Roboto condensed and the trial Century Schoolbook Roman fonts when added to the tenant.

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);
		}
	}
}

Stop .
Navigate to <frevvo-home>\tomcat\conf.
Edit the frevvo-config.properties file
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.
  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
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.
Save the file.
Restart .
Login as a designer user.
Create/Edit an Application
Create/Edit a Form
Drag and Drop a Message control into your form.
Enable the Rich Text Editor of the Message control by sliding the Rich Text toggle to the right.
Click to show the Rich Text Editor menu
Click on the Font dropdown in the toolbar.
Custom fonts are appended to the standard supported fonts.

...

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:

Drag and drop a Panel onto the designer canvas.
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.
Click on the Style tab. Set the width of the Message Controls to half the size of the panel.
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
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)

...

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

...

Versions Compared

Old Version 66

New Version Current

Key

Date, Time, Date/Time

Changing the file name of an uploaded attachment in the form/flow submission

Adding Custom Fonts to the Rich Text Editor

Exiting the Rich Text Editor

Adding Custom Fonts to the Rich Text Editor

Message Control in a Repeat

Horizontal Layout using the Message Control

Link Control (for URLs)

Centering Images using the Message Control

Trigger Control

Page Comparison

Versions Compared

Old Version 66

New Version Current

Key

Date, Time, Date/Time

Changing the file name of an uploaded attachment in the form/flow submission

Adding Custom Fonts to the Rich Text Editor

Exiting the Rich Text Editor

Adding Custom Fonts to the Rich Text Editor

Message Control in a Repeat

Horizontal Layout using the Message Control

Link Control (for URLs)

Centering Images using the Message Control

Trigger Control