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/sharepointThe 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.
Happy Coding…
Knowledge Share 
I have to thank you for the efforts you have put in penning this blog. I am hoping to view the same high-grade blog posts by you later on as well. In truth, your creative writing abilities has motivated me to get my own, personal site now 😉
LikeLiked by 1 person
Thanks for your whole efforts on this site. Kate take interest in carrying out investigation and it is obvious why. I learn all of the compelling manner you make both interesting and useful guidelines via this web site and as well as recommend participation from other ones on the matter plus our favorite child is always discovering a lot of things. Take pleasure in the remaining portion of the year. You have been performing a fantastic job.
LikeLike