MultiSelect PCF Control

-


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:

  1. Initializes private variables.

  2. Creates and styles necessary DOM elements (div, ul, label).

  3. Retrieves and validates entity and field names.

  4. Fetches data using retrieveMultipleRecords.

  5. Renders the retrieved records into a checkbox list.

3. View Update (updateView method)

Updates the component whenever the property bag changes. It extracts and processes the stored comma-separated values.

4. Output Values (getOutputs method)

Returns the selected values as a comma-separated string.

5. Cleanup (destroy method)

Handles component cleanup before removal. Currently, no explicit cleanup is required.

6. Event Handling (checkBoxChanged method)

Handles checkbox selection changes:

  1. Identifies the checkbox state.

  2. Adds/removes the value from the _guidList.

  3. Triggers notifyOutputChanged to update the model-driven app.

7. Record Rendering (renderRecords method)

Creates and appends checkboxes dynamically for each retrieved record.

  1. Extracts entity ID and field value.

  2. Constructs a checkbox and label.

  3. Appends the elements to the unordered list.



8. Error Handling (handleError method)

Logs errors and displays error messages to the user in case of API failures.

9. Utility Methods

  • createStyledElement: Helper function to create HTML elements with classes and attributes.

  • getSafeString: Ensures safe extraction of string values from unknown sources.

Dependencies

  • ComponentFramework.Context<IInputs>: Provides access to environment and parameters.

  • ComponentFramework.WebApi.retrieveMultipleRecords: Fetches data from the model-driven app.

Conclusion

The MultiSelectControl is a customizable PCF control that enhances multi-selection capabilities in model-driven apps by dynamically fetching records and allowing users to select multiple values efficiently.

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