Versions Compared

Key

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

Table of Contents

...

Excerpt

Date, Time, and Date/Time Controls

The date control allows the user to enter a date, time, or date/time combo. The designer can choose from a variety of formats for each type.

Designers can add a date picker via the Style Properties tab. 

  • The Date control denotes a day and has no dependencies on time zone.
  • The Time control denotes the time of the day and 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.
  • The Date/Time control relies on the time zone 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. 

    Note

    If the form cannot infer the browser time zone, the Date/Time control will display in UTC.


For example, the time 5:00 PM is entered into a Time control and the date 2/4/2020 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 4th.

If the submission is viewed in Tijuana (Pacific Standard Time), the Time Control will display 5:00 PM as it did in EST, since it has no dependency on time zone. However, the Time portion of the Date/Time control will show 2:00 PM because it will be adjusted by the browser time zone to PST. 

Business Rules can be applied to the Date/Time control in all variations. See the Rules Examples chapter containing numerous examples.

Tip

Please review the Time Zone documentation to understand how Time Zones work when initializing date, time and date/time controls using business rules and _data.

Date, Time and Date/Time Submission Values

frevvo saves Date and Time control values in the submission xml document exactly as entered, but converted to ISO format. These values will display as entered, regardless of viewer's time zone, when the submission or workflow step is viewed.

frevvo saves Date/Time control values in the submission document in Coordinated Universal Time (UTC), also in ISO format. The indicator "Z" is appended to the end of the string to denote UTC time. This value will display in the user's browser time zone when the submission or workflow step is viewed.

Here is a form with Date, Time, and Date/Time controls entered by the user at run-time in the New York time zone.

In the submissions document, notice that the date and time are saved as entered. You can see the time is '10:43:00' which is 10:43 AM in ISO format. However, the Date/Time control value is saved in UTC '14:43:00Z' which is 10:43 AM EST converted to UTC.

ISO Formats
  • Date: YYYY-MM-DD
  • Time: HH:MM:SS
  • DateTime: yyyy-mm-ddThh:mm:ssZ
Warning

Date, Time and Date/Time controls display with UTC offsets in the Submission CSV Export.


...

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

 Image Modified

Drag/drop the ComboBox from the Palette or import it from ComboBoxfrom Schema schema. When you drag/drop the ComboBox from the Palette, it does not have a ControlType 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. 

...

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

...

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.

The Changingthefilenameofanuploadedattachmentintheform/flowsubmission File Name property allows designers to specify a naming convention for the attachment in the form/workflow 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-FileUploadFile Upload feature. See below for more information.

...

The Message Control has a RichTextEditRich Text Editor which allows you to enter and format text easily. If your you prefer, you can type the message content into the Message property, and add your own HTML for formatting.

...

  1. Drag a Message control from the palette and drop it into your form/workflow. Click on it, and look at the property panel to the left.
  2. Click the Rich Text toggle switch to turn the Rich Text Editor on. frevvo will remember the RTE mode you set for each control the next time you edit the form/workflow.
  3. When you toggle it on, the message property will be replaced with a link to "Edit with rich text editor." Click the link to open the RTE Editor window. You can also click the red pencil icon  on the control to open the RTE Editor window.
  4. The editor consists of an editing area for EnteringText and entering text and an icon in the top left that shows/hides the editor toolbar and menus.

...

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

...

When you drop a Message Control in a Table and turn the Rich Text Editor on, the red pencil icon will not be visible on the control. Click the "Edit with rich text" link in the properties panel to open the RTE Editor window.

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. One approach would be to use the HorizontalLayoutusingtheTableControlHorizontal Layout.  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.

Here is what the form looks like in the Forms Designer:
Image Modified

 Here is how the form looks in use mode:

...

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.

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 & Dynamic Options for details on how to use trigger controls and examples of when you might want to use them.

...

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 ColumnWidths 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. Help icons for a column with a label that has multiple lines may not align properly. Adjust the column widths if possible. 

...

Add/Remove icons will automatically appear to the left of each row in the table. Click  on the   icon to append a row to the bottom of the table until the number of rows reaches the Max # value specified in the property panel. The image below shows an Expense Report created using the Table control. The Min # property is set to zero and the Max # is set to 10. Nine expense items can be specified in the table as shown. One more row can be added by clicking the icon. When   When the table consists of 10 rows,  the  will icon will disappear and the  icon will remain. Clicking on the  icon will delete one row from the bottom of the table. The minus icon will become a  when the Min # value is reached or there is only one row in the table. 

...

  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 MessageControl Message Control 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 control. Sections inside repeats will not have the SecurityProperties Security Properties, since signatures are not supported in Repeats.

...