Time Picker

Introduction 

The Time Picker is a standard text field with an add-on script that allows users to input time in a specific format.

How does it work?

To see how to add a Time Picker element, follow these steps:

1. Open up a form in the Form Builder
2. Drag and drop a Time Picker element onto the canvas.
3. Click the Time Picker element to open the Configure Time Picker properties.
4. Fill up the following fields:
   • Label: Start Time
   • ID: start_time
5. Click Apply Change and Save the changes on the Form Builder.
   
6. Click Preview and try using the Time Picker.
   

Configuration Settings

Configure Time Picker

Configuring the Time Picker involves setting the label, ID, and advanced options to customize its behavior.

Configure the following fields:

• Label: The element label to be displayed to the end-user. It's a mandatory field, and you can add Font Awesome Icons to your menu labels
• ID: The element ID. By declaring it as start_time, a corresponding database table column c_start_time will be created. See Form Element for more information about defining the ID and a list of reserved IDs.
• Suggestion: The Form Builder suggests an ID for an element based on the Label you have entered. Clicking on Accept will overwrite the value in ID with the suggested value.

Advanced options

Advanced options for the Time Picker element provide additional settings to further customize its functionality and behavior. These settings include data management, validation, UI customization, and workflow integration to ensure the Time Picker meets specific requirements and enhances the user experience.

Data

Data settings for the Time Picker element include defining default values and choosing between 24-hour and 12-hour formats.

Configure the following fields:

• Default Value: Default value when there's no existing value found. A hash variable is accepted here.
• 24 Hours Format: Check this box for 24-hour format, or leave it unchecked for 12-hour format.

Validation

Validation settings for the Time Picker element include attaching Validator plugins to validate the input value. Validation will occur whenever a form is submitted except when submitted as Save as Draft.

• Validator: Attach a Form Validator plugin to validate the input value. Validation will occur whenever a form is submitted except when submitted as Save as Draft.

UI

UI settings for the Time Picker element help customize its appearance and behavior.

Configure the following fields:

• Readonly: Determines if the element is editable.
• Display Field as Label When Readonly?: Displays the value of the element as plain text when an element is set to Readonly.

Workflow

Workflow settings integrate the Time Picker with workflow processes, allowing values to be saved and used within workflow variables.

• Workflow Variable: If the form is part of a workflow process, upon saving the form by clicking Save as Draft or Complete, the value in this input field will be saved into the corresponding Workflow Variable named in this field.

Common Issues & Troubleshooting

• Using a non-existent Workflow Variable name
  You will get a warning with the name printed out (e.g., status) in the server log if you attempt to map to a non-existent Workflow Variable.

context attribute status does not exist in process context - adding new attributes to the process context is not allowed