SPFx – Using Fluent UI Pivot control

Introduction

In this post, I will explain how to implement the Fluent UI Pivot control in SPFx webpart. Pivot control is used to navigate between a different sections whithin a page, it can also related to tabs which is mostly used for easy navigation of sections.

Let us start by creating a new web part project using yeoman SharePoint generator, before that create a folder where you want to create the web part. Navigate to that folder and run the below command

yo @microsoft/sharepoint

The generator will asks you couple of questions,

  • Enter the webpart name as your solution name, and then select Enter.
  • Select Create a subfolder with solution name for where to place the files.
  • Select Y to allow the solution to be deployed to all sites immediately.
  • Select N on the question if solution contains unique permissions.
  • Enter the webpart name
  • Enter the webpart description
  • Choose the framework as ‘React

Open the code in VSCode which is my favorite and flexible code editor for SharePoint Framework. You can directly open the project folder from the file menu or use the below command to open the VSCode from command line.

cd \web part folder\
code .

Now let us see the different variations of Pivot control. All the variations are implemented as a separate component and called in the main component. All the components are created as a React Functional Component.

Simple Pivot

Create a file under the components folder and name it as SimplePivot.tsx. Copy and paste the below code in to the file.

import * as React from 'react';
import styles from './PivotSample.module.scss';
import { Pivot, PivotItem } from 'office-ui-fabric-react/lib/Pivot';

const SimplePivot: React.FunctionComponent<{}> = (props) => {

    return (
        <div>
            <Pivot>
                <PivotItem headerText="Tab 1">
                    <div className={styles.pivotContent}>{"Pivot 1 content"}</div>
                </PivotItem>
                <PivotItem headerText="Tab 2">
                    <div className={styles.pivotContent}>{"Pivot 2 content"}</div>
                </PivotItem>
                <PivotItem headerText="Tab 3">
                    <div className={styles.pivotContent}>{"Pivot 3 content"}</div>
                </PivotItem>
            </Pivot>
        </div>
    );
};

export default SimplePivot;

The above code imports the reference from ‘office-ui-fabric-react‘ and then defined the Pivot with 3 items hard coded with the content inside the 3 sections. Now refer the component in the main webpart.tsx file. The output is shown below.

Dynamic Pivot

This component will have the sample items declared in a constant and based on the sample items, pivot is generated and rendered. Create a file named ‘DynamicPivot.tsx‘. Copy and paste the below code in to the file.

import * as React from 'react';
import styles from './PivotSample.module.scss';
import { Pivot, PivotItem } from 'office-ui-fabric-react/lib/Pivot';

export interface IPivotItem {
    text: string;
    key: string;
}

const ISampleItems: IPivotItem[] = [
    { text: 'Dynamic Item 1', key: '0' },
    { text: 'Dynamic Item 2', key: '1' },
    { text: 'Dynamic Item 3', key: '2' },
    { text: 'Dynamic Item 4', key: '3' }
];

const DynamicPivot: React.FunctionComponent<{}> = (props) => {

    return (
        <div>
            <Pivot>
                {ISampleItems.map((item: IPivotItem) => {
                    return (
                        <PivotItem headerText={item.text} key={item.key}>
                            <div className={styles.pivotContent}>{`This is the ${item.text} with key: ${item.key}`}</div>
                        </PivotItem>
                    );
                })}
            </Pivot>
        </div>
    );
};

export default DynamicPivot;

Refer this component in the main webpart.tsx file. The output of the above code is shown below.

Pivot with click event

We will use the same dynamic pivot code duplicated in a file named ‘PivotWithClick.tsx‘ and then add the click event and the selected key. Copy and paste the below code in to the file.

import * as React from 'react';
import styles from './PivotSample.module.scss';
import { Pivot, PivotItem } from 'office-ui-fabric-react/lib/Pivot';

export interface IPivotWithClickProps {
    selectedKey: string;
    OnMenuClick: (item: PivotItem) => void;
}

export interface IPivotItem {
    text: string;
    key: string;
}

const ISampleItems: IPivotItem[] = [
    { text: 'Dynamic Item 1', key: '0' },
    { text: 'Dynamic Item 2', key: '1' },
    { text: 'Dynamic Item 3', key: '2' },
    { text: 'Dynamic Item 4', key: '3' }
];

const PivotWithClick: React.FunctionComponent<IPivotWithClickProps> = (props) => {

    return (
        <div>
            <Pivot selectedKey={props.selectedKey} onLinkClick={props.OnMenuClick}>
                {ISampleItems.map((item: IPivotItem) => {
                    return (
                        <PivotItem headerText={item.text} itemKey={item.key}>
                            <div className={styles.pivotContent}>{`This is the ${item.text} with key: ${item.key}`}</div>
                        </PivotItem>
                    );
                })}
            </Pivot>
        </div>
    );
};

export default PivotWithClick;

If you see the above code, we had declared the properties for this component, selected key and onmenuclick. So when refering this component on the main webpart.tsx file, both the properties has to be passed. Copy and paste the below code in the main webpart.tsx file.

const [selKey, setSelKey] = React.useState<string>('');
const [selText, setSelText] = React.useState<string>('');
const handlePivotItemClick = (item: PivotItem) => {
	setSelKey(item.props.itemKey);
	setSelText(item.props.headerText);
}

After importing the reference to the pivotwithclick component, copy and paste the below code in the render method.

<PivotWithClick selectedKey={selKey} OnMenuClick={handlePivotItemClick} />
	{selKey && selText &&
		<div className={styles.pivotContent}>
			{`Selected pivot item text: ${selText} and key: ${selKey}`}
		</div>
	}

The output of the above is shown below. Whenever the tab section is clicked we will be displaying the key and text in a separate div.

Custom styled pivot

Most of the controls in the Fluent UI can be customized with custom css. This sample shows the pivot control customized to the Azure look and feel. Create a file named ‘PivotWithCustomStyle.tsx‘. Copy and paste the below code in to the file.

import * as React from 'react';
import styles from './PivotSample.module.scss';
import { Pivot, PivotItem } from 'office-ui-fabric-react/lib/Pivot';

const CustomStylePivot: React.FunctionComponent<{}> = (props) => {

    return (
        <div>
            <Pivot className={styles.pivotControl}>
                <PivotItem headerText="Tab 1">
                    <div className={styles.pivotContent}>{"Pivot 1 content"}</div>
                </PivotItem>
                <PivotItem headerText="Tab 2">
                    <div className={styles.pivotContent}>{"Pivot 2 content"}</div>
                </PivotItem>
                <PivotItem headerText="Tab 3">
                    <div className={styles.pivotContent}>{"Pivot 3 content"}</div>
                </PivotItem>
            </Pivot>
        </div>
    );
};

export default CustomStylePivot;

Copy and paste the below css styles in the .scss file generated in the source folder.

.pivotControl {
    margin-top: -4px;
    div[role="tablist"] {
        border: 1px solid #7f7f7f;
        border-radius: 12px;
        padding: 1px;
    }
    button {
      padding: 2px 8px 3px;
      height: 25px;
      cursor: pointer;
      text-align: center;
      border-radius: 10px;
      background-clip: padding-box;
      overflow: hidden;
      text-overflow: ellipsis;
      border: 1px solid transparent!important;
      font-size: 13px;
      margin-right: 0px;
      &:hover {
          background-color: lightgrey;
          border-color: lightgrey;
      }
      &[aria-selected="true"] {
        background-color: #0078d4;
        border-color: #0078d4;
        color: #fff;
        fill: #fff;
      }
    }
  }

The above code is very simple, we have duplicated the simplepivot example and added some custom styles. The output is shown below.

The Final output of this sample web part with all the variations of Pivot control implemented is shown below.

Source Code

The source code along with other samples can be found in the below github link.

SPFx-Demos

Happy Coding…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s