PowerApps Control Framework – Turn Option set into an Icon list

PowerApps Control Framework

This Cool Power app Custom components (PCF) let you transform the Option set into an Icon list. “A picture is worth a thousand words” is an English language adage meaning that elaborate descriptions or ideas can be conveyed by a single simple image, which carries its meaning or essence more effectively than a mere verbal description. This can also be true for picklist/option-sets, and that is why the PCF control turning option sets into an icon list is genius.

See Below a Step by step guide on how to turn an option set into an Icon list with a prebuild PCF solution by David Rivard

Source of Option-set as Icon list PCF are created By David Rivard
Twitter: https://www.twitter.com/david_rivard
LinkedIn: https://www.linkedin.com/in/davidrivard/
Find the Code as OpenSource code on GitHub

Import PCF to an environment

1. Sign into Power Apps and select Solutions from the left navigation.
2. Download Icon Option set PCF Solution here
3. On the command bar, select Import.

   

4. On the Select Solution Package page, select Browse to locate the compressed (.zip or .cab) file that contains the solution you want to import.
5. Select Next.
6. when Information about the solution is displayed. Select Import.
7. You may need to wait a few moments while the import completes. View the results and then select Close.
8. Press action button Publish all Customizations.

PowerApps Control Framework: Add to Field on Entity

See video demo in end og blog post for detail how to install and configure.

• Sign in to Power Apps and expand Data and select Entities
• Double Click on the entity you want to add the PCF component.
• Click on a picklist
• Click on the Controls tab and click on Add a control.
• On the Add Control page, select the component that you want, such as the “Icon Optionset” component, and then select Add.
• Choose the client where you want the component to appear.

PowerApps Control Framework: Do Configuration

See video demo in end og blogpost for detail how to install and configure.

IconOptionset PCF (PowerApps Component framework) Control turns a PowerApps optionset field into a configurable Office UI Fabric Choice group with Icons. Compatible with up to five options. Option set labels are used as icon labels.

1. First Choose the client where you want the component to appear.
   • Web. To make the code component available from any web browser, select the Web option next to the component. Notice that setting the Web option includes rendering the component in web browsers.
   • Phone. To make the code component available on phones running Dynamics 365 for phones, select the Phone option next to the component.
   • Tablet. To make the code component available on tablet devices running Dynamics 365 for tablets, select the Tablet option next to the component.

Available icons and their name to use in configuration can be found here: https://developer.microsoft.com/en-us/fabric#/styles/web/icons#available-icons

1. Select OK, to close the Field Properties page.
2. To activate the customization, on the entity form select Save, and then select Publish.
3. Select Save and Close to close the form editor.

Video How-to install

The Result

Microsoft official Custom Control documentation Source:

• https://learn.microsoft.com/en-us/powerapps/developer/component-framework/add-custom-controls-to-a-field-or-entity
• https://learn.microsoft.com/en-us/powerapps/developer/component-framework/component-framework-for-canvas-apps#add-components-to-a-canvas-app