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

Comparison: Using Workflows vs. JavaScript vs. Plugins in Dynamics CRM?

  There are three ways to automate actions in Microsoft Dynamics CRM: workflows, JavaScript, or plugins. In this blog we will discuss the difference between them and how to choose which option is appropriate for your task. Workflows  can perform tasks such as updating data or sending email. They are triggered by saving records, creating records, or changing specific fields on a form, and once triggered, they run on their own in the background. As you can see in the example of  How to Assign a Territory to a Lead in Dynamics CRM , you can even look up data in another entity. JavaScript  runs on the screen while the user is using a form. JavaScript is triggered by events within the page, updating a field or saving, and it is commonly used to hide or show different fields on the forms. You can also, for instance,  Populate a CRM 2011 Lookup or PartyList Field Using JavaScript  by having a lookup automatically linked to the record based on what is entered in an...
2 comments
Read more

Task Activity Timeline

  1. Overview The PCF Calendar Control is a custom PowerApps component that displays activities in a calendar-like view. It supports multiple views (monthly, weekly, yearly, daily), allows users to expand/collapse records for each date, and provides a scrollable interface for better usability. The control is built using TypeScript and CSS, adhering to best practices for type safety and maintainability. 2. Features View Modes: Monthly View : Groups activities by month. Weekly View : Groups activities by week. Yearly View : Groups activities by year. Daily View : Displays activities for individual days. Expand/Collapse Functionality: Users can click on a date to expand or collapse its associated records. Smooth animations enhance the user experience. Scrollable Container: A scrollable container ensures that large datasets are manageable. Responsive Design: The control adjusts its layout for smaller screens. Type Safety: The code uses TypeScript interfaces to avoid the use of any and...
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