PnP List Picker And Fluent UI Dialog Control In SharePoint Framework

Introduction

 

Patterns and Practices (PnP) provides a list of reusable React controls to developers for building solutions such as webparts and extensions using SharePoint Framework.

 

Refer to this link to get the list of React controls for SPFx.

 

PnP List Picker control

 

This control allows you to select one or multiple available lists/libraries of the current site. Refer to this link for more details and to see all the properties available for this control.

 

Fluent UI

 

A collection of UX frameworks use to build Fluent experiences that fit seamlessly into a broad range of Microsoft products.

 

Fluent UI Dialog

 

Dialogs are temporary, modal UI overlays that generally provide contextual app information or require user confirmation/input. Refer to this link for more details.

 

List picker control displays all the custom lists from the current site and the user can select the list. The selected list can be deleted by clicking the button and a dialog pops up for confirmation. PnP JS is used to delete the list.

 

 

 

In this article, you will see how to perform the following tasks,

• Prerequisites
• Create SPFx solution
• Implement the solution
• Deploy the solution
• Test the webpart

Prerequisites

• Set up your Office 365 Tenant
• Set up development environment

Create SPFx solution

 

Open the Node.js command prompt.

 

Create a new folder.

 

>md fluentui-dialogcontrol

 

Navigate to the folder.

 

>cd fluentui-dialogcontrol

 

Execute the following command to create a SPFx webpart.

 

>yo @microsoft/sharepoint

 

Enter all the required details to create a new solution, as shown below:

 

 

Yeoman generator will perform the scaffolding process. Once it is completed, lock down the version of project dependencies by executing the following command.

 

>npm shrinkwrap

 

Execute the following command to open the solution in the code editor.

 

>code .

 

Implement the solution

 

Execute the following command to install the PnP React Controls NPM package.

 

>npm install @pnp/spfx-controls-react –save

 

Execute the following command to install @pnp/sp package

 

>npm install @pnp/sp –save

 

Open props file “fluentui-dialogcontrol\src\webparts\dialogcontrol\components\IDialogcontrolProps.ts” and update the code as shown below.

import {WebPartContext} from '@microsoft/sp-webpart-base';

export interface IDialogcontrolProps {
  description: string;
  context: WebPartContext;
}

Create a new file named as IDialogcontrolState.ts under the components folder. Open the“fluentui-dialogcontrol\src\webparts\dialogcontrol\components\IDialogcontrolState.ts” file and update the code, as shown below:

export interface IDialogcontrolState{
    hideDialog: boolean;
    listName: string;
}

Open the webpart file “fluentui-dialogcontrol\src\webparts\dialogcontrol\DialogcontrolWebPart.ts” and update the following.

• Import modules
• Update the OnInit method

Import modules:

import { sp } from "@pnp/sp";

Update the OnInit method:

public onInit(): Promise<void> {
    return super.onInit().then(_ => {
      sp.setup({
        spfxContext: this.context
      });
    });
  }

Update the render method:

public render(): void {
    const element: React.ReactElement<IDialogcontrolProps> = React.createElement(
      Dialogcontrol,
      {
        description: this.properties.description,
        context: this.context
      }
    );

Open the component file “fluentui-dialogcontrol\src\webparts\dialogcontrol\components\Dialogcontrol.tsx” and import the modules.

import { IDialogcontrolState } from './IDialogcontrolState';
import { Dialog, DialogType, DialogFooter } from 'office-ui-fabric-react/lib/Dialog';
import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button';
import { ListPicker } from "@pnp/spfx-controls-react/lib/ListPicker";
import { autobind } from 'office-ui-fabric-react';
import { sp } from "@pnp/sp";
import "@pnp/sp/webs";
import "@pnp/sp/lists";

Update the render method, as shown below.

public render(): React.ReactElement<IDialogcontrolProps> {
    return (
      <div>
        <ListPicker context={this.props.context}
          label="Select your list(s)"
          placeHolder="Select your list(s)"
          baseTemplate={100}
          includeHidden={false}
          multiSelect={false}
          onSelectionChanged={this.onListPickerChange} />
        <div>
          <DefaultButton secondaryText="Opens the Sample Dialog" onClick={this._showDialog} text="Delete List" />
        </div>

        <Dialog
          hidden={this.state.hideDialog}
          onDismiss={this._closeDialog}
          dialogContentProps={{
            type: DialogType.close,
            title: 'Delete?',
            subText:
              'Are you sure you want to send the item(s) to the site Recycle Bin?',
          }}

          modalProps={{
            isBlocking: false,
            styles: { main: { maxWidth: 450 } },
          }}
        >
          <DialogFooter>
            <PrimaryButton onClick={this._closeDialog} text="Delete" />
          </DialogFooter>
        </Dialog>
      </div>
    );
  }

Add the helper methods:

@autobind
  private onListPickerChange(list: string) {
    this.setState({ listName: list });
  }

  private _showDialog = (): void => {
    this.setState({ hideDialog: false });
  }

  private _closeDialog = (): void => {
    sp.web.lists.getById(this.state.listName).recycle();
    this.setState({ hideDialog: true });
    this.render();
  }

Updated React component (fluentui-dialogcontrol\src\webparts\dialogcontrol\components\Dialogcontrol.tsx):

import * as React from 'react';
import styles from './Dialogcontrol.module.scss';
import { IDialogcontrolProps } from './IDialogcontrolProps';
import { IDialogcontrolState } from './IDialogcontrolState';
import { escape } from '@microsoft/sp-lodash-subset';
import { Dialog, DialogType, DialogFooter } from 'office-ui-fabric-react/lib/Dialog';
import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button';
import { ListPicker } from "@pnp/spfx-controls-react/lib/ListPicker";
import { autobind } from 'office-ui-fabric-react';
import { sp } from "@pnp/sp";
import "@pnp/sp/webs";
import "@pnp/sp/lists";

export default class Dialogcontrol extends React.Component<IDialogcontrolProps, IDialogcontrolState> {
  constructor(props: IDialogcontrolProps) {
    super(props);
    this.state = {
      hideDialog: true,
      listName: ''
    };
  }

  public render(): React.ReactElement<IDialogcontrolProps> {
    return (
      <div>
        <ListPicker context={this.props.context}
          label="Select your list(s)"
          placeHolder="Select your list(s)"
          baseTemplate={100}
          includeHidden={false}
          multiSelect={false}
          onSelectionChanged={this.onListPickerChange} />
        <div>
          <DefaultButton secondaryText="Opens the Sample Dialog" onClick={this._showDialog} text="Delete List" />
        </div>

        <Dialog
          hidden={this.state.hideDialog}
          onDismiss={this._closeDialog}
          dialogContentProps={{
            type: DialogType.close,
            title: 'Delete?',
            subText:
              'Are you sure you want to send the item(s) to the site Recycle Bin?',
          }}

          modalProps={{
            isBlocking: false,
            styles: { main: { maxWidth: 450 } },
          }}
        >
          <DialogFooter>
            <PrimaryButton onClick={this._closeDialog} text="Delete" />
          </DialogFooter>
        </Dialog>
      </div>
    );
  }

  @autobind
  private onListPickerChange(list: string) {
    this.setState({ listName: list });
  }

  private _showDialog = (): void => {
    this.setState({ hideDialog: false });
  }

  private _closeDialog = (): void => {
    sp.web.lists.getById(this.state.listName).recycle();
    this.setState({ hideDialog: true });
    this.render();
  }
}

Deploy the solution

 

Execute the following commands to bundle and package the solution.

 

>gulp bundle --ship

>gulp package-solution --ship

 

Navigate to tenant app catalog – Example: https://c986.sharepoint.com/sites/appcatalog/SitePages/Home.aspx

 

Upload the package file (fluentui-dialogcontrol\sharepoint\solution\fluentui-dialogcontrol.sppkg). Click Deploy.

 

Test the webpart

 

Navigate to the SharePoint site and add the app.

 

 

Navigate to the page and add the webpart. Select the list from the list picker control and click the delete list button. A confirmation dialog pops up and click on Delete. The List should delete successfully.

 

 

 

Summary

 

Thus, in this article, you saw how to use PnP List Picker and Fluent UI Dialog control in SharePoint Framework.