Versions Compared

Key

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

Each control setting property is explained below. Keep in mind that all controls do not have the same setting properties.

Image RemovedImage Added


Column
width350px

On this page:

Table of Contents
maxLevel2

...

European date formatting is supported. Allowable Date Formats consist of three different separators (.- or / or .) and four date display formats (DD/MM/YYYY, MM/DD/YYYY, YYYY/MM/DD and 3 letter month/DD/YYYY). 

Image Removed

 By using this property, dates entered into the form get translated according to the chosen format and will be reformatted to match the selected format.

...

On a mobile device, the date picker is typically used to provide a date so mobile versions do not support many date formats. If you have a date field with a default date in your form it must be formatted as YYYY-MM-dd in order for it to display correctly on mobile devices.

Image Added

 By using this property, dates entered into the form get translated according to the chosen format and will be reformatted to match the selected format.

  1. A date typed into a form field will be reformatted to match the selected Date Format 
  2. A date entered into a form field will be translated according to the selected format. For example,if you choose a European format of DD-MM-YYYY and enter 10-05-2009 the date value will be translated as May 10, 2009. If you choose a US format of MM-DD-YYY the date value will be translated as October 5, 2009. 
  3. If you choose any of MM-DD-YYYY using either - or / or . as the separator, all will be valid for that format but will be translated to the selected separator
  4. Users can still enter dates like Feb 3, 2001. It will be translated into the specified format

...

As soon as you mark a control required, the empty control displays a yellowish background gradient. Until users populate all required controls with valid data, they will not be able to submit the form because the Submit button will be disabled. 

You cannot mark grouping controls (tabs, panels and repeats) required. A section is one grouping control that does have a Required Property.  If a Section has the required property checked, required controls within it show a yellow background in design and Use mode. If the Section has required unchecked, required controls within it DO NOT show the yellow background color in design and Use mode. The yellow backgound color appears only when one of the required controls in the section is filled making it mandatory to fill other required controls within the section. 

Input controls that are direct children (directly inside) of repeat controls also cannot be marked required, nor do they need to be, since the min# and max# properties take care of this already. You may, however, make controls required when they are inside sections, tabs and panels.

You cannot edit the required property for controls that have been generated from an uploaded schema, since the schema already specifies this via the minOccurs attribute. If a control from schema appears as required and you don't want it to be required, edit the XSD and set minOccurs=0. Re-upload the XSD. Then the control will no longer appear required.

This property is very useful when using rules to hide/show sections depending on something else in the form. If you hide the section you may have to set the required property to false . See Visible/Invisible Sections in Rules Examples for full details.

Options

This property appears for dropdown, radio and checkbox controls and is how you populate the choices the user sees in these controls.

You may have option labels different from option values. The syntax for the options is <value>=<label>. The <label> is what will be displayed on your form and the <value> is what is saved as the selected value when the user submits the form.

When you first drag one of these controls into your form they have generic values: Option 1, Option 2 and Option 3. This matches the generic text you see in the Properties area. To supply your own values, simply overlay the values in the Options property with the values you want and add more (or delete) as necessary.

If you do not enter both <value> and <label> using the <value>=<label> syntax, then the value will default to the label. As soon as you tab off the options property, options without values will automatically be converted to the syntax.

Here the options are entered without values. In this case  will default the value to the label.

Image Removed

As soon as you tab out of the Options property the options will be automatically converted to the <value>=<label> syntax.

Image Removed

If you would like the submitted values to differ from the visible label then edit the options as follows. In this case the values are A, B, C, while the visible labels remain morning, afternoon, evening.

Image Removed

The order of choices in your control will match the order in the Properties area.  If you have choices can change the color displayed by Required fields by modifying a Style and then applying it to your form/flow. If you prefer an asterisk to designate required fields, enable the Accessibility feature by checking the Accessible property on the form/flow Properties pane. This feature was built to allow visually impaired users to access forms. Enabling this property adds an asterisk (*) for all required fields. If users move ahead from that field without filling it, they will see the error, "You can't leave this empty <control name>".

Image Added

If you click on the Submit button in a form that contains invalid data or required fields that are empty, invalid controls will be highlighted with an orange border. The designer can use a message control to notify the user that fields need to be filled or data needs to be corrected before the form can be submitted. This can be very helpful to users when trying to determine why a form does not submit. Refer to this topic for the details.

Image Added

You cannot mark grouping controls (tabs, panels and repeats) required. A section is one grouping control that does have a Required Property.  If a Section has the required property checked, required controls within it show a yellow background in design and Use mode. If the Section has required unchecked, required controls within it DO NOT show the yellow background color in design and Use mode. The yellow background color appears only when one of the required controls in the section is filled making it mandatory to fill other required controls within the section. 

Input controls that are direct children (directly inside) of repeat controls also cannot be marked required, nor do they need to be, since the min# and max# properties take care of this already. You may, however, make controls required when they are inside sections, tabs and panels.

You cannot edit the required property for controls that have been generated from an uploaded schema, since the schema already specifies this via the minOccurs attribute. If a control from schema appears as required and you don't want it to be required, edit the XSD and set minOccurs=0. Re-upload the XSD. Then the control will no longer appear required.

This property is very useful when using rules to hide/show sections depending on something else in the form. If you hide the section you may have to set the required property to false . See Visible/Invisible Sections in Rules Examples for full detail

Options

This property appears for dropdown, radio and checkbox controls and is how you populate the choices the user sees in these controls.

You may have option labels different from option values. The syntax for the options is <value>=<label>. The <label> is what will be displayed on your form and the <value> is what is saved as the selected value when the user submits the form.

When you first drag one of these controls into your form they have generic values: Option 1, Option 2 and Option 3. This matches the generic text you see in the Properties area. To supply your own values, simply overlay the values in the Options property with the values you want and add more (or delete) as necessary.

If you do not enter both <value> and <label> using the <value>=<label> syntax, then the value will default to the label. As soon as you tab off the options property, options without values will automatically be converted to the syntax.

Here the options are entered without values. In this case  will default the value to the label.

Image Added

As soon as you tab out of the Options property the options will be automatically converted to the <value>=<label> syntax.

Image Added

If you would like the submitted values to differ from the visible label then edit the options as follows. In this case the values are A, B, C, while the visible labels remain morning, afternoon, evening.

Image Added

The order of choices in your control will match the order in the Properties area.  If you have choices that need a logical order (you’d want a dropdown of US states to be sorted alphabetically, presumably), make sure the order is correct in the Properties area. (You can’t sort the text you enter in the Options property field but you can cut and paste.) 

...

This property determines whether the control is enabled or disabled when users first access your form. If unchecked, users may not enter a value in effectively making the control readonly.  Data cannot be entered until the control is enabled. (You can enable the control using a Rulerule.)

For example, say you are creating a wedding invitation form and want to know if the people completing your form are bringing a guest. Your form might include a text control for the guest’s name that becomes enabled only after users indicate (in another control) that they are in fact coming to the wedding.  

You are not permitted to disable grouping controls such as panels or repeats. However, there is an Enabled property for Sections, each of the columns in a Table and each tab in a Tab control. If "enabled" is set on Tab or Section, controls inside of these group controls would be enabled. Conversely, if the property is unchecked, controls inside of a section or tab would be disabled. This property will make it easier to write Business RulesDisabled tabs are still selectable and disabled sections can still be expanded and collapsed.

You can enable/disable the selection controls via rules thereby enabling/disabling all the selection control options. It is not possible to enable/disable individual options.

Disabled tabs are still selectable and disabled sections can still be expanded and collapsed. This is as designed. If you are trying to show/hide the contents of a tab/section, use the Visible property. 

...

  • Default - The background color for Default depends on the color scheme and is currently a grayish gradient in all color schemes. This is the message type for new controls
  • None - has no border, decorator or color. Controls in migrated forms will have this type post migration
  • Bordered - a border but no decorator or color.
  •  Info Info - default decorator and blue background color.
  • Success - default decorator and green background color.
  • Warning - default decorator and yellow background color
  • Error - default decorator and a red background color. 

...

These properties appear as part of a Table Control or , when your form has an input control inside a repeat control or an Upload control. Simply type a number (positive integer) into each property field. If you specify a min # of 1 and max # of 10, users must enter values in at least one input control or they will be unable to submit the form, but they may enter as many as 10. See Repeat Controls for more details. 

If you set the min# to 0, users initially will see one email control but won’t be required to supply an EMail Email address to submit the form. 

...

This is the control’s class name that was added to your form's XHTML markup. CSS class is typically used to reference the control in any CSS added to a theme. Since themes  are no longer supported, form customizations are accomplished by using Layouts and Styles. There are some css classes that are available. 

CSS Class to Add a Page Break

One built-in css class name is 'f-page-break'. If you want to add a page break to the printed view of the form's pdf, tiff, add f-page-break to the control that you want to start at the top of a new page. See Printing Forms for the details.

CSS Class to Reduce White Space

Another is the showhelp css class that is built into the Tight layout. For example, you can reduce white space even further with the Tight layout so that you have virtually no space between controls by selecting the hide label property on each control. This can be a way to implement a grid type layout as shown in this sample form below. 

When controls are this tight together there is no room to display the help icon for controls with help text. Notice that the first row of controls does displays the help icon. This is done by putting the string showhelp into the css class property for each control in the first row. This is a useful way to have help at the top of each column.

CSS Class to Set Font Size for the Table and Message Controls

There are seven CSS classes that set font size that can be used with a Message or Table controls. Add these into the css class property on any control or table cell. They are listed herefor these controls only. Other use cases are not supported.

Here is the list:

  • f-font-xx-small
  • f-font-x-small
  • f-font-mallsmall
  • f-font-medium
  • f-font-large
  • f-font-x-large
  • f-font-xx-large 

...

Selecting a choice from the Label Size dropdown on the Style tab of some controls, such as the Message control, will override the css class. 

CSS Class to Display Invalid Form Message on Submit

This CSS class is only available in v6.1.4. You can use the CSS class f-submit-error to display a message control that notifies the users that the form cannot be submitted because there are required controls that are empty or controls that contain invalid data. Refer to this topic for the details.

Image Added

If you are using Live Forms in-house, Cascading Style Sheet code that was used in themes applied to forms/flows in previous Live Forms releases, can be added to a newly created style.css file in the frevvo.war file . The context parameter, frevvo.css.url, in the web.xml file must be changed to point to it 

Button Color

You can change the color of the trigger button by selecting a choice from the Button Color dropdown.

...

  • Default - The background color for Default depends on the Style applied to your form.
  • None - has no border, decorator or color
  • Green - default decorator and green background color
  • Blue - default decorator and blue background color
  • Yellow - default decorator and yellow background color
  • Red - default decorator and red background color
  • Light Blue - default decorator and light blue background color

Image Removed

Printable

This property determines whether or not this form field will appear in the  in the PDF document view of the form. If unchecked, the field will not appear in either view.

You can set the property on a section control and it will automatically apply to all controls inside the section control. This is often used in business rules. See Show/Hide/Print.

Enable if Valid

This property applies only to Submit controls. By default  disables the form's submit button until all required fields are filled and contain valid data. See Valid Forms for details of this feature. However, sometimes you may wish to override ' default behavior and allow the user to submit a form even if it is invalid. To do this, uncheck this property.

...

  • Blue - default decorator and light blue background color

Image Added

Printable

This property determines whether or not this form field will appear in the  in the PDF document view of the form. If unchecked, the field will not appear in either view.

You can set the property on a section control and it will automatically apply to all controls inside the section control. This is often used in business rules. See Show/Hide/Print.

Enable if Valid

This property applies only to Submit controls. By default  disables the form's submit button until all required fields are filled and contain valid data. See Valid Forms for details of this feature. However, sometimes you may wish to override ' default behavior and allow the user to submit a form even if it is invalid. To do this, uncheck this property.

If you click on the Submit button in a form that contains invalid data or required fields that are empty,  the invalid fields will be highlighted with an orange background color. The designer can also display a message instructing the user what to do. This approach is very helpful to users when trying to determine why a form does not submit. Refer to this topic for the details.

Image Added

Prefix Property

Custom groups with rules included when dropped back onto the same or another form, will contain a special "Prefix" property. The property will automatically be given a unique value if you drop the group onto the same form 2 or more times. This ensures that the group controls have unique element name. You can view the impact the prefix has on the element names by viewing the form's schema or the control's property panel. Using the prefix property, you can write a separate rule to manipulate the 2nd or greater instance of the custom control. Refer to this documentation for the details.

Max Size

The Max Size property is used to set the upper limit for each attachment uploaded using the Upload Control in your forms/flow. It is set to 10Mb in the cloud. In-house customers should refer to the Max Size property for information about configuring this property for an in-house installation.