Time Picker
  • 17 May 2024
  • 5 Minutes to read
  • PDF

Time Picker

  • PDF

Article summary

Time Control allows users to select a specific time using a clock interface. The selected time is shown by a filled circle at the tip of the clock hand. This interface facilitates selecting each component of the time accurately. Furthermore, the picker ensures that users select a valid time, formatted correctly, and adjusted to their location. Application Designer has the option to use Time Control as it is, which is its default behavior, or to customize it as Effort Control.

The Time control is utilized when inputting a specific time is necessary from the user, such as setting the time for a scheduler, creating events, and setting reminders.

A quick glance on the Time Picker in Form Control.

Figure: Time Picker by Application Designer

Figure: Time Picker by End User

User Persona: Application Designer 

Let's explore the following use case:

Use Case


User Persona: Application Designer

Solution

In a Knowledge Management system at NovaTech, content administrators need to manage the lifecycle of knowledge articles, including setting current time for articles when the articles got downloaded.


To achieve this, Sam must drag and drop a time control labeled "Current Time" to the knowledge article form. Choose a custom time in a 24-hour format and employs the Time Picker to design the form fulfilling this requirement.


Configure Time Picker Control

To configure Time Picker, perform the following steps:

  1. Navigate to Form Designer > Design Form Stepper > Controls > Form Controls > Date Picker.

  2. Drag and drop the Time Picker control to the desired location on the canvas.

  3. Mouse-over the Time Picker control and click thegear icon to open the Configure Properties window for the Date Picker control.
    The Time Picker configuration properties screenshot is displayed.

    Figure: Time Picker

  4. Enter the required details as described in the following table and click Save.
    Configurable properties are grouped under tabs are:

    1. Properties

    2. Advance

    3. Validations

    4. Appearance

    5. Security

Properties

This section lists generic configurable properties of the Time Picker control, including the control's Title, Sub Title, Render As, Format, and informative details. To know more about the fields that are available under the Properties section, see Field Description given below. 

Figure: Properties

Field Description

Field

Description

General

Title *

Enter the the unique name for the control. By default, the control name (Time Picker) is displayed in the text field.

Sub Title

Enter Subtitle for the Time Picker, which offers context regarding its purpose. It will be displayed directly beneath the control, helping users comprehend its function better.

Render As *

Enter the Render As to determine the behavior of the control.

Information

Help Text

Enter the Help Text for the configured field. The provided details will be visible when hovering over the information icon.

Rich Text

Enables rich text editing features for making information clearer and more interactive for users. It improves user understanding by allowing formatting like bold text, images, clickable links. and many more:


Tooltip

A tooltip is a brief pop-up message that explains a field when it is hovered over.

Advance

This section contains the list of features that can enable a few to define Advance configurations properties such as Include as Filter, include as a column in grid view, and Show Clear Icon.

Figure: Advance 

Enter the required details as described in the following table and click Save.

Field

Description

General

Include as Filter

If this toggle button is enabled, control is available as a filter option on the Form Designer list page of the application.

Include as a column in grid view

If this toggle button is enabled, then the respective control is available in grid view on the Form Designer list page of the application.

Show Clear Icon

If this toggle button is enabled, then the Clear icon is displayed.

Default Time *

Select the default time from the list. You have the option to select the current time or specify a custom time to align with the geographic location.
The option to select a custom time is displayed when the 'custom' option is chosen:

Step Hour

Select the increment value for hours when using the arrow buttons to adjust the time.

Step Minutes

Select the increment value for minutes when using the arrow buttons to adjust the time.

Step Second

Select the increment value for seconds when using the arrow buttons to adjust the time.

Validations

App Designer can add ‘Pre-built validations’ to save time and effort by ensuring data accuracy and completeness without the need for custom rules. These validations offer a standardized method of data validation across forms, reducing errors and improving data reliability.

To know more about the fields available under the Validations section, see Field Description.

Figure: Validations

Field Description

Field

Description

Tenant

Select the Tenant drop-down if the validation should be applied universally across all Tenants, regardless of the selected Tenant in the transaction or admin record.

Select a specific tenant under "Specific Tenant" if the validation should exclusively apply to that Tenant. Validations configured for a specific Tenant will consistently take precedence over common validations.

Time Picker Should be

Appearance

The Appearance tab enables you to configure Icon, Text, and Label for Calendar.  To know more about the fields that are available under the Appearance section, see Field Description.

Figure: Appearance

Field

Description

Text

Font Type

Select the font style used for displaying text within the application. It allow users to select from a selection of different font styles to customize the appearance of text throughout the application.

Font Color

Select the color of the text displayed in the application. It ensure that text stands out effectively and maintains visual consistency across the application.


Font Size

Specific font size, you can ensure that text appears clearly on the screen, and helps in emphasizing important information across various elements of the application.

Font Style

The appearance of the text, such as bold, italic, or underline allows users to modify the style of the font to suit their preferences content within the application.

Security

The Security tab guarantees data security and privacy by implementing restricted access or encryption on sensitive field data. This ensures that only users with authorized roles can access or modify it. To know more about the fields that are available under the Security section, see Field Description given below. 

Figure: Security

Field Description

Field

Description

Restricted field access

Enable this option to ensure that specific roles have exclusive viewing or editing rights for the content within the Time Picker control, limiting access to authorized users only.

For Example

In Change Management, managers have limited access to modify certain fields, like the 'Scheduled Start Time' in the change request form. Application Designer provides access to managers using the Time Picker and submits the change request. The permitted managers can edit this field.

Encrypted

Enabled this option to maintain the security and confidentiality of sensitive information by rendering it unreadable without the appropriate decryption key.

For Example

At NovaTech, HR personnel use a Time Picker tool linked to an encrypted field to securely input or view employee birthtimes, ensuring compliance with data protection regulations.

For more information on Security details, refer Form Security.


Was this article helpful?

What's Next
Changing your password will log you out immediately. Use the new password to log back in.
First name must have atleast 2 characters. Numbers and special characters are not allowed.
Last name must have atleast 1 characters. Numbers and special characters are not allowed.
Enter a valid email
Enter a valid password
Your profile has been successfully updated.