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.

PnP List Picker And Fluent UI Dialog Control In SharePoint Framework

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

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.