Skip to main content

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 option set value from a JSON string. If no valid JSON is provided, it defaults to an empty mapping.

3. Creating Buttons (createButtons Method)

  • Clears existing buttons before rendering.
  • Checks if option set values are available; if not, displays a disabled placeholder button.
  • Iterates through option set values, creating a button for each with a dynamically assigned color.
  • Attaches event listeners for selection handling.

4. Soft Color Generation (getSoftColor Method)

Provides default soft colors if specific colors are not provided for an option set value.

5. Updating View (updateView Method)

  • Refreshes colors and selected values based on context updates.
  • Updates the button selection state.
  • Disables buttons if the control is in a disabled state.

6. Handling Selection (onButtonClick Method)

  • Updates the selected value upon button click.
  • Allows toggling between selection and deselection.
  • Triggers an output change notification.

7. Output Handling (getOutputs Method)

Returns the selected option set value. If no value is selected, it returns -1.

8. Cleanup (destroy Method)

Clears the container content to ensure proper resource cleanup when the control is removed.

Dependencies

  • ComponentFramework.StandardControl<IInputs, IOutputs>
  • OptionSetAttribute (a required parameter providing option values and metadata)
  • CSS styling from OptionsetControl.css

Customization

  • Developers can modify colors by passing a JSON mapping of option set values to colors.
  • Additional styles and UI elements can be customized via OptionsetControl.css.

Edge Cases Considered

  • Handles missing or invalid color mappings.
  • Ensures buttons are disabled when the control state is disabled.
  • Defaults to a visually distinct but neutral color if no custom color is set.

Potential Enhancements

  • Add animations for a smoother user experience.
  • Provide accessibility enhancements (e.g., ARIA attributes).
  • Allow multi-selection if needed.
OUTPUT



Comments

Post a Comment

Popular posts from this blog

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

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

Trigger JavaScript on Click of Button PCF Control

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