TimePicker PCF Control

1. Overview

The Time Picker Control is a UI component that allows users to select a time value. It provides a user-friendly interface with options to manually input or select a time from a dropdown. This control ensures accurate time selection while improving the user experience.

2. Features

Select time using a dropdown or manual input.
Supports 12-hour and 24-hour formats.
Validation to prevent incorrect time inputs.
Customizable UI to match application themes.
Option to set minimum and maximum time limits.
Events for capturing value changes.

3. Usage Scenarios

Scheduling appointments or meetings.
Setting alarms or reminders.
Configuring time-based automation tasks.

4. Implementation Details

4.1 Dependencies

The control requires the following dependencies:

HTML and CSS for structuring and styling.
JavaScript for functionality.
Optionally, a third-party library like flatpickr for extended features.

4.2 HTML Structure

<div class="time-picker">
    <input type="time" id="timeInput" />
</div>

4.3 JavaScript Logic

document.addEventListener("DOMContentLoaded", function () {
    const timeInput = document.getElementById("timeInput");
    
    timeInput.addEventListener("change", function () {
        console.log("Selected Time:", timeInput.value);
    });
});

4.4 Styling (CSS)

.time-picker input {
    width: 150px;
    padding: 5px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

5. Customization Options

Format: Choose between 12-hour (hh:mm AM/PM) or 24-hour (HH:mm) format.
Min/Max Time: Define allowed time range.
Styling: Modify CSS to match branding.

6. Event Handling

onChange: Trigger actions when time is selected.
onFocus: Show time picker when input is focused.
onBlur: Validate input when focus is lost.

7. Error Handling

Prevents invalid time formats.
Alerts users when input is out of range.

8. Conclusion

The Time Picker Control enhances user experience by simplifying time selection. It is lightweight, customizable, and easy to integrate into various applications.

Comments

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

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

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

SHAHZAIB' Dynamics 365 BLOG

Search This Blog