Birthday Anniversary Control PCF in Power Platform.

-

Birthday Anniversary Control 

Technology Stack: 

- Power Apps Component Framework (PCF) 
- React (TypeScript) 

Purpose 

This PCF control renders a React-based EventCard that shows the next Birthday and Work Anniversary for a user, calculated from input dates. It also allows users to download .ics calendar files to add these events to their personal calendars. 

Functional Overview 

Responsibilities: 

- Reads input values: dateOfBirth and joiningDate 
- Passes them as props to the EventCard React component 
- Renders content using createRoot from React 18 
- No output or two-way data binding 
- Cleanup logic is currently empty 

React Component: EventCard 

Props: 

Name 

Type 

Description 

dateOfBirth 

Date 

User’s date of birth 

joiningDate 

Date 

User’s joining date 

Core Features 

- getNextOccurrence: Calculates the next occurrence of a date (e.g., birthday or work anniversary) from today. 
- calculateYears: Computes age or years worked based on current date. 
- isUpcoming: Checks if an event is within 7 days from today and adds visual cue if true. 
- formatDate: Formats date to a user-friendly string. 
- generateICSFile: Creates downloadable .ics calendar event files. 

UI Structure 

Main Card: Title - "Upcoming Events" 

Events Rendered: 

Event 

Icon 

Info 

Extras 

Birthday 

🎉 

Date, Age 

Add to Calendar button 

Work Anniversary 

🏆 

Date, Years Worked 

Add to Calendar button 

If upcoming 

❗ 

 

Notification badge 

Accessibility 

- Container uses role='region' and aria-label='Upcoming Events' 
- Proper semantic tags are used for clarity 
- Each event item has clear labels and icons 

Inputs 

Property 

Type 

Required 

Source 

Default Value 

dateOfBirth 

Date 

Yes 

PCF 

Current Date 

joiningDate 

Date 

Yes 

PCF 

Current Date 

Outputs 



Dependencies 

- React for UI rendering 
- createRoot for DOM mount 
- Blob and URL APIs for ICS generation 

Potential Enhancements 

- Allow setting the number of 'upcoming days' threshold via input 
- Add localization support 
- Define outputs if data should sync back to the model-driven app 

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