Skip to main content

Time Clock PCF Control

 

Analog Watch Control

Overview

The Analog Watch Control is a PowerApps component designed to provide a functional and visually appealing analog watch interface. It includes features like real-time time updates, alarm functionality, a stopwatch, and theme switching.

Features

  • Real-time Clock: Displays the current time with animated hour, minute, and second hands.

  • Date Display: Shows the current date.

  • Theme Selection: Allows users to switch between different visual themes.

  • Alarm Functionality: Users can set alarms with custom notifications.

  • Stopwatch: Includes start, stop, and reset options.

  • Weather Widget (Placeholder): Displays a dummy temperature value.

  • Custom Alerts: Provides interactive notifications for user actions.

Implementation

1. Importing Dependencies

The component imports necessary types and styles:

import { IInputs, IOutputs } from "./generated/ManifestTypes";
import "./CSS/AnalogWatchControl.css";

2. Class Definition

The component extends ComponentFramework.StandardControl<IInputs, IOutputs> and includes necessary properties:

export class AnalogWatchControl implements ComponentFramework.StandardControl<IInputs, IOutputs> {
    private container: HTMLDivElement;
    private hourHand!: HTMLElement;
    private minuteHand!: HTMLElement;
    private secondHand!: HTMLElement;
    private timeLabel!: HTMLElement;
    private dateLabel!: HTMLElement;
    private notifyOutputChanged: () => void;
    private context: ComponentFramework.Context<IInputs>;
    private intervalId?: number;
    private stopwatchInterval?: number;
    private stopwatchTime = 0;
    private alarmTime: string | null = null;
    private alarmTriggered = false;

    constructor() {}

3. Initialization

The init method sets up the component structure and event listeners:

public init(
    context: ComponentFramework.Context<IInputs>,
    notifyOutputChanged: () => void,
    state: ComponentFramework.Dictionary,
    container: HTMLDivElement
): void {
    this.container = container;
    this.notifyOutputChanged = notifyOutputChanged;
    this.context = context;

    this.container.innerHTML = this.getWatchHTML();
    
    this.hourHand = this.getElement(".hour-hand");
    this.minuteHand = this.getElement(".minute-hand");
    this.secondHand = this.getElement(".second-hand");
    this.timeLabel = this.getElement(".time-label");
    this.dateLabel = this.getElement(".date-label");

4. Updating Time and Alarm Handling

Update Clock

private updateClock(): void {
    const now = new Date();
    const hours = now.getHours() % 12;
    const minutes = now.getMinutes();
    const seconds = now.getSeconds();

    this.hourHand.style.transform = `rotate(${(hours + minutes / 60) * 30}deg)`;
    this.minuteHand.style.transform = `rotate(${minutes * 6}deg)`;
    this.secondHand.style.transform = `rotate(${seconds * 6}deg)`;
    
    this.timeLabel.textContent = now.toLocaleTimeString();
}

Alarm Check

private checkAlarm(): void {
    if (!this.alarmTime || this.alarmTriggered) return;
    
    const now = new Date();
    const currentTime = now.toTimeString().substring(0, 5);
    
    if (currentTime === this.alarmTime) {
        this.showCustomAlert("🔔 Alarm is ringing!");
        this.alarmTriggered = true;
        setTimeout(() => {
            this.alarmTime = null;
        }, 60000);
    }
}

5. Stopwatch Implementation

startStopwatch(stopwatchDisplay: HTMLElement, startStopwatchBtn: HTMLButtonElement, stopStopwatchBtn: HTMLButtonElement, resetStopwatchBtn: HTMLButtonElement) {
    throw new Error("Method not implemented.");
}
stopStopwatch(startStopwatchBtn: HTMLButtonElement, stopStopwatchBtn: HTMLButtonElement) {
    throw new Error("Method not implemented.");
}
resetStopwatch(stopwatchDisplay: HTMLElement, resetStopwatchBtn: HTMLButtonElement) {
    throw new Error("Method not implemented.");
}

6. Theming and UI

private switchTheme(theme: string): void {
    document.body.className = theme;
}

7. Destroying Component

public destroy(): void {
    if (this.intervalId) {
        clearInterval(this.intervalId);
    }
    if (this.stopwatchInterval) {
        clearInterval(this.stopwatchInterval);
    }
}

OutPut:



Summary

This document outlines the complete implementation of the Analog Watch Control, detailing its structure, features, and core functions.

Comments

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

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