Create A Webpart Which Will Retrieve List And Document Using SPFx

Introduction

In this blog, we are going to discuss the creation of a new webpart using SPFx (no JavaScript framework). This webpart will represent the data of the corresponding site such as website name, website URL, Total List Count. It retrieves the name of all custom lists and documents.

Let's get started …

Step A - (Creation of the Webpart)

Open the Command Prompt. Go to the drive where which you want to create the Project. Here I have created the project in “c-drive”.

Run the below commands:

“cd C:\”

“md Webpart”

Refer to image-1 for more details.

Create A Webpart Which will retrieve the List and Document using SPFx

Refer to image-2 and run the command “yo @microsoft/sharepoint”. Then enter the requested details the same as mentioned in Image-2 to create the webpart. The webpart creation may take some time, so wait to complete the installation.

After completion, you will see a congratulation message (Check Image-3).

Then run the command “code .” to open the Visual studio code.

Expand src-> webparts (Refer image-4) to open the files.

Step B - (Create a New File)

Create a new file inside C: \WebPart\src\webparts\dynamicWp. Name it as “GetList.ts” as shown in image:5.

Step C - (Change the code)

Here I have mentioned the code for corresponding files. So please refer to the instructions accordingly and add/change the code.

In “DynamicWPWebPart.ts” replace the below code.

import pnp from "sp-pnp-js";
import {
Version
} from '@microsoft/sp-core-library';
import {
IPropertyPaneConfiguration,
PropertyPaneTextField,
PropertyPaneDropdown
} from '@microsoft/sp-property-pane';
import {
BaseClientSideWebPart
} from '@microsoft/sp-webpart-base';
import {
escape
} from '@microsoft/sp-lodash-subset';
import styles from './DynamicWpWebPart.module.scss';
import * as strings from 'DynamicWpWebPartStrings';
import MockHttpClient from './GetList';
import {
SPHttpClient,
SPHttpClientResponse
} from '@microsoft/sp-http';
import {
Environment,
EnvironmentType
} from '@microsoft/sp-core-library';
import "@pnp/sp/webs";
import "@pnp/sp/lists";
import {
_List
} from '@pnp/sp/lists/types';
export interface IDynamicWpWebPartProps {
description: string;
List: string;
}
export interface ISPLists {
value: ISPList[];
}
export interface ISPList {
Title: string;
Id: string;
BaseTemplate: string;
}
let array: string[];
export default class DynamicWpWebPart extends BaseClientSideWebPart < IDynamicWpWebPartProps > {
private _renderList(): void {
if (Environment.type === EnvironmentType.Local) {
this._getItemsFromList().then((response) => {
this._listDesign(response.value);
});
} else if (Environment.type == EnvironmentType.SharePoint || Environment.type == EnvironmentType.ClassicSharePoint) {
this._getListData().then((response) => {
this._listDesign(response.value);
});
}
}
private _listDesign(items: ISPList[]): void {
let html: string = '';
let i = 0;
html += `
<div>
<p class="${ styles.label} style="margin:5px;5px;5px;5px; font-weight: bold">Total List Count : ${items.length}</p>
</div>`;
html +=`
<div>
<b style="font-size:20px;">Document</b>`
items.forEach((item: ISPList) => {
if (item.BaseTemplate=='101') {
html += `
<ul class="${styles.list}">
<li class="${styles.listItem}">
<span class="ms-font-l">Document Title :
<b>${item.Title}</b>
</span>
</li>
</ul>`;
}
});
html += ` </div>`;
html += `<div><b style="font-size:20px;">List</b>`
items.forEach((item1: ISPList) => {
if (item1.BaseTemplate == '100') {
html += `
<ul class="${styles.list}">
<li class="${styles.listItem}">
<span class="ms-font">List Title :
<b>${item1.Title}</b>
</span>
</li>
</ul>`
}
});
html += ` </div>`;
const listContainer: Element = this.domElement.querySelector('#spListContainer');
listContainer.innerHTML = html;
}
private _getListData(): Promise < ISPLists > {
return this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl + `/_api/web/lists?$filter=Hidden eq false`, SPHttpClient.configurations.v1).then((response: SPHttpClientResponse) => {
return response.json();
});
}
private _getItemsFromList(): Promise < ISPLists > {
return MockHttpClient.get().then((data: ISPList[]) => {
var listData: ISPLists = {
value: data
};
return listData;
}) as Promise < ISPLists > ;
}
public render(): void {
this.domElement.innerHTML = `
<textarea placeholder="DynamicWP" aria-label="Add a title" style="height: 23px; border:none;font-size:20px;font-weight: bold; width: 100%;"></textarea>
<div class="${ styles.dynamicWp }">
<div class="${ styles.container }">
<div class="${ styles.row }">
<div class="${ styles.column }">
<div>
<p class="${ styles.label} style="margin:5px;5px;5px;5px; font-weight: bold">WebSite Name : ${escape(this.context.pageContext.web.title)}</p>
</div>
<div>
<p class="${ styles.label} style="margin:5px;5px;5px;5px; font-weight: bold">WebSite URL : ${escape(this.context.pageContext.site.absoluteUrl)}</p>
</div>
<div id="spListContainer"/>
<p class="${ styles.description }">${escape(this.properties.description)}</p>
</div>
</div>
</div>
</div>`;
this._renderList();
}
protected get dataVersion(): Version {
return Version.parse('1.0');
}
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
return {
pages: [{
header: {
description: strings.PropertyPaneDescription,
list: strings.List
},
groups: [{
groupName: strings.BasicGroupName,
groupFields: [
PropertyPaneTextField('Description', {
label: strings.DescriptionFieldLabel
})
]
}]
}]
};
}
}

In “GetList.ts” add the below code.

import {
ISPList
} from './DynamicWpWebPart';
export default class GetDemoList {
private static_items: ISPList[] = [{
Title: 'List 1',
BaseTemplate: '101',
Id: '1'
}, {
Title: 'List 2',
BaseTemplate: '101',
Id: '2'
}, {
Title: 'List 3',
BaseTemplate: '101',
Id: '3',
}];
public static get(): Promise < ISPList[] > {
return new Promise < ISPList[] > ((resolve) => {
resolve(GetDemoList._items);
});
}
}

In “mystrings.d.ts” replace the below code.

declareinterfaceIDynamicWpWebPartStrings {
PropertyPaneDescription: string;
BasicGroupName: string;
DescriptionFieldLabel: string;
List: string;
}
declaremodule 'DynamicWpWebPartStrings' {
conststrings: IDynamicWpWebPartStrings;
export = strings;
}

In “en-us.js” replace the below code.

define([], function() {
return {
"PropertyPaneDescription": "Description",
"BasicGroupName": "Group Name",
"DescriptionFieldLabel": "Description Field",
"ListFieldLable": "Lists"
}
});

In“DynamicWpWebPart.module.scss”replace the below code.

@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';.dynamicWp {
.container {
max - width: 700 px;
margin: 0 pxauto;
box - shadow: 02 px4px0rgba(0, 0, 0, 0.2), 025 px50px0rgba(0, 0, 0, 0.1);
}.row {
@includems - Grid - row;
@includems - fontColor - white;
background - color: $ms - color - themeDark;
padding: 20 px;
}.column {
@includems - Grid - col;
@includems - lg10;
@includems - xl8;
@includems - xlPush2;
@includems - lgPush1;
}.title {
@includems - font - xl;
@includems - fontColor - white;
}.subTitle {
@includems - font - l;
@includems - fontColor - white;
}.description {
@includems - font - l;
@includems - fontColor - white;
}.button {
// Our button
text - decoration: none;
height: 32 px;
// Primary Button
min - width: 80 px;
background - color: $ms - color - themePrimary;
border - color: $ms - color - themePrimary;
color: $ms - color - white;
// Basic Button
outline: transparent;
position: relative;
font - family: "Segoe UI WestEuropean", "Segoe UI", -apple - system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans - serif; - webkit - font - smoothing: antialiased;
font - size: $ms - font - size - m;
font - weight: $ms - font - weight - regular;
border - width: 0;
text - align: center;
cursor: pointer;
display: inline - block;
padding: 016 px;.label {
font - weight: $ms - font - weight - semibold;
font - size: $ms - font - size - m;
height: 32 px;
line - height: 32 px;
margin: 04 px;
vertical - align: top;
display: inline - block;
}
}.list {
color: #333333;
font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
font-size: 14px;
font-weight: normal;
box-sizing: border-box;
background-color: # ffffff;
margin: 10;
padding: 10;
line - height: 50 px;
list - style - type: none;
box - shadow: 04 px4px0rgba(0, 0, 0, 0.2),
025 px50px0rgba(0, 0, 0, 0.1);
}.listItem {
color: #333333;
vertical-align: center;
font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
font-size: 14px;
font-weight: normal;
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: # ffffff;
box - shadow: none;* zoom: 1;
padding: 9 px28px3px;
position: relative;
}
}

Step D - (Add the webpart)

After following the above steps save all the files. In the command prompt run the command “gulp serve”. The browser will open automatically and by clicking on the plus sign you can add the webpart DynamicWP. (Refer to image-7).

The final webpart will appear as below image. (Refer to image-8).