Time Picker Control

-

1. Overview 

The TimePickerControl is a custom PowerApps component that provides users with an intuitive interface for selecting a time value. The control includes a read-only input field displaying the selected time and a dropdown time picker with adjustable hour, minute, and AM/PM values.

2. Features

  • A read-only input field displaying the selected time.
  • A clock icon to toggle the time picker dropdown.
  • A dropdown containing hour, minute, and AM/PM selectors.
  • Up/down arrows to adjust the time values.
  • "CANCEL" and "OK" buttons to confirm or dismiss selection.
  • Notifies PowerApps of value changes.

3. Component Structure The TimePickerControl component consists of:

  1. Input Container - Contains the input field and clock icon.
  2. Time Picker Dropdown - Displays the time selection interface.
  3. Time Grid - Contains individual selectors for hours, minutes, and AM/PM.
  4. Action Buttons - Includes "CANCEL" and "OK" buttons.

4. Implementation Details

4.1. Initialization (init method)

  • The component initializes by creating HTML elements and styling them appropriately.
  • The input container and time picker dropdown are added to the main container.
  • The clockIcon toggles the visibility of the time picker dropdown.
  • notifyOutputChanged is assigned for notifying PowerApps of updates.

4.2. Time Selection (createTimeSelector method)

  • The createTimeSelector function generates a selector with up/down arrows.
  • Users can increment or decrement hour, minute, or AM/PM values.
  • Selection updates the selectedHour, selectedMinute, and selectedAmPm variables.

4.3. Colon Separator (createColon method)

  • A helper function to insert a colon (:) between hour and minute selectors.

4.4. User Interaction

  • Clicking the clockIcon toggles the visibility of the time picker dropdown.
  • Clicking "CANCEL" closes the dropdown without saving changes.
  • Clicking "OK" updates the time input field and notifies PowerApps.

5. Output Handling (getOutputs method)

  • Returns the selected time as a formatted string (HH:MM AM/PM).



6. Lifecycle Methods

  • updateView: Placeholder function for handling dynamic context changes.
  • destroy: Cleans up the component when it is removed.

7. Styling and CSS The component uses an external CSS file (TimePickerControl.css) for styling, ensuring a user-friendly and visually appealing interface.

8. Conclusion The TimePickerControl is a user-friendly and efficient custom component for selecting time in PowerApps. It enhances the user experience by providing an interactive time selection mechanism while ensuring seamless data updates.

Comments

Post a Comment