Versions Compared

Key

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

Frevvoproduct
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
width400px300px

On this page:

Table of Contents
maxLevel2

...

To validate the content in each input control,

Frevvoproduct
stylefont-weight:bold
 assigns a default XML schema data type to each control.  The table below shows the default data types for each input control.

Input ControlXML Schema Type
Textxsd:string
Datexsd:date
EMail

types:emailType, an xsd:string restriction pattern defined in  types.xsd.

Moneytypes:number, an xsd:double restriction defined in types.xsd.
Phonetypes:phoneType,  an xsd:string restriction pattern defined in  types.xsd.
Quantityxsd:integer
Numbertypes:number, an xsd:double restriction defined in types.xsd.
T/Fxsd:boolean

The explanations below describe the controls generically—before you edit them to impose additional restrictions or define behavior specific to the form you’re creating.  

...

The Time control is used to denote the time of the day. This means it has no dependencies on time zones or offsets. It will not shift based on whether or not Daylight Savings Time is observed in a time zone.

...

Time data is no longer converted from the browser's timezone to a valid UTC format when posted in the form XML document in the submissions database. Refer to Viewing XML Documents for more information. Business Rules execute in the form time zone. 

Email

Requires The EMail control requires users to enter a valid EMail email address. The address must conform to the following syntax: <name>@<name>.<string><name>@<domain>. The email control provides rudimentary syntactic validation by checking for the presence of an "@" between the local-part (name) and domain, both of which can contain any character. The local-part can have a max length of 64 characters and the domain 255. Your usage may have stricter rules on what an email address can contain. In this case, you may want to use a text control with a pattern that represents your usage instead.

Multiple emails can be entered in the email control separated by either a comma or a semicolon; however, the syntax will only be validated on the first email entered.

Money

Allows users to enter U.S. currency. Users may type commas and a decimal point but

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

...

  • 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
    Frevvoproduct
    Dynamic Option feature. This method eliminates the
    need for a business rules.

...

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


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. 

...

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  

Warning
  • If you select a radio option as the default and later decide you do not want an option selected by default, you must remove

...

  • the control and

...

Warning
  • re-add it. Use caution if this is necessary for a form in production. 
  • Do not use the '>' character in a radio control option label if the radio is used inside a repeat control. This causes a known issue where the selected option in one radio repeat deselects when the value in the next radio item is selected.
  • Radio controls that do not display in a yellow background even if the Required property is set, can be reset to the proper state by changing the control type to different type and then back again.

A  Comment property can be used to  provide to provide a text box for additional information when the last option in the selection control is chosen. 

...

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, 

Frevvoproduct
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. For more details see handling attachments.

The File Name property allows designers to specify a naming convention for the attachment in the form/flow 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 multi-select feature. See below for more information.

...

Note

If you select "xml" for the restricted content types of an upload control, it will only accept xml files with an xml declaration. To upload xml files that do not have the xml declaration, the designer can enter xml into the Other Mime/ext field on the Property panel of the upload control. The Upload control will then accept any file with an .xml extension.

Info

Selecting zip as the Restricted/Mime type, uploading a zipfile and submitting the form may exhibit some unexpected behavior when downloading the zipfile from the submission if you are using IE9+ as your browser. Clicking on the attachment in the

Frevvoproduct
 submission repository does not save the uploaded zipfile as a zipfile. Instead, it will save it as a file named Upload91. As a workaround, you can open the file using winrar.exe and then save it or simply use right click and and select the 'save as' option.

Error Messages 

...

Error Messages 

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:

...

Max size is the upper limit for each attachment uploaded to an Upload control in your forms/flowworkflow in bytes. The internal upper limit is controlled by a configuration parameter - frevvo.attachment.maxsize. In the 

Frevvoproduct
 cloud. It , it is set to 20 MbMB. 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 this property will reset. If left blank, it defaults to 10485760.

When a user attempts to upload a file greater than the max size, they will see an error message displayed on the upload control.Image Removed

Image Added

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

The value in the user profile takes precedence over the server configuration parameter but it cannot exceed the internal upper limit configured in the frevvo Cloud - 20 MB. The value in the control Max Size property takes precedence over both the user and server parameters if it is more restrictive. Individual users will still be bound by the max attachment size set in their user profile, even if the upload control setting is higher.

In-house, customers can control the 

Frevvoproduct
 internal upper limit via the frevvo.attachment.maxsize parameter in the <frevvo-home>/tomcat/conf/frevvo-config.properties file.

...

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.

This property only affects the name of the file, not the extension which will be automatically appended. The file name can be a:

...

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.

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

  • When using a template in the file name, make sure the template field has data in it before uploading the attachment.
  • 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.

...

Once the designer has configured the File Name property and submissions have been created, attachments named with the specified criteria are viewed in the attachment section of a submission. Follow these steps to view them:

...

  • Adding custom client-side JavaScript to your form/flow.
  • You can use the Message control as a spacer to center controls. Click here to see how to use the Message control to center images uploaded to your form/flow.
  • Message controls can also be used to display a message to the user if a form/flow contains invalid controls and cannot be submitted. Refer to the Invalid Form Notification for Users to see how to implement this feature.

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.

...

The editor consists of an editing area for entering text and an icon in the top left that shows/hides the editor toolbar and menus.

...

Check the Save Value property to include the value of the Message control in the form/flow submission document and the translation file for multi language support. 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.

...

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.

Frevvoproduct
may not recognize it as a template and the templates will not resolve to the entered values.

...

Using Custom Fonts in the Message Control

...

Warning

Both methods described below require custom JavaScript to dynamically load custom fonts to Live Formsfrevvo. 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.

...

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

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. 

     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
    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);
            }
        }
    }
  3. Drag and drop a Message Control into your form/flow.
  4. 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>
  5. 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 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
      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 FormsRestart frevvo.
  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.

...

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 Added

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

Image Added

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

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

Image Removed

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 Removed

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. Click the Style tab and enter 50% in the Item Width property

...

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 Added

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 Added

    Here is what the form looks like in Use mode:
    .
    Image Added

Center, Right-align or Justify Message Control

Text in Message Controls is left-aligned by default. The Message Control Style tab has a "Center" property which is the simplest way to center text in a Message Control, whether or not you are using the Rich Text Editor. At this time the RTE does not provide a way to change the text alignment in your Message Control. However, standard html tags allow this function. Here are some examples.

Code Block
titleRight Align
<p style="text-align: right;">This text is RIGHT ALIGNED.</p>

Image Added

Code Block
titleJustify
<p style="text-align: justify;">This text is JUSTIFIED....</p>

Image Added

Message controls as a spacer

...

Tables are always 12 columns wide when you drag/drop it from the palette. Table controls do not have an identifying icon like Panels 23560212 and Repeats 23560212 do.

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.

...

Users can add/delete rows in a table control in a form depending on the requirements of the task. The forms designer can control the number of rows in a table by setting the Min/Max properties on the table properties panel. Min # defaults to zero and Max # to10. The Min #  value will dictate the minimum number of rows in the table and the Max # value specifies the maximum number of table rows allowed. Setting the Min# and Max# to zero will default the Max# to 1 resulting in a table with one row. All the cells in this one row table will be displayed in the designer and use mode with a pink color indicating the entire row must be filled in to submit the form. See Min/Max and Required properties for more information.

Designers creating accessible forms/flows can use the Summary property to specify extra help text that will be announced by Assistive Technology tools.

...

  • The Table control cannot be published by dragging to the custom palette. Currently, this can be done by clicking on Publish Control Template link in the properties panel.
  • Drag and drop of a Table control into a Repeat control is not supported. 
  • Schema controls cannot be added to a table that is dragged from the palette and dropped into a form.
  • Centering of a column header in a table cannot be done at this time but might be possible in a future release.

  • Margins given in percent for the table and table cells will not work in IE8. Use px values.

  • The f-page-break css class should not be used in table cells. 

...

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

...

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 is available for easy creation of your Message control content.

...

To delete a column in the table, click on the red in the top right corner of the column.  


Changing a Table Control to a Repeat

...

  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 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 controlSections inside Repeats will not have the Securities Properties Tab, since signatures are not supported in Repeats.

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

...

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.

PageBreaks in a Tab Control

...

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

...