SPFx SwatchColorPicker Office UI Fabric React Control example

In this SPFx tutorial, we will discuss how to use the SwatchColorPicker Office UI Fabric React Control in SPFx client-side web part. Step by step, we will see how to create an SPFx web part, and then we will explore how to utilize the SwatchColorPicker React control within it.

Here, we will use the ColorPicker, SwatchColorPicker, and a DefaultButton.

Here we will build something like the above picture. This is an SPFx client-side web part, you can see the color picker, once you select any color, it will appear in a rounded shape, and then on hover of any circle, the button background color will get changed.

Check out SPFX SwatchColorPicker Fluent UI React Control

SPFx SwatchColorPicker Example

We can display the swatch color picker in various sizes, such as simple circles and squares, and also in custom sizes. There is not much documentation on the Microsoft site, but you can see how to use the SwatchColorPicker Example.

First, we will create a SharePoint Framework client-side web part, ensuring we select the React framework, as we will be using the SwatchColorPicker Office UI Fabric React Control.

Open the Node.js command prompt and then create a directory in a location where you want to save the files.

md FabricUiColorPicker

cd FabricUiColorPicker

Then run the below command to start creating the spfx client-side web part.

yo @microsoft/sharepoint

It will ask you the following things:

• What is your solution name? Click on Enter to take the default name.
• Which baseline packages do you want to target for your component (s)? Here, choose one from the options below:
  • SharePoint Online only (latest)
  • SharePoint 2016 onwards, including 2019 and SharePoint Online
  • SharePoint 2019 onwards, including SharePoint Online

Here select SharePoint Online only (latest).

• Where do you want to place the files? Choose one from the following:
  • Use the current folder
  • Create a subfolder with the solution name

Here, choose Use the current folder.

• Do you to allow the tenant admin the choice of being able to deploy the solution to all sites immediately without running any feature deployment or adding apps in sites? Choose N.
• Will the components in the solution require permissions to access web APIs that are unique and not shared with other components in the tenant? Choose N.
• Which type of client-side component to create? Choose WebPart from the options below:
  • WebPart
  • Extension
  • Library

• What is your web part name? Give FabricUiColorPicker as the web part name
• What is your web part description? Click on Enter to take the default name.
• Which framework would you like to use? Choose React from the options below:
  • No JavaScript framework
  • React
  • Knockout

Then it will take some time, and then you can see a successful message that the solution has been created.

Then run the below command to open the solution using Visual Studio Code.

code .

The solution looks like this:

Here, we need to add our code in the component file that is the FabricUiColorPicker.tsx.

The code here is mainly self-explanatory, and the first thing we will do is to write the import statement as follows:

import {
  ColorPicker,
  IChoiceGroupOption,
  IColor,
  IColorPickerStyles,
  SwatchColorPicker,
  Label,
  DefaultButton,
} from 'office-ui-fabric-react/lib/index';

In the render method, we have added the controls, and the complete code looks like this:

import * as React from 'react';
import { IFabricUiColorPickerProps } from './IFabricUiColorPickerProps';
import {
  ColorPicker,
  IChoiceGroupOption,
  IColor,
  IColorPickerStyles,
  SwatchColorPicker,
  Label,
  DefaultButton,
} from 'office-ui-fabric-react/lib/index';

var colorArray = [];
export interface Istate {
  swatchcolor: any;
  previewColor: any;
  color: any;
}
export default class FabricUiColorPicker extends React.Component<IFabricUiColorPickerProps, Istate> {
  constructor(props) {
    super(props);
    this.state = {
      swatchcolor: [],
      previewColor: "",
      color: ""
    };
  }
  public render(): React.ReactElement<IFabricUiColorPickerProps> {
    return (
      <div>
        <h1>Swatch Color Picker with Dynamic Colors on Selection from Color Picker</h1>
        <ColorPicker
          color={this.state.color}
          onChange={this._updateColor}
          styles={colorPickerStyles}
        />
        <SwatchColorPicker
          selectedId={this.state.previewColor}
          onCellHovered={(id, color) => this.setState({ previewColor: color! })}
          onColorChanged={(id, color) => this.setState({ previewColor: color! })}
          columnCount={9}
          cellShape={'circle'}
          cellHeight={50}
          cellWidth={50}
          cellBorderWidth={3}
          colorCells={
            this.state.swatchcolor
          }
        />
        <Label style={{
          color: this.state.previewColor ? this.state.previewColor : "#000",
          fontSize: '24px'
        }}>Colorful Text on Hover and Change</Label>
        <DefaultButton
          text="Colorful Button"
          style={{
            backgroundColor: this.state.previewColor ? this.state.previewColor : "#fff",
            fontSize: '24px',
            border: '1px solid black'
          }}
        />
      </div>
    );
  }
  private _updateColor = async (ev: React.SyntheticEvent<HTMLElement>, colorObj: IColor) => {
    colorArray.push({ ID: '#' + colorObj.hex, label: '#' + colorObj.hex, color: '#' + colorObj.hex });
    await this.setState({ swatchcolor: colorArray });
    console.log(colorArray);
  }
}


const colorPickerStyles: Partial<IColorPickerStyles> = {
  panel: { padding: 12 },
  root: {
    maxWidth: 352,
    minWidth: 352,
  },
};

Once you have added the code, run the command below, which will open the local workbench. While the local workbench is running, open the SharePoint workbench and add the web part.

gulp serve

Once you add the spfx web part, you can see it will appear like below:

Here when you hover in the circle, the button background color will change.

To deploy the web part to the SharePoint environment, run the commands below.

gulp bundle --ship

gulp package-solution --ship

Once you run the above command, it will create the .sppkg file under the SharePoint folder.

Simply, upload this file to the tenant app catalog site or the SharePoint site collection app catalog site. You can then add the web part to a modern web part page in SharePoint Online.

Video tutorial SPFx SwatchColorPicker Office UI Fabric React Control example

I have created a video tutorial on the SwatchColorPicker Office UI Fabric React Control example with SharePoint framework (SPFx) and uploaded it to our YouTube Channel. Have a look at it below:

Download the SPFx Solution

You can download the solution from the URL below and then just run the npm i command to install the node module.

Download Here

This is how we can work with the SwatchColorPicker Office UI Fabric React Control in the SharePoint framework.

In this tutorial, we learned how to use the SwatchColorPicker Office UI Fabric React Control in a SharePoint framework client-side web part.

You may also like the following SPFx tutorials:

• Send Email in SPFx using Microsoft Graph API and PnP JS
• Create SPFx Dynamic Accordion Webpart Using PnP Controls React
• Restrict SPFx List View Command Set Extension to Specific List/Library
• Get Current SharePoint Site Information in SPFx using MS Graph API