Open\nCommand Prompt. Go to the drive in which you want to create the Project. Here I\nhave created the project in \u201cc-drive\u201d.<\/p>\n\n\n\n
Run\nthe below commands<\/p>\n\n\n\n
- \u201ccd C:\\<\/strong>\u201d<\/li>
- \u201cmd Webpart<\/strong>\u201d<\/li><\/ul>\n\n\n\n
Refer\nimage-1<\/strong> for more details.<\/strong><\/p>\n\n\n\n
Image:1<\/strong><\/p>\n\n\n\n
![\"\"](\"https:\/\/www.softreetechnology.com\/wp-content\/uploads\/2021\/02\/1.png\")
<\/figure>\n\n\n\nRefer\nimage-2<\/strong> and run the command \u201cyo @microsoft\/sharepoint\u201d.<\/strong> Then\nEnter the asked details same as mentioned in Image-2<\/strong> to create the\nwebpart. The webpart creation may take some time so wait to complete the\ninstallation.<\/p>\n\n\n\n
After\ncompletion, you can see a Congratulation message (Check Image-3<\/strong>).<\/p>\n\n\n\n
Image:2<\/strong><\/p>\n\n\n\n
![\"\"](\"https:\/\/www.softreetechnology.com\/wp-content\/uploads\/2021\/02\/2.png\")
<\/figure>\n\n\n\nImage:3<\/strong><\/p>\n\n\n\n
![\"\"](\"https:\/\/www.softreetechnology.com\/wp-content\/uploads\/2021\/02\/3.png\")
<\/figure>\n\n\n\nThen\nrun the command \u201c<\/strong>code .\u201d <\/strong>to open the Visual studio\ncode.<\/p>\n\n\n\n
Expand src-> webparts<\/strong> (Refer image-4<\/strong>) to open the files.<\/p>\n\n\n\n
Image:4<\/strong><\/p>\n\n\n\n
![\"\"](\"https:\/\/www.softreetechnology.com\/wp-content\/uploads\/2021\/02\/4.png\")
<\/figure>\n\n\n\nStep-B:(Create a New File):<\/strong><\/p>\n\n\n\n
Create\na new file inside C: \\WebPart\\src\\webparts\\dynamicWp<\/strong>. Name it as \u201cGetList.ts<\/strong>\u201d\nas shown in image:5.<\/strong><\/p>\n\n\n\n
Image:5<\/strong><\/p>\n\n\n\n
![\"\"](\"https:\/\/www.softreetechnology.com\/wp-content\/uploads\/2021\/02\/5.png\")
<\/figure>\n\n\n\nImage:6<\/strong><\/p>\n\n\n\n
![\"\"](\"https:\/\/www.softreetechnology.com\/wp-content\/uploads\/2021\/02\/6.png\")
<\/figure>\n\n\n\nStep-C:(Change the code):<\/strong><\/p>\n\n\n\n
Here\nI have mentioned the code for corresponding files. So please refer the\ninstructions accordingly and add\/change the code.<\/p>\n\n\n\n
- In \u201cDynamicWPWebPart.ts<\/strong>\u201d replace the below code.<\/li><\/ul>\n\n\n\n
import pnp from “sp-pnp-js”;<\/p>\n\n\n\n
import { Version } from ‘@microsoft\/sp-core-library’;<\/p>\n\n\n\n
import {<\/p>\n\n\n\n
IPropertyPaneConfiguration,<\/p>\n\n\n\n
PropertyPaneTextField ,<\/p>\n\n\n\n
PropertyPaneDropdown<\/p>\n\n\n\n
} from ‘@microsoft\/sp-property-pane’;<\/p>\n\n\n\n
import { BaseClientSideWebPart } from ‘@microsoft\/sp-webpart-base’;<\/p>\n\n\n\n
import { escape } from ‘@microsoft\/sp-lodash-subset’;<\/p>\n\n\n\n
import styles from ‘.\/DynamicWpWebPart.module.scss’;<\/p>\n\n\n\n
import * as strings from ‘DynamicWpWebPartStrings’;<\/p>\n\n\n\n
import MockHttpClient from ‘.\/GetList’;<\/p>\n\n\n\n
import{<\/p>\n\n\n\n
SPHttpClient,<\/p>\n\n\n\n
SPHttpClientResponse<\/p>\n\n\n\n
}from ‘@microsoft\/sp-http’;<\/p>\n\n\n\n
import {<\/p>\n\n\n\n
Environment,<\/p>\n\n\n\n
EnvironmentType<\/p>\n\n\n\n
} from ‘@microsoft\/sp-core-library’;<\/p>\n\n\n\n
import “@pnp\/sp\/webs”;<\/p>\n\n\n\n
import “@pnp\/sp\/lists”;<\/p>\n\n\n\n
import { _List} from ‘@pnp\/sp\/lists\/types’;<\/p>\n\n\n\n
export interface IDynamicWpWebPartProps {<\/p>\n\n\n\n
description: string;<\/p>\n\n\n\n
List:string;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
export interface ISPLists {<\/p>\n\n\n\n
value: ISPList[];<\/p>\n\n\n\n
}<\/p>\n\n\n\n
export interface ISPList {<\/p>\n\n\n\n
Title: string;<\/p>\n\n\n\n
Id: string;<\/p>\n\n\n\n
BaseTemplate: string;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
let array:string[];<\/p>\n\n\n\n
export default class DynamicWpWebPart extends BaseClientSideWebPart<IDynamicWpWebPartProps> {<\/p>\n\n\n\n
private _renderList(): void {<\/p>\n\n\n\n
if (Environment.type === EnvironmentType.Local) {<\/p>\n\n\n\n
this._getItemsFromList().then((response) => {<\/p>\n\n\n\n
this._listDesign(response.value);<\/p>\n\n\n\n
});<\/p>\n\n\n\n
}<\/p>\n\n\n\n
else if (Environment.type == EnvironmentType.SharePoint ||<\/p>\n\n\n\n
Environment.type == EnvironmentType.ClassicSharePoint) {<\/p>\n\n\n\n
this._getListData()<\/p>\n\n\n\n
.then((response) => {<\/p>\n\n\n\n
this._listDesign(response.value);<\/p>\n\n\n\n
});<\/p>\n\n\n\n
}<\/p>\n\n\n\n
}<\/p>\n\n\n\n
private _listDesign(items: ISPList[]): void {<\/p>\n\n\n\n
let html: string = ”;<\/p>\n\n\n\n
let i =0;<\/p>\n\n\n\n
html+=`<\/p>\n\n\n\n
<div><p class=”${ styles.label} style=”margin:5px;5px;5px;5px; font-weight: bold”>Total List Count : ${items.length}<\/p><\/p>\n\n\n\n
<\/div>`;<\/p>\n\n\n\n
html +=`<div><b style=”font-size:20px;”>Document<\/b>`<\/p>\n\n\n\n
items.forEach((item: ISPList) => {<\/p>\n\n\n\n
if (item.BaseTemplate==’101′) {<\/p>\n\n\n\n
html += `<\/p>\n\n\n\n
<ul class=”${styles.list}”><\/p>\n\n\n\n
<li class=”${styles.listItem}”><\/p>\n\n\n\n
<span class=”ms-font-l”>Document Title : <b>${item.Title}<\/b><\/span><\/p>\n\n\n\n
<\/li><\/p>\n\n\n\n
<\/ul>`;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
});<\/p>\n\n\n\n
html +=` <\/div>`;<\/p>\n\n\n\n
html +=`<div><b style=”font-size:20px;”>List<\/b>`<\/p>\n\n\n\n
items.forEach((item1: ISPList) => {<\/p>\n\n\n\n
if(item1.BaseTemplate==’100′){<\/p>\n\n\n\n
html += `<\/p>\n\n\n\n
<ul class=”${styles.list}”><\/p>\n\n\n\n
<li class=”${styles.listItem}”><\/p>\n\n\n\n
<span class=”ms-font”>List Title : <b>${item1.Title}<\/b><\/span><\/p>\n\n\n\n
<\/li><\/p>\n\n\n\n
<\/ul>`<\/p>\n\n\n\n
}<\/p>\n\n\n\n
});<\/p>\n\n\n\n
html +=` <\/div>`;<\/p>\n\n\n\n
const listContainer: Element = this.domElement.querySelector(‘#spListContainer’);<\/p>\n\n\n\n
listContainer.innerHTML = html;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
private _getListData(): Promise<ISPLists> {<\/p>\n\n\n\n
return this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl + `\/_api\/web\/lists?$filter=Hidden eq false`, SPHttpClient.configurations.v1)<\/p>\n\n\n\n
.then((response: SPHttpClientResponse) => {<\/p>\n\n\n\n
return response.json();<\/p>\n\n\n\n
});<\/p>\n\n\n\n
}<\/p>\n\n\n\n
private _getItemsFromList(): Promise<ISPLists> {<\/p>\n\n\n\n
return MockHttpClient.get()<\/p>\n\n\n\n
.then((data: ISPList[]) => {<\/p>\n\n\n\n
var listData: ISPLists = { value: data };<\/p>\n\n\n\n
return listData;<\/p>\n\n\n\n
}) as Promise<ISPLists>;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
public render(): void {<\/p>\n\n\n\n
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><\/p>\n\n\n\n
<div class=”${ styles.dynamicWp }”><\/p>\n\n\n\n
<div class=”${ styles.container }”><\/p>\n\n\n\n
<div class=”${ styles.row }”><\/p>\n\n\n\n
<div class=”${ styles.column }”><\/p>\n\n\n\n
<div><p class=”${ styles.label} style=”margin:5px;5px;5px;5px; font-weight: bold”>WebSite Name : ${escape(this.context.pageContext.web.title)}<\/p><\/div><\/p>\n\n\n\n
<div><p class=”${ styles.label} style=”margin:5px;5px;5px;5px; font-weight: bold”>WebSite URL : ${escape(this.context.pageContext.site.absoluteUrl)}<\/p><\/div> <\/p>\n\n\n\n
<div id=”spListContainer”\/><\/p>\n\n\n\n
<p class=”${ styles.description }”>${escape(this.properties.description)}<\/p><\/p>\n\n\n\n
<\/div><\/p>\n\n\n\n
<\/div><\/p>\n\n\n\n
<\/div><\/p>\n\n\n\n
<\/div>`;<\/p>\n\n\n\n
this._renderList();<\/p>\n\n\n\n
}<\/p>\n\n\n\n
protected get dataVersion(): Version {<\/p>\n\n\n\n
return Version.parse(‘1.0’);<\/p>\n\n\n\n
}<\/p>\n\n\n\n
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {<\/p>\n\n\n\n
return {<\/p>\n\n\n\n
pages: [<\/p>\n\n\n\n
{<\/p>\n\n\n\n
header: <\/p>\n\n\n\n
{<\/p>\n\n\n\n
description: strings.PropertyPaneDescription,<\/p>\n\n\n\n
list : strings.List<\/p>\n\n\n\n
},<\/p>\n\n\n\n
groups: [<\/p>\n\n\n\n
{<\/p>\n\n\n\n
groupName: strings.BasicGroupName,<\/p>\n\n\n\n
groupFields: [<\/p>\n\n\n\n
PropertyPaneTextField(‘Description’, {<\/p>\n\n\n\n
label: strings.DescriptionFieldLabel<\/p>\n\n\n\n
})<\/p>\n\n\n\n
]<\/p>\n\n\n\n
}<\/p>\n\n\n\n
]<\/p>\n\n\n\n
}<\/p>\n\n\n\n
]<\/p>\n\n\n\n
};<\/p>\n\n\n\n
}<\/p>\n\n\n\n
}<\/p>\n\n\n\n
- In \u201cGetList.ts<\/strong>\u201d add the below code.<\/li><\/ul>\n\n\n\n
import { ISPList } from ‘.\/DynamicWpWebPart’;<\/p>\n\n\n\n
export default class GetDemoList {<\/p>\n\n\n\n
private static _items: ISPList[] = [{ Title: ‘List 1′,BaseTemplate:’101’,Id: ‘1’ },<\/p>\n\n\n\n
{ Title: ‘List 2′,BaseTemplate:’101’ ,Id: ‘2’ },<\/p>\n\n\n\n
{ Title: ‘List 3′,BaseTemplate:’101’, Id: ‘3’ , }];<\/p>\n\n\n\n
public static get(): Promise<ISPList[]> {<\/p>\n\n\n\n
return new Promise<ISPList[]>((resolve) => {<\/p>\n\n\n\n
resolve(GetDemoList._items);<\/p>\n\n\n\n
});<\/p>\n\n\n\n
}<\/p>\n\n\n\n
}<\/p>\n\n\n\n
- In \u201cmystrings.d.ts<\/strong>\u201d replace the below code.<\/li><\/ul>\n\n\n\n
declare interface IDynamicWpWebPartStrings {<\/p>\n\n\n\n
PropertyPaneDescription: string;<\/p>\n\n\n\n
BasicGroupName: string;<\/p>\n\n\n\n
DescriptionFieldLabel: string;<\/p>\n\n\n\n
List:string;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
declare module ‘DynamicWpWebPartStrings’ {<\/p>\n\n\n\n
const strings: IDynamicWpWebPartStrings;<\/p>\n\n\n\n
export = strings;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
- In \u201cen-us.js<\/strong>\u201d replace the below code.<\/li><\/ul>\n\n\n\n
define([], function() {<\/p>\n\n\n\n
return {<\/p>\n\n\n\n
“PropertyPaneDescription”: “Description”,<\/p>\n\n\n\n
“BasicGroupName”: “Group Name”,<\/p>\n\n\n\n
“DescriptionFieldLabel”: “Description Field”,<\/p>\n\n\n\n
“ListFieldLable” : “Lists”<\/p>\n\n\n\n
}<\/p>\n\n\n\n
});<\/p>\n\n\n\n
- In \u201c<\/strong>DynamicWpWebPart.module.scss\u201d<\/strong> replace the below code.<\/li><\/ul>\n\n\n\n
@import ‘~@microsoft\/sp-office-ui-fabric-core\/dist\/sass\/SPFabricCore.scss’;<\/p>\n\n\n\n
.dynamicWp {<\/p>\n\n\n\n
.container {<\/p>\n\n\n\n
max-width: 700px;<\/p>\n\n\n\n
margin: 0px auto;<\/p>\n\n\n\n
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.row {<\/p>\n\n\n\n
@include ms-Grid-row;<\/p>\n\n\n\n
@include ms-fontColor-white;<\/p>\n\n\n\n
background-color: $ms-color-themeDark;<\/p>\n\n\n\n
padding: 20px;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.column {<\/p>\n\n\n\n
@include ms-Grid-col;<\/p>\n\n\n\n
@include ms-lg10;<\/p>\n\n\n\n
@include ms-xl8;<\/p>\n\n\n\n
@include ms-xlPush2;<\/p>\n\n\n\n
@include ms-lgPush1;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.title {<\/p>\n\n\n\n
@include ms-font-xl;<\/p>\n\n\n\n
@include ms-fontColor-white;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.subTitle {<\/p>\n\n\n\n
@include ms-font-l;<\/p>\n\n\n\n
@include ms-fontColor-white;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.description {<\/p>\n\n\n\n
@include ms-font-l;<\/p>\n\n\n\n
@include ms-fontColor-white;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.button {<\/p>\n\n\n\n
\/\/ Our button<\/p>\n\n\n\n
text-decoration: none;<\/p>\n\n\n\n
height: 32px;<\/p>\n\n\n\n
\/\/ Primary Button<\/p>\n\n\n\n
min-width: 80px;<\/p>\n\n\n\n
background-color: $ms-color-themePrimary;<\/p>\n\n\n\n
border-color: $ms-color-themePrimary;<\/p>\n\n\n\n
color: $ms-color-white;<\/p>\n\n\n\n
\/\/ Basic Button<\/p>\n\n\n\n
outline: transparent;<\/p>\n\n\n\n
position: relative;<\/p>\n\n\n\n
font-family: “Segoe UI WestEuropean”,”Segoe UI”,-apple-system,BlinkMacSystemFont,Roboto,”Helvetica Neue”,sans-serif;<\/p>\n\n\n\n
-webkit-font-smoothing: antialiased;<\/p>\n\n\n\n
font-size: $ms-font-size-m;<\/p>\n\n\n\n
font-weight: $ms-font-weight-regular;<\/p>\n\n\n\n
border-width: 0;<\/p>\n\n\n\n
text-align: center;<\/p>\n\n\n\n
cursor: pointer;<\/p>\n\n\n\n
display: inline-block;<\/p>\n\n\n\n
padding: 0 16px;<\/p>\n\n\n\n
.label {<\/p>\n\n\n\n
font-weight: $ms-font-weight-semibold;<\/p>\n\n\n\n
font-size: $ms-font-size-m;<\/p>\n\n\n\n
height: 32px;<\/p>\n\n\n\n
line-height: 32px;<\/p>\n\n\n\n
margin: 0 4px;<\/p>\n\n\n\n
vertical-align: top;<\/p>\n\n\n\n
display: inline-block;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.list {<\/p>\n\n\n\n
color: #333333;<\/p>\n\n\n\n
font-family: ‘Segoe UI Regular WestEuropean’, ‘Segoe UI’, Tahoma, Arial, sans-serif;<\/p>\n\n\n\n
font-size: 14px;<\/p>\n\n\n\n
font-weight: normal;<\/p>\n\n\n\n
box-sizing: border-box;<\/p>\n\n\n\n
background-color: #ffffff;<\/p>\n\n\n\n
margin: 10;<\/p>\n\n\n\n
padding: 10;<\/p>\n\n\n\n
line-height: 50px;<\/p>\n\n\n\n
list-style-type: none;<\/p>\n\n\n\n
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.listItem {<\/p>\n\n\n\n
color: #333333;<\/p>\n\n\n\n
vertical-align: center;<\/p>\n\n\n\n
font-family: ‘Segoe UI Regular WestEuropean’, ‘Segoe UI’, Tahoma, Arial, sans-serif;<\/p>\n\n\n\n
font-size: 14px;<\/p>\n\n\n\n
font-weight: normal;<\/p>\n\n\n\n
box-sizing: border-box;<\/p>\n\n\n\n
margin: 0;<\/p>\n\n\n\n
padding: 0;<\/p>\n\n\n\n
background-color: #ffffff;<\/p>\n\n\n\n
box-shadow: none;<\/p>\n\n\n\n
*zoom: 1;<\/p>\n\n\n\n
padding: 9px 28px 3px;<\/p>\n\n\n\n
position: relative;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
}<\/p>\n\n\n\n
Step-D:(Add the webpart): <\/strong><\/p>\n\n\n\n
After\nfollowing the above steps save all the files. In command prompt run the command\n\u201cgulp serve\u201d<\/strong>. The browser will open automatically and by clicking on the\nplus sign<\/strong> you can add the webpart DynamicWP. (Refer image-7).<\/strong><\/p>\n\n\n\n
Image:7<\/strong><\/p>\n\n\n\n
![\"\"](\"https:\/\/www.softreetechnology.com\/wp-content\/uploads\/2021\/02\/7.png\")
<\/figure>\n\n\n\nThe\nfinal webpart will appear as below image. (Refer image-8).<\/strong><\/p>\n\n\n\n
Image:8<\/strong><\/p>\n\n\n\n
![\"\"](\"https:\/\/www.softreetechnology.com\/wp-content\/uploads\/2021\/02\/8.png\")
<\/figure>\n\n\n\nKeywords:<\/span><\/strong><\/p>\n\n\n\n
1-Create A Modern Web Part which will retrieve the Lists and Documents using SPFX.
2-Retrieve lists and Documents Title using SPFX.
3-How to retrieve lists and documents Title information within a modern Web Part.<\/p>\n","protected":false},"excerpt":{"rendered":"In this Blog, we are going to discuss about 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 & retrieves the name of all custom list and documents. Let us get started \u2026 Step-A:(Creation of Webpart): Open Command Prompt. Go to […]<\/p>\n","protected":false},"author":1,"featured_media":6415,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[43],"tags":[],"class_list":["post-6357","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sharepoint"],"yoast_head":"\n
Create A Webpart Which will retrieve the List and Document using SPFx - Softree Technology<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/softreetechnology.com\/blog\/sharepoint\/create-a-webpart-which-will-retrieve-the-list-and-document-using-spfx\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create A Webpart Which will retrieve the List and Document using SPFx - Softree Technology\" \/>\n<meta property=\"og:description\" content=\"In this Blog, we are going to discuss about 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 & retrieves the name of all custom list and documents. Let us get started \u2026 Step-A:(Creation of Webpart): Open Command Prompt. Go to […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/softreetechnology.com\/blog\/sharepoint\/create-a-webpart-which-will-retrieve-the-list-and-document-using-spfx\/\" \/>\n<meta property=\"og:site_name\" content=\"Softree Technology\" \/>\n<meta property=\"article:published_time\" content=\"2021-02-03T07:08:03+00:00\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Create A Webpart Which will retrieve the List and Document using SPFx - Softree Technology","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/softreetechnology.com\/blog\/sharepoint\/create-a-webpart-which-will-retrieve-the-list-and-document-using-spfx\/","og_locale":"en_US","og_type":"article","og_title":"Create A Webpart Which will retrieve the List and Document using SPFx - Softree Technology","og_description":"In this Blog, we are going to discuss about 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 & retrieves the name of all custom list and documents. Let us get started \u2026 Step-A:(Creation of Webpart): Open Command Prompt. Go to […]","og_url":"https:\/\/softreetechnology.com\/blog\/sharepoint\/create-a-webpart-which-will-retrieve-the-list-and-document-using-spfx\/","og_site_name":"Softree Technology","article_published_time":"2021-02-03T07:08:03+00:00","author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/softreetechnology.com\/blog\/sharepoint\/create-a-webpart-which-will-retrieve-the-list-and-document-using-spfx\/#article","isPartOf":{"@id":"https:\/\/softreetechnology.com\/blog\/sharepoint\/create-a-webpart-which-will-retrieve-the-list-and-document-using-spfx\/"},"author":{"name":"admin","@id":"https:\/\/softreetechnology.com\/blog\/#\/schema\/person\/98740297642f06debccdcee2de84086b"},"headline":"Create A Webpart Which will retrieve the List and Document using SPFx","datePublished":"2021-02-03T07:08:03+00:00","mainEntityOfPage":{"@id":"https:\/\/softreetechnology.com\/blog\/sharepoint\/create-a-webpart-which-will-retrieve-the-list-and-document-using-spfx\/"},"wordCount":2852,"commentCount":0,"publisher":{"@id":"https:\/\/softreetechnology.com\/blog\/#organization"},"image":{"@id":"https:\/\/softreetechnology.com\/blog\/sharepoint\/create-a-webpart-which-will-retrieve-the-list-and-document-using-spfx\/#primaryimage"},"thumbnailUrl":"","articleSection":["SharePoint"],"inLanguage":"en","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/softreetechnology.com\/blog\/sharepoint\/create-a-webpart-which-will-retrieve-the-list-and-document-using-spfx\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/softreetechnology.com\/blog\/sharepoint\/create-a-webpart-which-will-retrieve-the-list-and-document-using-spfx\/","url":"https:\/\/softreetechnology.com\/blog\/sharepoint\/create-a-webpart-which-will-retrieve-the-list-and-document-using-spfx\/","name":"Create A Webpart Which will retrieve the List and Document using SPFx - Softree Technology","isPartOf":{"@id":"https:\/\/softreetechnology.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/softreetechnology.com\/blog\/sharepoint\/create-a-webpart-which-will-retrieve-the-list-and-document-using-spfx\/#primaryimage"},"image":{"@id":"https:\/\/softreetechnology.com\/blog\/sharepoint\/create-a-webpart-which-will-retrieve-the-list-and-document-using-spfx\/#primaryimage"},"thumbnailUrl":"","datePublished":"2021-02-03T07:08:03+00:00","breadcrumb":{"@id":"https:\/\/softreetechnology.com\/blog\/sharepoint\/create-a-webpart-which-will-retrieve-the-list-and-document-using-spfx\/#breadcrumb"},"inLanguage":"en","potentialAction":[{"@type":"ReadAction","target":["https:\/\/softreetechnology.com\/blog\/sharepoint\/create-a-webpart-which-will-retrieve-the-list-and-document-using-spfx\/"]}]},{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/softreetechnology.com\/blog\/sharepoint\/create-a-webpart-which-will-retrieve-the-list-and-document-using-spfx\/#primaryimage","url":"","contentUrl":""},{"@type":"BreadcrumbList","@id":"https:\/\/softreetechnology.com\/blog\/sharepoint\/create-a-webpart-which-will-retrieve-the-list-and-document-using-spfx\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/softreetechnology.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Create A Webpart Which will retrieve the List and Document using SPFx"}]},{"@type":"WebSite","@id":"https:\/\/softreetechnology.com\/blog\/#website","url":"https:\/\/softreetechnology.com\/blog\/","name":"Softree Technology","description":"Celebrating 10+ Years in SharePoint Consulting !","publisher":{"@id":"https:\/\/softreetechnology.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/softreetechnology.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en"},{"@type":"Organization","@id":"https:\/\/softreetechnology.com\/blog\/#organization","name":"Softree Technology","url":"https:\/\/softreetechnology.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/softreetechnology.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2023\/03\/cropped-white-logo-soft.png","contentUrl":"https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2023\/03\/cropped-white-logo-soft.png","width":844,"height":230,"caption":"Softree Technology"},"image":{"@id":"https:\/\/softreetechnology.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/softreetechnology.com\/blog\/#\/schema\/person\/98740297642f06debccdcee2de84086b","name":"admin","image":{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/softreetechnology.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6fc78c8a7aa3fb0bf43c3b9a2e3962d7?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6fc78c8a7aa3fb0bf43c3b9a2e3962d7?s=96&d=mm&r=g","caption":"admin"},"sameAs":["https:\/\/softreeconsulting.com"],"url":"https:\/\/softreetechnology.com\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/posts\/6357","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/comments?post=6357"}],"version-history":[{"count":0,"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/posts\/6357\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/media?parent=6357"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/categories?post=6357"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/tags?post=6357"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- In \u201c<\/strong>DynamicWpWebPart.module.scss\u201d<\/strong> replace the below code.<\/li><\/ul>\n\n\n\n
- In \u201cen-us.js<\/strong>\u201d replace the below code.<\/li><\/ul>\n\n\n\n
- In \u201cmystrings.d.ts<\/strong>\u201d replace the below code.<\/li><\/ul>\n\n\n\n
- In \u201cGetList.ts<\/strong>\u201d add the below code.<\/li><\/ul>\n\n\n\n
- \u201cmd Webpart<\/strong>\u201d<\/li><\/ul>\n\n\n\n