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

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...
Read more

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...
Read more

Trigger JavaScript on Click of Button PCF Control

-
Image
  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...
Read more