PnP React Controls

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.
You will see how to use PnP List View control in SPFx webpart.

PnP List Item View control

This control renders a list view for the given set of items. Refer to this link for more details and to see all the properties available for this control.
PnP List View Control In SharePoint Framework
PnP List View Control In SharePoint Framework
Note
I have created a custom list named Project and added the items as shown below.
PnP List View Control In SharePoint Framework
In this article, you will see how to perform the following tasks,
Prerequisites

Create SPFx solution

Open Node.js command prompt.
Create a new folder.
>md spfx-pnpreact-listview
Navigate to the folder.
> cd spfx-pnpreact-listview
Execute the following command to create SPFx webpart.
>yo @microsoft/sharepoint
Enter all the required details to create a new solution as shown below.
PnP List View Control In SharePoint Framework
Yeoman generator will perform the scaffolding process and 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 List View 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
Folder Structure
PnP List View Control In SharePoint Framework
Create a new folder named “models” inside webparts\pnPListView folder. Create a new file named as IListItem.ts. Open “src\webparts\pnPListView\models\IListItem.ts” file and update the code as shown below.
  1. export interface IListItem {
  2. Title: string;
  3. StartDate: string;
  4. EndDate: string;
  5. Status: string;
  6. }
  8. export interface IListItemColl {
  9. value: IListItem[];
  10. }
Create a new file named index.ts under models folder. Open “src\webparts\pnPListView\services\index.ts” file and update the code as shown below.
  1. export * from './IListItem';
Create a new file named as IPnPListViewState.ts under components folder. Open “src\webparts\pnPListView\components\IPnPListViewState.ts” file and update the code as shown below.
  1. import {IListItem, IListItemColl} from '../models/IListItem';
  3. export interface IPnPListViewState{
  4. items?: IListItem[];
  5. }
Create a new folder named “services” inside webparts\pnPListView folder. Create a new file named as ListViewService.ts. Open “src\webparts\pnPListView\services\ListViewService.ts” file and update the code as shown below. Import all the required modules and create getAllItems method which will retrieve data from SharePoint list using PnP.
  1. import { WebPartContext } from '@microsoft/sp-webpart-base';
  2. import { sp } from "@pnp/sp";
  3. import "@pnp/sp/webs";
  4. import "@pnp/sp/lists";
  5. import "@pnp/sp/items";
  6. import { IListItem, IListItemColl } from '../models/IListItem';
  8. export class ListViewService {
  10. public setup(context: WebPartContext): void {
  11. sp.setup({
  12. spfxContext: context
  13. });
  14. }
  16. public async getAllItems(listname: string): Promise<IListItem[]> {
  17. return new Promise<IListItem[]>(async (resolve, reject) => {
  18. try {
  19. var listItems: Array<IListItem> = new Array<IListItem>();
  20. sp.web.lists.getByTitle(listname).items.getAll().then((items) => {
  21. items.map((item) => {
  22. listItems.push({
  23. Title: item.Title,
  24. StartDate: item.StartDate,
  25. EndDate: item.EndDate,
  26. Status: item.Status
  27. });
  28. });
  29. resolve(listItems);
  30. });
  31. }
  32. catch (error) {
  33. console.log(error);
  34. }
  35. });
  36. }
  37. }
  39. const SPListViewService = new ListViewService();
  40. export default SPListViewService;
Create a new file named as index.ts under services folder. Open “src\webparts\pnPListView\services\index.ts” file and update the code as shown below.
  1. export * from './ListViewService';
Open “src\webparts\pnPListView\PnPListViewWebPart.ts” file and update the following.
Import modules
  1. import ListViewService from '../pnPListView/services/ListViewService';
Update the OnInit method
  1. protected onInit(): Promise<void> {
  2. return super.onInit().then(() => {
  3. ListViewService.setup(this.context);
  4. });
  5. }
Open “src\webparts\pnPListView\components\PnPListView.tsx” file and import the modules.
  1. import { IPnPListViewState } from './IPnPListViewState';
  2. import { ListView, IViewField, SelectionMode, GroupOrder, IGrouping } from "@pnp/spfx-controls-react/lib/ListView";
  3. import { IListItem, IListItemColl } from '../models/IListItem';
  4. import ListViewService from '../services/ListViewService';
Update the render method as shown below.
  1. public render(): React.ReactElement<IPnPListViewProps> {
  2. const { items = [] } = this.state;
  3. return (
  4. <div className={styles.pnPListView}>
  5. <ListView
  6. items={this.state.items}
  7. viewFields={viewFields}
  8. groupByFields={groupByFields}
  9. compact={true}
  10. selectionMode={SelectionMode.none}
  11. showFilter={true}
  12. filterPlaceHolder="Search..."
  13. />
  14. </div>
  15. );
Call the ListViewService to retrieve SharePoint list items.
  1. public _getItems = (): void => {
  2. ListViewService.getAllItems('Project').then(listItems => {
  3. console.log(listItems);
  4. this._items = listItems;
  5. this.setState({
  6. items: listItems
  7. });
  8. });
  9. }
Updated React component (src\webparts\pnPListView\components\PnPListView.tsx),
  1. import * as React from 'react';
  2. import styles from './PnPListView.module.scss';
  3. import { IPnPListViewProps } from './IPnPListViewProps';
  4. import { escape } from '@microsoft/sp-lodash-subset';
  5. import { IPnPListViewState } from './IPnPListViewState';
  6. import { ListView, IViewField, SelectionMode, GroupOrder, IGrouping } from "@pnp/spfx-controls-react/lib/ListView";
  7. import { IListItem, IListItemColl } from '../models/IListItem';
  8. import ListViewService from '../services/ListViewService';
  10. const viewFields: IViewField[] = [{
  11. name: "Title",
  12. displayName: "Title",
  13. isResizable: true,
  14. sorting: true,
  15. minWidth: 0,
  16. maxWidth: 150
  17. },
  18. {
  19. name: "StartDate",
  20. displayName: "StartDate",
  21. isResizable: true,
  22. sorting: true,
  23. minWidth: 0,
  24. maxWidth: 200
  25. },
  26. {
  27. name: "EndDate",
  28. displayName: "EndDate",
  29. isResizable: true,
  30. sorting: true,
  31. minWidth: 0,
  32. maxWidth: 200
  33. },
  34. {
  35. name: "Status",
  36. displayName: "Status",
  37. isResizable: true,
  38. sorting: true,
  39. minWidth: 0,
  40. maxWidth: 150
  41. },];
  43. const groupByFields: IGrouping[] = [
  44. {
  45. name: "Status",
  46. order: GroupOrder.ascending
  47. },];
  49. export default class PnPListView extends React.Component<IPnPListViewProps, IPnPListViewState> {
  51. private _items: IListItem[] = [];
  53. constructor(props: IPnPListViewProps, state: IPnPListViewState) {
  54. super(props);
  55. this.state = {
  56. items: []
  57. };
  58. }
  60. public componentDidMount(): void {
  61. this._getItems();
  62. }
  64. public render(): React.ReactElement<IPnPListViewProps> {
  65. const { items = [] } = this.state;
  66. return (
  67. <div className={styles.pnPListView}>
  68. <ListView
  69. items={this.state.items}
  70. viewFields={viewFields}
  71. groupByFields={groupByFields}
  72. compact={true}
  73. selectionMode={SelectionMode.none}
  74. showFilter={true}
  75. filterPlaceHolder="Search..."
  76. />
  77. </div>
  78. );
  79. }
  81. public _getItems = (): void => {
  82. ListViewService.getAllItems('Project').then(listItems => {
  83. console.log(listItems);
  84. this._items = listItems;
  85. this.setState({
  86. items: listItems
  87. });
  88. });
  89. }
  90. }

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 (sharepoint\solution\spfx-pnpreact-listview.sppkg). Click Deploy.
PnP List View Control In SharePoint Framework

Test the webpart

Navigate to the SharePoint site and add the app.
PnP List View Control In SharePoint Framework
Navigate to the page and add the webpart as shown below.
PnP List View Control In SharePoint Framework
Result
PnP List View Control In SharePoint Framework
PnP List View Control In SharePoint Framework

Summary

Thus, in this article, you saw how to use PnP List View control in SharePoint Framework.