Skip to main content

Posts

OptionSet PCF Control

Overview The OptionsetControl is a PowerApps component framework (PCF) control designed to display and interact with an Option Set attribute in a model-driven app. The control renders option set values as buttons and allows users to select a value. Features Dynamically retrieves option set values from the OptionSetAttribute . Displays options as buttons with customizable colors. Allows toggling selection. Provides soft default colors when custom colors are not provided. Updates and maintains state based on user interaction and data context changes. Implementation Details 1. Initialization ( init Method) The init method initializes the control by: Assigning context and necessary parameters. Parsing color settings. Extracting the default or currently selected option set value. Creating and rendering buttons for each option set value. Attaching the main container to the provided container. 2. Parsing Colors ( parseColors Method) Parses the color mapping for each...
Post a Comment
Read more
Recent posts

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

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

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

Time Picker PCF Control

Overview The TimePickerControl is a custom PowerApps component built using TypeScript and HTML. It provides an interactive time selection interface with both digital and analog (clock face) inputs, enabling users to select and modify time values conveniently. Features Editable hour and minute selection. AM/PM toggle support. Analog clock face for hour selection. Interactive UI updates on selection. Reset to default time option. Outputs the selected time in hh:mm AM/PM format. Implementation Details Initialization ( init Method) The init method initializes the control: Retrieves the existing time value from the context parameters. Parses the time value to extract hour, minute, and AM/PM settings. Calls renderControl() to construct the UI elements. View Updates ( updateView Method) Detects changes in the TimeValue parameter. Updates the internal state if a new value is provided. Calls refreshUI() to reflect changes in the UI. Time Parsing ( parseTimeValu...
Post a Comment
Read more

Time Picker Control

1. Overview   The TimePickerControl is a custom PowerApps component that provides users with an intuitive interface for selecting a time value. The control includes a read-only input field displaying the selected time and a dropdown time picker with adjustable hour, minute, and AM/PM values. 2. Features A read-only input field displaying the selected time. A clock icon to toggle the time picker dropdown. A dropdown containing hour, minute, and AM/PM selectors. Up/down arrows to adjust the time values. "CANCEL" and "OK" buttons to confirm or dismiss selection. Notifies PowerApps of value changes. 3. Component Structure The TimePickerControl component consists of: Input Container - Contains the input field and clock icon. Time Picker Dropdown - Displays the time selection interface. Time Grid - Contains individual selectors for hours, minutes, and AM/PM. Action Buttons - Includes "CANCEL" and "OK" buttons. 4. Implementation ...
Post a Comment
Read more

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