Skip to main content

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

Popular posts from this blog

Attachment PCF

Overview The AttachmentControl component is a PowerApps Component Framework (PCF) control designed for handling file uploads. It supports multiple file uploads, drag-and-drop functionality, file previews, and base64 encoding for easy data handling. Features Supports multiple file uploads Drag-and-drop functionality File type and size validation Base64 conversion for uploaded files Preview support for images, PDFs, and text files File removal functionality Code Breakdown Importing Dependencies import { IInputs, IOutputs } from "./generated/ManifestTypes"; The component imports IInputs and IOutputs from the generated manifest file to define the control's input and output types. Component Definition export class AttachmentControl implements ComponentFramework.StandardControl<IInputs, IOutputs> { Defines the AttachmentControl class, implementing the StandardControl interface from PCF. Class Variables private container: HTMLDivElement; private fileInput: HTMLInputEl...

Contacts View PCF Control

  1. Overview The ContactsControl component is a custom PowerApps control that displays a searchable and sortable table of contact records. It provides an interactive UI for filtering and selecting records. 2. Functionalities Search Feature: Allows users to filter records by entering text. Sorting: Clickable column headers enable ascending/descending sorting. Record Selection: Users can select a record to trigger a modal alert. Dynamic Rendering: Updates view dynamically based on search and sort input. Custom Styling: Uses external CSS for styling. 3. Component Structure Main Container ( HTMLDivElement ) : Holds the search bar and table. Search Input ( HTMLInputElement ) : Enables real-time search. Table ( HTMLTableElement ) : Displays the records with sortable headers. Modal Alert ( HTMLDivElement ) : Displays selected record details. 4. Implementation Details 4.1 Initialization ( init Method) Sets up the main container. Loads external styles. Creates...

Trigger JavaScript on Click of Button PCF Control

  Overview The TriggerJavascript control is a custom PCF (PowerApps Component Framework) control that renders a button with customizable label, icon, and on-click script execution. The control allows users to dynamically trigger JavaScript code upon clicking the button. Dependencies IInputs, IOutputs from ./generated/ManifestTypes (Auto-generated types from PowerApps) CSS styling from ./CSS/TriggerJavascript.css Class: TriggerJavascript This class implements ComponentFramework.StandardControl<IInputs, IOutputs> and manages rendering a button inside a container, dynamically executing JavaScript code on button click. Properties Private Properties _container: HTMLDivElement - A reference to the container element where the button will be rendered. Methods constructor() Initializes a new instance of the TriggerJavascript control. init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void, state: ComponentFramework.Dictionary, container: HTMLD...