This documentation is for Live Forms 7.4 Not for you? Earlier documentation is available too.

Versions Compared

Key

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

...

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.

...

Info
  1. The Combobox control will not work for public forms as the call to find users and roles is secured.
  2. The ComboBox control will not work in Test Edit mode. Click the save and test icon to verify your changes.
  3. The maximum number of items returned from a query is 1000 when using the ComboBox control in a form/flow if your tenant is using the LDAP Security Manager. This is an LDAP limitation.
  4. The maximum number of items returned from a query is 1000 when using the ComboBox control in a form/flow if your tenant is using the Azure SAML Security Manager.

...

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 

Frevvoproduct
 cloud. It is set to 1 10 Mb. If you enter a value into the control's max attachment size property greater than 
Frevvoproduct
 internal upper limit, you will see an error message displayed on the upload control.

In-house, customers can control the 

Frevvoproduct
 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

...

  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.

File Names for Downloaded Attachments

...

You can take a picture with your iPad or iPhone and map the photo into a generated pdfImage types supported are: gif, png, jpg/jpeg and bmp. Tiff if is not supported. Non image file types uploaded are ignored. The designer should be aware of the following when mapping the Upload control:

...

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.

Image Modified

Message Control

...

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.

...

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

...

  1. Select the feature from the toolbar first, then type your text. For example, to write in bold, click the button on the toolbar then type your text. Bolded characters display as you type.
  2. Select a portion or all of the text in the Editing area with your mouse then select the feature from the toolbar.
Tip
  • If you are using the Chrome browser, you must type the text, select it and then click the menu option.
Info
  • 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...
    Frevvoproduct
    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

To exit the Rich Text editor in the designer, click the icon. Turn it off by sliding the toggle switch to the off position.

Frevvoproduct
remembers the Rich Text Editor mode when your form/flow was saved and it display it in that mode the next time the form/flow is opened for editing.

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

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

Using Custom Fonts in the Message Control

If your organization has special font requirements, custom fonts can be used to style Message Control text. Typically custom fonts can be added dynamically with JavaScript.  The exact JavaScript will vary based on the font.

There are two methods for enabling custom fonts:

  1. HTML markup OR
  2. 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 your custom font(s). Use the Custom JavaScript feature to upload the JavaScript to 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.
HTML Markup
Follow these steps to use HTML markup:
  1. Upload custom JavaScript to dynamically load custom fonts to each application or to your tenant.

    Expand
    titleClick 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. Drag and drop a Message Control into your form/flow.
  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/flow.

Image Added

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 .

Follow these steps:

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

    Expand
    titleClick 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
    Frevvoproduct
    .
  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. 

      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


    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.

  6. Save the file.
  7. Restart
    Frevvoproduct
    .
  8. Login as a designer user.
  9. Create/Edit an Application
  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 Added

...

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.

...

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.

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.

...

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.

...

Say you want users to be able to enter one or more addresses, phone numbers, or other data. With repeating controls, your form can dynamically display as many controls as a user needs rather than always showing extra input controls that may not be needed. You can write a business rule to allow only certain number of items based on user input.

Repeat controls  do do not have a label. You can identify a repeat control in the designer by the palette icon for a repeat seen on top-left header.  Repeats are assigned a name by default i.e.Repeat96


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

...

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.

Tip

If you need to add more controls to the section, you must first drag the section back out of the repeat. Add the additional controls, and then drag the section back into the repeat. Panels are the exception: you can drop a panel into a section without first dragging the section out of the repeat

...

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

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.

 

 

Since all fonts are different, you may need to contact the vendor for instructions to include the font in your HTML