Time Picker PCF Control

-


Overview

The TimePickerControl is a custom PowerApps component built using TypeScript and HTML. It provides an interactive time selection interface with both digital and analog (clock face) inputs, enabling users to select and modify time values conveniently.

Features

  • Editable hour and minute selection.
  • AM/PM toggle support.
  • Analog clock face for hour selection.
  • Interactive UI updates on selection.
  • Reset to default time option.
  • Outputs the selected time in hh:mm AM/PM format.

Implementation Details

Initialization (init Method)

The init method initializes the control:

  • Retrieves the existing time value from the context parameters.
  • Parses the time value to extract hour, minute, and AM/PM settings.
  • Calls renderControl() to construct the UI elements.

View Updates (updateView Method)

  • Detects changes in the TimeValue parameter.
  • Updates the internal state if a new value is provided.
  • Calls refreshUI() to reflect changes in the UI.

Time Parsing (parseTimeValue Method)

  • Extracts hour, minute, and AM/PM components from the timeValue string using regex.
  • Assigns parsed values to internal state variables.

UI Rendering (renderControl Method)

  • Creates a wrapper div element.
  • Calls helper methods to generate different UI sections:
    • Time Input Section: Displays editable hour, minute, and AM/PM toggle buttons.
    • Clock Section: Renders a circular clock face with hour buttons.
    • Footer Buttons: Provides CANCEL (reset) and OK (confirmation) buttons.
  • Appends the wrapper to the container element.

Time Input Handling

  • createEditableSpan(): Creates editable <span> elements for hour and minute fields.
  • createToggleButton(): Generates AM/PM toggle buttons.
  • updateTimeValue(): Updates the timeValue string and notifies the framework of the change.

Clock Face Interaction

  • createClockSection(): Constructs a clock face with hour buttons.
  • createHourButton(): Places hour buttons at calculated positions on the clock face.
  • Clicking an hour button updates the selected hour and refreshes the UI.

User Interaction

  • toggleAMPM(): Toggles between AM and PM.
  • refreshUI(): Re-renders the control to reflect updates.
  • resetToDefault(): Resets to the default time (07:00 AM).

Output Handling (getOutputs Method)

Returns the selected time in hh:mm AM/PM format as TimeValue.



Cleanup (destroy Method)

Clears the control’s container when the component is removed.

Usage

The TimePickerControl is suitable for scenarios requiring an intuitive and interactive time selection interface in PowerApps applications. It ensures an improved user experience by combining both manual input and visual selection elements.

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