| Section | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Column | |||||||||||
| Section | |||||||||||
|
...
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.
...
Requires users to enter a valid EMail address. The address must conform to the following syntax: <name>@<name>.<string>
Money
Allows users to enter U.S. currency. . Email addresses with apostrophes and longer domain names are allowed.
Email validation follows the OWASP recommendation. It validates that there is
- at least one '@' character
- the local-part is not greater than 64 characters
- the domain is not longer than 255 characters.
Money
Allows users to enter U.S. currency. Users may type commas and a decimal point but 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.
...
supports 5 types of Selection controls. Selection controls let users choose from a list of options instead of having to enter text.
- Dropdown
- Radio
- Checkbox
- ComboBox
- T/F
- ComboBox
| Tip |
|---|
See the Item Width property for styling options. |
Dropdown
...
Dynamic Options
Options for the Dropdown, Radio and Checkbox controls can be populated using 2 methods:
- 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 Dynamic Option feature. This method eliminates the need for a business rules.
Refer to the Dynamic Options topic for the details.
Dropdown
This adds a dropdown list to your form. By default the first choice in the dropdown list will be blank; you define the other choices by editing the control’s Options properties. Keyboard selection of an option is not currently supported but is planned for a future release. Users can type-ahead. For example, select a dropdown control and type "S" and it jumps you to options that start with "S". This is extremely useful for dropdown controls that have a long list of options. This control is a standard HTML dropdown so it does not allow using backspace to clear selected options. The Comment property can be used to provide a text box for additional information when the last option in the selection control is chosen.
ComboBox
LDAP customers may have The ComboBox control supports three types of data retrieval: frevvoUsers, frevvoRoles and Web Service. The source for the options is selected from the Options Src property. Information about how to set up Options for the ComboBox control is discussed under the Dynamic Options feature topic.
You can use the Combobox to retrieve values from a database and enable a list of possible partial matches.
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. Dropdown control options are confined to a predefined list and maybe limited by the default max result size of an LDAP query. The ComboBox control allows users to pick from a predefined list of values or type a value that is not in the list.
The Combobox is used internally for functions such as creating the Access Control List.
Here's how it works:
- Drag the ComboBox control into your form/flow
- Set the Options Url to one of two static frevvo URLS: Replace <tenant name> with your tenant name.
- This url returns a list of ALL users returned by the tenant's security manager
- /frevvo/web/tn/<tenant name>/users?match=
- This url returns the list of ALL roles returned by the tenant's security manager
- /frevvo/web/tn/<tenant name>/roles?match=
- /frevvo/web/tn/<tenant name>/roles?match=
- This url returns a list of ALL users returned by the tenant's security manager
- The ?match= URL parameter currently has no supported options
Users can typeahead to narrow the choices based on the letters entered. User ids and roles are case sensitive so remember to use the correct case when typing.
The combobox supports the ability to specify single or multiple values. Simply check the single value checkbox if you want to limit the choice to one value.
...
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. 
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.
Existing forms/flows that contain the ComboBox control will have the value of the Options URL property in the Options Src field after upgrading.
| Info |
|---|
|
ComboBox from Schema
You can change the Options Src for Combobox controls that are added to your form/flow 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.
Information about how to set up Options for the ComboBox control is discussed under the Dynamic Options feature topic.
Radio
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 you select a radio option as the default and later decide you do not want an option selected by default, you must remove that option from the control and tab out of the options property so that it is removed from the control. Then add the option back to the control's option list. Now that option is no longer a selected default.
...
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 your forms/flow. The internal upper limit is controlled by a configuration parameter - frevvo.attachment.maxsize. In the cloud. It is set to 10 mbMb. 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.
...
Message Control in a Table
Whwn 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.
...
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.
- 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.
Here is what the form looks like in Use mode:
.
...
Link Control (for URLs)
Use the Link Control when you want to include a URL in your form. When users click the link, the button text is underlined and the target URL will open in a separate browser window. The Link control has a default button color and is automatically decorated. You cannot remove the decorator or change the button color. Unlike most controls, the default width of the control, when dragged from the palette and dropped into your form is 3 columns. Click here for more information. The New Line property is checked by default.
...
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.
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. Replace the default text in the message control with one or more spaces. 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.
Video Control
This lets you include video files in your form and works the same way as the image control. The control supports .SWF files and other video file formats that are supported by your browser. This control does not allow the designer to resize the video area. If your video is already hosted on another web service it is often best to embed your video into your form using a message control and adding the following html code to that control as shown below:
| Code Block |
|---|
<iframe width="100%" height="500" src="//www.youtube.com/embed/-vNOPmC5fVc" frameborder="0"></iframe> |
...
If you are using MySql and you are uploading a large video, you may see this message:
...
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.
...
| Code Block |
|---|
<center>Click on the <img src="/frevvo/images/icons/add.gif"/> icon to add addmoremore phone numbers to the list.<br/></center> |
...
- You may drag in only one control, and you may not drag in tab controls, panels or other repeat controls.
- You may not drag in trigger, image, video, link, upload, tab, table or signature controls.
...
Mobile forms work best when they are broken up into small, logical pieces. The PageBreak control lets the designer create a mobile layout consisting of multiple pages where each page contains a small number of controls (logical groupings). The user navigates between the pages via Back/Next buttons, or on a device that supports it, by swiping left/right.
Tablet and Smartphone forms
Forms are generated using HTML5 controls so features like Custom Keyboards, Date pickers etc. can be used. For example:
...
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 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.
...