Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
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
width400px

On this page:

Table of Contents
maxLevel2

...

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/Time control type is meant to represent a point in time, so certain functions in the Visual Rule Builder (year, month, day, hour, minute) are not available on this control type.

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.

...

When users enter data into a form, the &_formTz=<tz> parameter is not required. You may notice that URLs for the following  functions will contain the  _formTz parameter appended to them:

  • Edit form/flowworkflow
  • Test form/flowworkflow
  • Initialize submission
  • Access form/flowworkflow/tasklist (outside space)
  • Access form/flowworkflow/tasklist (from space)
Warning

You must specify the _formTz=<tz> parameter appended to the share URL when initializing a form with time or date/time controls from an XML init document, the _data parameter or a business rule that uses the rule identifier,form.load. The form server needs to know the timezone in which to return the date and time. Successful initialization cannot be guaranteed if the &_formTz parameter is not supplied. Refer to Initializing Forms with Data for the details. This URL parameter is not needed if your form/flow workflow only contains Date controls.

...

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

Image Modified

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. 

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

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 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 workflow 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 workflow if your tenant is using the Azure SAML Security Manager.

...

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

...

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

...

The File Name property allows designers to specify a naming convention for the attachment in the form/flow workflow submission.

Min/Max Number of Attachments

...

Max size is the upper limit for each attachment uploaded to an Upload control in your forms/flowworkflow. The internal upper limit is controlled by a configuration parameter - frevvo.attachment.maxsize. In the  cloud. It is set to 20 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 in the <frevvo-home>/tomcat/conf/frevvo-config.properties file.

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

...

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

...

The image displays the file names for attachments visible in the form/flow workflow submission detail when:

  • the File Name property uses a control template from the form/flow workflow (the custInfo field) and the default template {$FILENAME}
  • the File Name property is empty or uses the default template {$FILENAME}
  • the File Name property uses a fixed name (My Filename)

...

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

...

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

...

Message controls are most often used to add static text to your form or flowworkflow. Form titles and helpful instructions for your users are just a few ways to use the Message control, It can also be used in the following not so obvious situations:

  • Adding custom client-side JavaScript to your form/flowworkflow.
  • 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/flowworkflow.
  • Message controls can also be used to display a message to the user if a form/flow workflow contains invalid controls and cannot be submitted. Refer to the Invalid Form Notification for Users to see how to implement this feature.

...

Drag a Message control from the palette and drop it into your form/flow workflow then click on it, Notice the property panel to the right. The toggle switch just above the textarea message property turns the Rich Text Editor on/off. When you slide it to the on position, the message control transforms to an in-place rich text editor. The mode of the Rich Text Editor will be remembered - so if it was turned on when your saved your form/flowworkflow, it will be turned on the next time the form/flow workflow is opened for editing.

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.

...

Info
  • The state of the Show/Hide menu items is remembered so if you exit the Message control with the menus showing you will see them the next time you enter the Rich Text editor.
  • If a Message control cannot be edited in the forms/flow workflow designers, delete it from the form/flow workflow then re-add it. The control will become editable again due to changes in the handling of certain html tags.

...

To exit the Rich Text editor in the designer, click the icon. Turn it off by sliding the toggle switch to the off position. remembers the Rich Text Editor mode when your form/flow workflow was saved and it display it in that mode the next time the form/flow workflow 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  Preview form icon to see how your form displays.

...

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

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. may not recognize it as a template and the templates will not resolve to the entered values.

...

  1. Upload custom JavaScript to dynamically load custom fonts to each application or to your tenant. 

     Click 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/flowworkflow.
  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/flowworkflow

Adding Custom Fonts to the Rich Text Editor

...

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

...

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

Message controls as a spacer

Message controls re commonly used as a spacer to center other controls in forms/flowsworkflows. In previous releases, the Message property had to be set to a single space. The Message control can now be set to an empty string eliminating the need to add the space. Refer to Centering Images using the Message Control for an example.

...

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

...

Check the Save Value property to include the value of the Image control in the form/flow workflow submission document. This property is unchecked (default) when you add new Images controls to your form/flowworkflow. Check the Save Value property if you are using the Image control in a template i.e.Print Headers/Footers in the form/flow workflow 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.

...

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 Modified

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.

...

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

...


Testing Your Mobile Form

Currently, the best way to test mobile forms/flows workflows is to click the Test icon on the Forms and Workflows Home Page in the designer. You can click on  tablet and phone icons at the top to see an approximate rendering of your form on the selected device. . Sometimes, the mobile form/flow workflow does not look the same in these test form views as it does on the mobile device. It is recommended that you design/debug your form/flow workflow completely on the desktop first. Then you can add your form/flow workflow to a space and look at it on the mobile device.

...

Notice the signature is displayed in the form scaled down into the signature control.

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

...

The Form Viewer Control is used to allow a generated PDF to be viewed as part of a form/flowworkflow. 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..   

...

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