SHAHZAIB' Dynamics 365 BLOG

Overview The MultiSelectControl is a PowerApps Component Framework (PCF) control designed to allow users to select multiple records from a dataset within a model-driven app. It retrieves records from a specified entity and field, displaying them as a list of checkboxes. The selected values are stored as a comma-separated string. Features Retrieves records dynamically using the Web API. Displays checkboxes with corresponding labels. Maintains state of selected records. Handles errors gracefully. 1. Constructor The constructor initializes default values for entity and field names. 2. Initialization ( init method) Parameters: context : Provides access to environment data. notifyOutputChanged : Callback function to notify PowerApps of changes. state : Dictionary object for state persistence. container : HTML container for rendering the component. Steps: Initializes private variables. Creates and styles necessary DOM elements ( div , ul , label ...

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

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

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

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

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

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

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

  Timezone Converter Control Overview The Timezone Converter Control is a custom PowerApps PCF control that allows users to select a local datetime and a city to view the corresponding time in that timezone. Additionally, it features an analog clock that updates dynamically based on the selected timezone. Features Datetime Picker: Allows users to select a local datetime. City Dropdown: Provides a list of cities and their corresponding timezones. Analog Clock: Displays the current time in the selected timezone and updates every second. Dynamic Timezone Conversion: Converts the local time to the selected city's timezone using the Moment.js library. Technologies Used TypeScript for development. Moment.js for timezone calculations. HTML & CSS for UI styling. Canvas API for rendering the analog clock. Conclusion This Timezone Converter Control provides an intuitive and interactive way for users to convert and visualize different timezones. It is built using PowerApps PCF, ...

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