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.
-
Constructor The constructor initializes default values for entity and field names.
-
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).
Retrieves and validates entity and field names.
Fetches data using retrieveMultipleRecords.
Renders the retrieved records into a checkbox list.
-
View Update (updateView method) Updates the component whenever the property bag changes. It extracts and processes the stored comma-separated values.
-
Output Values (getOutputs method) Returns the selected values as a comma-separated string.
-
Cleanup (destroy method) Handles component cleanup before removal. Currently, no explicit cleanup is required.
-
Event Handling (checkBoxChanged method) Handles checkbox selection changes:
Identifies the checkbox state.
Adds/removes the value from the _guidList.
Triggers notifyOutputChanged to update the model-driven app.
- Record Rendering (renderRecords method) Creates and appends checkboxes dynamically for each retrieved record.
Extracts entity ID and field value.
Constructs a checkbox and label.
Appends the elements to the unordered list.
-
Error Handling (handleError method) Logs errors and displays error messages to the user in case of API failures.
-
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: 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.