How To Use Pivot Control Of Fluent UI In SPFx

Introduction

 

The Pivot control and related tabs pattern are used for navigating frequently accessed, distinct content categories. Pivots allow for navigation between two or more content views and rely on text headers to articulate the different sections of content.

 

Tapping on a pivot item header navigates to that header's section content.

 

Tabs are a visual variant of Pivot that uses a combination of icons and text or just icons to articulate section content.

 

Source from Fluent UI Pivot Component.

 

So, in this article, we will see how to implement pivot control with spfx webpart.

 

Scenario

 

In this example, we will show users and groups of a selected site in a tabbing form. For this, we will use pnpjs to get current site users and site groups and render it in pivot/tabs. We will add a site picker property in webpart property pane configuration so a user can see the output of any sites.

 

At the end, our output will be like this,

 

 

Implementation 

• Open a command prompt
• Move to the path where you want to create a project
• Create a project directory using:

md spfx-fluentui-pivot

Move to the above-created directory using:

cd spfx-fluentui-pivot

Now execute the below command to create an SPFx solution:

yo @microsoft/sharepoint

It will ask some questions, as shown below,

 

 

After a successful installation, we can open a project in any source code tool. Here, I am using the VS code, so I will execute the command:

code .

Now we will install pnpjs and pnp-spfx-controls-react as shown below: 

npm install @pnp/sp --save
npm install @pnp/spfx-property-controls --save --save-exact

Now go to the src > webparts > webpart > components > I{webpartname}Props.ts file,

 

Here we will use control PropertyFieldSitePicker to get sites of current sharepoint context.

import { WebPartContext } from "@microsoft/sp-webpart-base";
import { IPropertyFieldSite } from "@pnp/spfx-property-controls/lib/PropertyFieldSitePicker";

export interface ISpfxFluentuiPivotProps {
  site: IPropertyFieldSite[];
  context: WebPartContext
}

Create a file I{webpartname}State.ts inside src > webparts > webpart > components and create a state interface as below,

type user = {
  Title: string;
}

type group = {
  Title: string;
}

export interface ISpfxFluentuiPivotState {
  siteUsres: user[];
  siteGroups: group[];
}

Create a Service folder inside src and then in this folder create a file called SPService.ts. And in this file, we will create a service to get site users and site groups as below, 

 

Here site URL comes from the property pane site picker selected site so in the method we will pass the site URL as an argument. 

import { WebPartContext } from "@microsoft/sp-webpart-base";
import { sp, Web, SiteUsers, SiteGroups } from "@pnp/sp/presets/all";

export class SPService {
    constructor(private context: WebPartContext) {
        sp.setup({
            spfxContext: this.context
        });
    }

    public async getCurrentSiteUsers(siteUrl: string): Promise<any> {
        try {
            let currentWeb = Web(siteUrl)
            let users: any[] = await currentWeb.siteUsers();
            return users;
        } catch (err) {
            Promise.reject(err);
        }
    }

    public async getCurrentSiteGroups(siteUrl: string): Promise<any> {
        try {
            let currentWeb = Web(siteUrl)
            const groups: any[] = await currentWeb.siteGroups()
            return groups;
        }
        catch (err) {
            Promise.reject(err);
        }
    }
}

Now move to the {webpartname}Webpart.ts and create a site property in property pane configuration and pass a context and selected site object property as below, 

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library';
import {
  IPropertyPaneConfiguration,
  PropertyPaneTextField
} from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import * as strings from 'SpfxFluentuiPivotWebPartStrings';
import SpfxFluentuiPivot from './components/SpfxFluentuiPivot';
import { ISpfxFluentuiPivotProps } from './components/ISpfxFluentuiPivotProps';
import { PropertyFieldSitePicker } from '@pnp/spfx-property-controls/lib/PropertyFieldSitePicker';
import { IPropertyFieldSite } from "@pnp/spfx-property-controls/lib/PropertyFieldSitePicker";
export interface ISpfxFluentuiPivotWebPartProps {
  site: IPropertyFieldSite[];
}

export default class SpfxFluentuiPivotWebPart extends BaseClientSideWebPart<ISpfxFluentuiPivotWebPartProps> {

  public render(): void {
    const element: React.ReactElement<ISpfxFluentuiPivotProps> = React.createElement(
      SpfxFluentuiPivot,
      {
        context: this.context,
        site: this.properties.site
      }
    );

    ReactDom.render(element, this.domElement);
  }

  protected onDispose(): void {
    ReactDom.unmountComponentAtNode(this.domElement);
  }

  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyFieldSitePicker('site', {
                  label: 'Select sites',
                  initialSites: this.properties.site,
                  context: this.context,
                  deferredValidationTime: 500,
                  onPropertyChange: this.onPropertyPaneFieldChanged,
                  properties: this.properties,
                  key: 'sitesFieldId'
                })
              ]
            }
          ]
        }
      ]
    };
  }
}

Move to the {webpartname}.tsx file and then bind the service using current context and the call service to get users and groups for the selected site and set values in the state and render it in as a pivot/tab format as below,  

• We will import all necessary libraries. 
• Create a constructor and set an empty value in a state and bind the service.
• Create functions called getSiteUsres() and getSiteGroups() by calling the services and set the data in states.
• Create a function componentDidUpdate() to render data while property is update.
• Render data in pivot by mapping a states. 
  

  import * as React from 'react';
  import styles from './SpfxFluentuiPivot.module.scss';
  import { ISpfxFluentuiPivotProps } from './ISpfxFluentuiPivotProps';
  import { ISpfxFluentuiPivotState } from './ISpfxFluentuiPivotState';
  import { SPService } from '../../service/SPService';
  import * as strings from 'SpfxFluentuiPivotWebPartStrings';
  import { PivotItem, IPivotItemProps, Pivot } from 'office-ui-fabric-react/lib/Pivot';
  import { Label, ILabelStyles } from 'office-ui-fabric-react/lib/Label';
  import { IStyleSet } from 'office-ui-fabric-react/lib/Styling';
  
  const labelStyles: Partial<IStyleSet<ILabelStyles>> = {
    root: { marginTop: 10, marginLeft: 10 },
  };
  
  export default class SpfxFluentuiPivot extends React.Component<ISpfxFluentuiPivotProps, ISpfxFluentuiPivotState> {
  
    private _spService: SPService;
  
    constructor(props: ISpfxFluentuiPivotProps) {
      super(props);
      this.state = {
        siteUsres: [],
        siteGroups: [],
      }
      this._spService = new SPService(this.props.context);
    }
  
    public componentDidMount() {
      this.getSiteGroups();
      this.getSiteUsres();
    }
  
    public async getSiteUsres() {
      if (this.props.site && this.props.site.length) {
        let siteUrl = this.props.site[0].url;
        let users = await this._spService.getCurrentSiteUsers(siteUrl);
        this.setState({ siteUsres: users });
      }
    }
  
    public async getSiteGroups() {
      if (this.props.site && this.props.site.length) {
        let siteUrl = this.props.site[0].url;
        let groups = await this._spService.getCurrentSiteGroups(siteUrl);
        this.setState({ siteGroups: groups });
      }
    }
  
    public componentDidUpdate(prevProps: ISpfxFluentuiPivotProps) {
      if (prevProps.site !== this.props.site) {
        this.getSiteGroups();
        this.getSiteUsres();
      }
    }
  
    public render(): React.ReactElement<ISpfxFluentuiPivotProps> {
      return (
        <React.Fragment>
          {
            this.props.site && this.props.site.length ?
              <React.Fragment>
                <Label>Selected Site: {this.props.site[0].title}</Label>
                <Pivot aria-label="Count and Icon Pivot Example">
                  <PivotItem headerText={strings.SiteUserLabel}>
                    {this.state.siteUsres.map((value) =>
                      <Label styles={labelStyles}>{value.Title}</Label>
                    )}
                  </PivotItem>
                  <PivotItem headerText={strings.SiteGroupsLabel}>
                    {this.state.siteGroups.map((value) =>
                      <Label styles={labelStyles}>{value.Title}</Label>
                    )}
                  </PivotItem>
                </Pivot>
              </React.Fragment>
              : <Label>{strings.ErrorMessageLabel}</Label>}
        </React.Fragment>
      );
    }
  }

Now serve the application using the below command,

gulp serve

Now test the webpart in SharePoint-SiteURL + /_layouts/15/workbench.aspx.

 

Output

 

 

Find the full source code here.

 

Summary

 

In this article, we have seen how to implement pivot control of fluent UI in spfx webpart.

 

I hope this helps.

 

Sharing is caring!