Skip to main content

Duration PCF Control

Overview

The DurationControl is a custom PowerApps Component Framework (PCF) control that allows users to select a time duration using a dropdown menu. The control provides predefined time intervals between 10 minutes and 8 hours, formatted in a human-readable way.

Features

  • Provides a dropdown list with durations ranging from 10 minutes to 8 hours.
  • Ensures accessibility with appropriate labels and attributes.
  • Uses a consistent step of 10 minutes for selection.
  • Formats time durations in a concise manner (e.g., "1h 30m" instead of "90 minutes").
  • Dynamically updates its value when the context changes.
  • Notifies the framework when the selected duration changes.

Implementation Details

Initialization (init method)

  • Parameters:
    • context: The component framework context.
    • notifyOutputChanged: Callback function to notify PowerApps of data changes.
    • state: Persistent state storage (not used in this implementation).
    • container: The parent HTML container for the control.
  • Actions:
    • Creates a <div> container for styling and structure.
    • Creates a <label> for accessibility and user guidance.
    • Creates a <select> dropdown with predefined time intervals.
    • Populates the dropdown with options in a short readable format.
    • Appends elements to the parent container.

Dropdown Population (populateDropdownOptions method)

  • Generates time duration options from 10 minutes to 8 hours.
  • Uses formatDurationShort to convert minutes into human-readable strings.
  • Adds options dynamically to the <select> element.

Duration Formatting (formatDurationShort method)

  • Converts time into Xh Ym format.
    • Example: 90 minutes → 1h 30m
    • Example: 60 minutes → 1h
    • Example: 30 minutes → 30m

Updating the View (updateView method)

  • Retrieves and validates the duration parameter from the framework.
  • Clamps the value between MIN_DURATION (10 min) and MAX_DURATION (480 min).
  • Updates the dropdown to reflect the current duration.

Handling User Input (onDurationChange method)

  • Listens for changes in the dropdown.
  • Ensures the selected value is within valid bounds.
  • Updates the duration value and notifies PowerApps.

Output Handling (getOutputs method)

  • Returns the selected duration as an output value for PowerApps.

Cleanup (destroy method)

  • Removes event listeners to prevent memory leaks.

Configuration and Usage

  • This control can be embedded in a PowerApps form.
  • The output value (duration) can be used for scheduling, reminders, or time-based calculations.

Constraints

  • Only supports predefined time increments (10 min to 8 hours).
  • Does not allow manual text input—users must select from the dropdown.
  • Designed for PowerApps environments supporting PCF controls.
Output:
           


Future Enhancements

  • Add a custom step interval setting.
  • Allow localization for different time formats.
  • Include a default duration setting from user preferences.

This document serves as a technical and functional reference for developers and users integrating DurationControl into their PowerApps solutions.

Comments

Post a Comment

Popular posts from this blog

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...
Post a Comment
Read more

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...
Post a Comment
Read more

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...
Post a Comment
Read more