Time Picker

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 add a Time Picker element, follow these steps:

1. Start the Joget Server and open the App Center.
2. Log in as admin and click the pencil icon on the Expenses Claim to open the App Composer.
   
3. Click on the Create New Form button and fill up the Form Details as follows:
   1. Form ID: timePicker
   2. Form Name:  Time Picker
   3. Table Name: j_expense_claim
      
      
      
      
4. Click Save.
5. Drag and drop a Time Picker element onto the canvas.
6. Click the Time Picker element to open the Configure Time Picker properties.
7. Fill up the following fields:
   • Label: Start Time
   • ID: start_time
8. Click Apply Change and Save the changes on the Form Builder.
   
9. Click Preview and try using the Time Picker.
   

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

Advanced options

Advanced options for the Time Picker element provide additional settings to customize its functionality and behavior further. 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 Validator plugin to validate the input value. Validation will occur whenever a form is submitted except when submitted as Save as Draft.
  Available options include:
  • Basic
  • BeanShell
  • Date and Time Duplicate Validator
  • Directory
  • Duplicate Value
  • Equal Value
  • Multi Form Validator
  • Password
  • Plugin Template - Validator

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.

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