Post
Ask Question

SharePoint Framework - Facelift Your Dropdowns With Office UI Fabric Icons

Overview

 
Of the various controls being used on any data capturing form, Dropdown is one of the most commonly used. It allows users to choose a value from a predefined list. By default, dropdowns appeal to users with a list of options to read, analyze and select. It would be great if we could help users with an icon representing the selection option. This will help users to visualize and understand the options better.
 
In this article, we will explore the capabilities provided by Office UI Fabric dropdown control and how we can extend it to facelift our dropdowns to make them more appealing.
 

Office Fabric Dropdown Control

 
The Office UI Fabric offers numerous dropdown variations including basic, multi-select, controlled single-select, controlled multi-select, and customized. The customized dropdown option allows us to add options to dropdown with Office UI Fabric icons.
 
Most Ul Fabric icons come with inverse, fill, reversed, or solid styling. For example, a variation of the Circle icon offers CircleRing and CircleShapeSolid.
 
Bus icons offer Bus and BusSolid variations as below,
 
SharePoint Framework - Facelift Your Dropowns With Office UI Fabric Icons
 
We can effectively use these variations of inverse, fill, reversed, or solid styling to facelift our dropdown controls.
 

Facelift Dropdowns

 
We will use the Dropdown control from Office UI Fabric controls.

Add the below imports,
  1. import { Dropdown, IDropdownOption, IDropdownProps } from 'office-ui-fabric-react/lib/Dropdown';  
  2. import { Icon } from 'office-ui-fabric-react/lib/Icon';  
Define an array to hold a custom choice of colors.
  1. private dropdownOptions: { key: string, text: string, data: any }[] = [];  
Inside render method, add a few colors to our array.
  1. public constructor(props) {  
  2.     super(props);  
  3.   
  4.     this.dropdownOptions.push({  
  5.       key: "Red",  
  6.       text: "Red",  
  7.       data: { icon: 'CircleShapeSolid', colorName: "#ff0000" }  
  8.     });  
  9.   
  10.     this.dropdownOptions.push({  
  11.       key: "Green",  
  12.       text: "Green",  
  13.       data: { icon: 'CircleShapeSolid', colorName: "#00ff00" }  
  14.     });  
  15.   
  16.     this.dropdownOptions.push({  
  17.       key: "Blue",  
  18.       text: "Blue",  
  19.       data: { icon: 'CircleShapeSolid', colorName: "#0000ff" }  
  20.     });  
  21.   
  22.     this.dropdownOptions.push({  
  23.       key: "Purple",  
  24.       text: "Purple",  
  25.       data: { icon: 'CircleShapeSolid', colorName: "#800080" }  
  26.     });  
  27.   
  28.     this.dropdownOptions.push({  
  29.       key: "Orange",  
  30.       text: "Orange",  
  31.       data: { icon: 'CircleShapeSolid', colorName: "#ffa500" }  
  32.     });  
  33.   }  
Use the Dropdown control inside render method and provide the above array as an option to render inside dropdown,
  1. <Dropdown  
  2.   label="Color"  
  3.   onChange={this.onSelectionChanged}  
  4.   onRenderTitle={this.onRenderTitle}  
  5.   onRenderOption={this.onRenderOption}  
  6.   onRenderCaretDown={this.onRenderCaretDown}  
  7.   options={this.dropdownOptions}  
  8. />  
We will make use of the below dropdown events.
 
Event
Description
onChange
Callback issued when the selected option changes.
onRenderTitle
Optional custom renderer for selected option displayed in the input.
onRenderOption
Optional custom renderer for option in the dropdown.
onRenderCaretDown
Optional custom renderer for chevron icon.
 
Implement onRenderOption event to uplift our dropdown by showing colored icon next to dropdown option.
  1. private onRenderOption(option: IDropdownOption): JSX.Element {  
  2.   return (  
  3.     <div>  
  4.       {option.data && option.data.icon && (  
  5.         <Icon style={{ marginRight: '8px', color: option.data.colorName }} iconName={option.data.icon} aria-hidden="true" title={option.data.icon} />  
  6.       )}  
  7.       <span>{option.text}</span>  
  8.     </div>  
  9.   );  
  10. }  
Implement onRenderTitle event to show the selected option with colored icon.
  1. private onRenderTitle(options: IDropdownOption[]): JSX.Element {  
  2.   const option = options[0];  
  3.   
  4.   return (  
  5.     <div>  
  6.       {option.data && option.data.icon && (  
  7.         <Icon style={{ marginRight: '8px', color: option.data.colorName }} iconName={option.data.icon} aria-hidden="true" title={option.data.icon} />  
  8.       )}  
  9.       <span>{option.text}</span>  
  10.     </div>  
  11.   );  
  12. }  
Implement onRenderCaretDown event to implement custom renderer for chevron icon.
  1. private onRenderCaretDown(props: IDropdownProps): JSX.Element{  
  2.     return <Icon iconName="CirclePlus" />;  
  3. }  
Implement onSelectionChanged event to get the selected option and process further.
  1. private onSelectionChanged(ev: React.FormEvent<HTMLDivElement>, item: IDropdownOption): void {  
  2.   console.log(item.key.toString() + ": " + item.text);  
  3. }  

Uplift Dropdown in action

 
The dropdown, when added to any web part, displays the color next to the dropdown option and makes it appealing for the users to visualize the options better.
 
SharePoint Framework - Facelift Your Dropowns With Office UI Fabric Icons
 

Practical Examples

 
Here are some other examples built on the same theme.
 
Example 1 - Commuting modes
 
The below example will help to visualize commuting modes better,
  1. // Commuting modes  
  2. this.dropdownOptions.push({  
  3.   key: "Running",  
  4.   text: "Running",  
  5.   data: { icon: "Running", colorName: "#201584" }  
  6. });  
  7.   
  8. this.dropdownOptions.push({  
  9.   key: "Cycling",  
  10.   text: "Cycling",  
  11.   data: { icon: "Cycling", colorName: "#ffa500" }  
  12. });  
  13.   
  14. this.dropdownOptions.push({  
  15.   key: "Train",  
  16.   text: "Train",  
  17.   data: { icon: "TrainSolid", colorName: "#FF00FF" }  
  18. });  
  19.   
  20. this.dropdownOptions.push({  
  21.   key: "Bus",  
  22.   text: "Bus",  
  23.   data: { icon: "BusSolid", colorName: "#ff0000" }  
  24. });  
  25.   
  26. this.dropdownOptions.push({  
  27.   key: "Ferry",  
  28.   text: "Ferry",  
  29.   data: { icon: "FerrySolid", colorName: "#0000FF" }  
  30. });  
  31.   
  32. this.dropdownOptions.push({  
  33.   key: "Airplane",  
  34.   text: "Airplane",  
  35.   data: { icon: "AirplaneSolid", colorName: "#00CC66" }  
  36. });  
  37.   
  38. this.dropdownOptions.push({  
  39.   key: "Car",  
  40.   text: "Car",  
  41.   data: { icon: "ParkingMirroredSolid", colorName: "#7e8509" }  
The dropdown will present the options as below,
 
SharePoint Framework - Facelift Your Dropowns With Office UI Fabric Icons
 
Example 2 - Office 365 Apps
 
The below example will help to visualize Office 365 apps better,
  1. // Office 365 Apps  
  2. this.dropdownOptions.push({  
  3.   key: "SharePoint",  
  4.   text: "SharePoint",  
  5.   data: { icon: "SharepointAppIcon16", colorName: "#0B828C" }  
  6. });  
  7.   
  8. this.dropdownOptions.push({  
  9.   key: "OneDrive",  
  10.   text: "OneDrive",  
  11.   data: { icon: "OneDriveLogo", colorName: "#0364b8" }  
  12. });  
  13.   
  14. this.dropdownOptions.push({  
  15.   key: "OneNote",  
  16.   text: "OneNote",  
  17.   data: { icon: "OneNoteEduLogoInverse", colorName: "#7719aa" }  
  18. });  
  19.   
  20. this.dropdownOptions.push({  
  21.   key: "Teams",  
  22.   text: "Teams",  
  23.   data: { icon: "TeamsLogo16", colorName: "#4b53bc" }  
  24. });  
  25.   
  26. this.dropdownOptions.push({  
  27.   key: "Forms",  
  28.   text: "Forms",  
  29.   data: { icon: "OfficeFormsLogo16", colorName: "#035a5d" }  
  30. });  
  31.   
  32. this.dropdownOptions.push({  
  33.   key: "Stream",  
  34.   text: "Stream",  
  35.   data: { icon: "StreamLogo", colorName: "#af1946" }  
  36. });  
  37.   
  38. this.dropdownOptions.push({  
  39.   key: "PowerApps",  
  40.   text: "Power Apps",  
  41.   data: { icon: "PowerApps", colorName: "#5c0e68" }  
  42. });  
  43.   
  44. this.dropdownOptions.push({  
  45.   key: "PowerBI",  
  46.   text: "Power BI",  
  47.   data: { icon: "PowerBILogo", colorName: "#fdc941" }  
  48. });  
  49.   
  50. this.dropdownOptions.push({  
  51.   key: "PowerAutomate",  
  52.   text: "Power Automate",  
  53.   data: { icon: "MicrosoftFlowLogo", colorName: "#0077ff" }  
  54. });  
The dropdown will present the options as below,
 
SharePoint Framework - Facelift Your Dropowns With Office UI Fabric Icons
 

Summary

 
The dropdown allows users to choose a value from a predefined list. We can effectively use the variations of inverse, fill, reversed, or solid styling of Office UI Fabric icons to facelift our dropdown controls.
 
Code Download
 
The code developed during this article can be downloaded from Github.


Similar Articles