Sharepoint Framework Web Part filter list view

Question

I have a new SPFx webpart working on my SPO workbench. I have it reading an internal list, but I want to limit the number of items that show in the web part. Specifically only the latest item. I have a "View" built on the list that limits the number of items to 1 and sorts it by created date so in my old (Classic) site it worked just fine, but now that I have to bulind a SPFx web part to get the design I want I can't get it to accept the views. I am trying this now: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldViewPicker/ and the filed works, but doesn't show my views.

Thoughts?

sudharsan k · Answer

Carchambault&nbsp;what do you mean by the field works. You mean the field is displaying without any views in the web part properties window? if that is the case make sure you pass the correct listid to the field. Also, if you can share some code, it would be helpful for the community to provide a best solution.&nbsp;Hope it helps, please like it or mark it as a solution if it resolves your clarification or issue-Sudharsan K...

carchambault · Answer

Sudharsan K&nbsp;Thank you for your reply!&nbsp;Attached is my code and a screenshot of what is happening. Yes, I do believe I am missing the list ID, but have no idea where in the code it is not passing as the list information is there.&nbsp;&nbsp;import&nbsp;{&nbsp;Version&nbsp;}&nbsp;from&nbsp;'@microsoft/sp-core-library';import&nbsp;{&nbsp;IPropertyPaneConfiguration&nbsp;}&nbsp;from&nbsp;'@microsoft/sp-property-pane';import&nbsp;{&nbsp;BaseClientSideWebPart&nbsp;}&nbsp;from&nbsp;'@microsoft/sp-webpart-base';import&nbsp;{&nbsp;escape&nbsp;}&nbsp;from&nbsp;'@microsoft/sp-lodash-subset';import&nbsp;styles&nbsp;from&nbsp;'./CeoCornerWebPart.module.scss';import&nbsp;*&nbsp;as&nbsp;strings&nbsp;from&nbsp;'CeoCornerWebPartStrings';import&nbsp;{&nbsp;SPHttpClient,&nbsp;SPHttpClientResponse&nbsp;}&nbsp;from&nbsp;'@microsoft/sp-http';import&nbsp;{&nbsp;Environment,&nbsp;EnvironmentType&nbsp;}&nbsp;from&nbsp;'@microsoft/sp-core-library';import&nbsp;{&nbsp;PropertyFieldViewPicker,&nbsp;PropertyFieldViewPickerOrderBy&nbsp;}&nbsp;from&nbsp;'@pnp/spfx-property-controls/lib/PropertyFieldViewPicker';export&nbsp;interface&nbsp;ICeoCornerWebPartProps&nbsp;{&nbsp;&nbsp;list:&nbsp;string;&nbsp;&nbsp;views:&nbsp;string&nbsp;|&nbsp;string[];}export&nbsp;interface&nbsp;ISPLists&nbsp;{&nbsp;&nbsp;value:&nbsp;ISPList[];}export&nbsp;interface&nbsp;ISPList&nbsp;{&nbsp;&nbsp;Title:&nbsp;string;}export&nbsp;default&nbsp;class&nbsp;CeoCornerWebPart&nbsp;extends&nbsp;BaseClientSideWebPart&lt;ICeoCornerWebPartProps&gt;&nbsp;{&nbsp;&nbsp;private&nbsp;_getListData():&nbsp;Promise&lt;ISPLists&gt;&nbsp;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl&nbsp;+&nbsp;"https://hcfhawaii.sharepoint.com/sites/Hookahi5/Lists/CEOCorner/Homepage.aspx",SPHttpClient.configurations.v1)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.then((response:&nbsp;SPHttpClientResponse)&nbsp;=&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;response.json();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;private&nbsp;_renderListAsync():&nbsp;void&nbsp;&nbsp;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(Environment.type&nbsp;==&nbsp;EnvironmentType.SharePoint&nbsp;||&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Environment.type&nbsp;==&nbsp;EnvironmentType.ClassicSharePoint)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this._getListData()&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.then((response)&nbsp;=&gt;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this._renderList(response.value);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});}&nbsp;}&nbsp;&nbsp;&nbsp;private&nbsp;_renderList(items:&nbsp;ISPList[]):&nbsp;void&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;html:&nbsp;string&nbsp;=&nbsp;'&lt;div&gt;';&nbsp;&nbsp;&nbsp;&nbsp;items.forEach((item:&nbsp;ISPList)&nbsp;=&gt;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;html&nbsp;+=&nbsp;`&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;${item.Title}&lt;/div&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`;&nbsp;&nbsp;&nbsp;&nbsp;});&nbsp;&nbsp;&nbsp;&nbsp;html&nbsp;+=&nbsp;'&lt;/div&gt;';&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;listContainer:&nbsp;Element&nbsp;=&nbsp;this.domElement.querySelector('#spListContainer');&nbsp;&nbsp;&nbsp;&nbsp;listContainer.innerHTML&nbsp;=&nbsp;html;&nbsp;&nbsp;}&nbsp;&nbsp;public&nbsp;render():&nbsp;void&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;this.domElement.innerHTML&nbsp;=&nbsp;`&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id="${&nbsp;styles.ceocornerheader&nbsp;}"&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id="micahpic"&gt;&lt;img&nbsp;src="https://hcfhawaii.sharepoint.com/sites/workunits/PublishingImages/2020%20Homepage/Micah-Kane.png"&gt;&lt;/div&gt;&lt;div&nbsp;id="ceoupdateheader-text"&gt;&lt;h1&gt;The&nbsp;CEO&nbsp;Corner&lt;/h1&gt;&lt;p&gt;The&nbsp;latest&nbsp;updates&nbsp;for&nbsp;this&nbsp;week&nbsp;from&nbsp;Micah.&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id="spListContainer"&nbsp;/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;`;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this._renderListAsync();&nbsp;&nbsp;}&nbsp;&nbsp;protected&nbsp;get&nbsp;dataVersion():&nbsp;Version&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;Version.parse('1.0');&nbsp;&nbsp;}&nbsp;&nbsp;protected&nbsp;getPropertyPaneConfiguration():&nbsp;IPropertyPaneConfiguration&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pages:&nbsp;[&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;groups:&nbsp;[&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;groupFields:&nbsp;[&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;PropertyFieldViewPicker('view',&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;label:&nbsp;'Select&nbsp;a&nbsp;view',&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;listId:&nbsp;this.properties.list,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;selectedView:&nbsp;this.properties.views,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;orderBy:&nbsp;PropertyFieldViewPickerOrderBy.Title,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;disabled:&nbsp;false,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onPropertyChange:&nbsp;this.onPropertyPaneFieldChanged.bind(this),&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;properties:&nbsp;this.properties,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context:&nbsp;this.context,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onGetErrorMessage:&nbsp;null,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;deferredValidationTime:&nbsp;0,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key:&nbsp;'viewPickerFieldId'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]&nbsp;&nbsp;&nbsp;&nbsp;};&nbsp;&nbsp;}}&nbsp;&nbsp;

sudharsan k · Answer

Hi&nbsp;Carchambault,You are using SPFx web part with&nbsp;No Javascript Framework. The API URL you passed to retrieve the data is incorrect and please see the working copy of the code below. My list name is&nbsp;Areaprivate _getListData(): Promise&lt;any&gt; {
		let apiUrl: string = this.context.pageContext.web.absoluteUrl + `/_api/lists/getbytitle('Area')/items`;
		return new Promise((res, rej) =&gt; {
			this.context.spHttpClient.get(apiUrl, SPHttpClient.configurations.v1)
				.then((respose: SPHttpClientResponse) =&gt; {
					res(respose.json());
				});
		});
	}&nbsp;Instead of using the default&nbsp;SPHttpClient, I recommend you to take a look at the PnP library. Below is the sample code using PnP library to fetch the same list data.private _getListDataUsingPnP() {
		sp.web.lists.getByTitle('Area').items.select('Title').get()
			.then(result =&gt; {
				console.log("Using PnPJs: ", result);
			});
	}Using PnP library, the code would be clean and easy to read and understand by all the team members and there are more helpers available like select, filter, expand which I think is complicated implementing in the normal&nbsp;SPHttpClient option.Both the method returned the same resultsTake a look at it and let me know if you have any clarifications.Happy Coding...&nbsp;Hope it helps, please like it or mark it as a solution if it resolves your clarification or issue-Sudharsan K...

carchambault · Answer

Sudharsan K&nbsp;Thank you again. This is beginning to make more sense. Here is the copy of my current code. I think I am missing an authentication now? When I add your sample code I get an error on the&nbsp;sp.web.lists. Do I need to add this&nbsp;https://pnp.github.io/pnpjs/authentication/client-spfx/#connect-to-sharepoint-as-current-user&nbsp;to authenticate?&nbsp;&nbsp;import&nbsp;{&nbsp;Version&nbsp;}&nbsp;from&nbsp;'@microsoft/sp-core-library';import&nbsp;{&nbsp;IPropertyPaneConfiguration&nbsp;}&nbsp;from&nbsp;'@microsoft/sp-property-pane';import&nbsp;{&nbsp;BaseClientSideWebPart&nbsp;}&nbsp;from&nbsp;'@microsoft/sp-webpart-base';import&nbsp;{&nbsp;escape&nbsp;}&nbsp;from&nbsp;'@microsoft/sp-lodash-subset';import&nbsp;{&nbsp;PropertyFieldViewPicker,&nbsp;PropertyFieldViewPickerOrderBy&nbsp;}&nbsp;from&nbsp;'@pnp/spfx-property-controls/lib/PropertyFieldViewPicker';import&nbsp;styles&nbsp;from&nbsp;'./Ceo2WebPart.module.scss';import&nbsp;*&nbsp;as&nbsp;strings&nbsp;from&nbsp;'Ceo2WebPartStrings';export&nbsp;interface&nbsp;ICeo2WebPartProps&nbsp;{&nbsp;&nbsp;description:&nbsp;string;&nbsp;&nbsp;lists:&nbsp;string;&nbsp;&nbsp;views:&nbsp;string;&nbsp;}export&nbsp;default&nbsp;class&nbsp;Ceo2WebPart&nbsp;extends&nbsp;BaseClientSideWebPart&lt;ICeo2WebPartProps&gt;&nbsp;{&nbsp;&nbsp;private&nbsp;_getListDataUsingPnP()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;sp.web.lists.getByTitle('CEOCornera').items.select('Title').get()&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.then(result&nbsp;=&gt;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log("Using&nbsp;PnPJs:&nbsp;",&nbsp;result);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});&nbsp;&nbsp;}&nbsp;&nbsp;public&nbsp;render():&nbsp;void&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;this.domElement.innerHTML&nbsp;=&nbsp;`&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class="${&nbsp;styles.ceo2&nbsp;}"&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class="${&nbsp;styles.container&nbsp;}"&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class="${&nbsp;styles.row&nbsp;}"&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class="${&nbsp;styles.column&nbsp;}"&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span&nbsp;class="${&nbsp;styles.title&nbsp;}"&gt;Welcome&nbsp;to&nbsp;SharePoint!&lt;/span&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&nbsp;class="${&nbsp;styles.subTitle&nbsp;}"&gt;Customize&nbsp;SharePoint&nbsp;experiences&nbsp;using&nbsp;Web&nbsp;Parts.&lt;/p&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&nbsp;class="${&nbsp;styles.description&nbsp;}"&gt;${escape(this.properties.description)}&lt;/p&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a&nbsp;href="https://aka.ms/spfx"&nbsp;class="${&nbsp;styles.button&nbsp;}"&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span&nbsp;class="${&nbsp;styles.label&nbsp;}"&gt;Learn&nbsp;more&lt;/span&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/a&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;`;&nbsp;&nbsp;}&nbsp;&nbsp;protected&nbsp;get&nbsp;dataVersion():&nbsp;Version&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;Version.parse('1.0');&nbsp;&nbsp;}&nbsp;&nbsp;protected&nbsp;getPropertyPaneConfiguration():&nbsp;IPropertyPaneConfiguration&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pages:&nbsp;[&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;header:&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description:&nbsp;strings.PropertyPaneDescription&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;groups:&nbsp;[&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;groupName:&nbsp;strings.BasicGroupName,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;groupFields:&nbsp;[&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;PropertyFieldViewPicker('views',&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;label:&nbsp;'Select&nbsp;a&nbsp;view',&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;listId:&nbsp;this.properties.lists,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;selectedView:&nbsp;this.properties.views,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;orderBy:&nbsp;PropertyFieldViewPickerOrderBy.Title,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;disabled:&nbsp;false,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onPropertyChange:&nbsp;this.onPropertyPaneFieldChanged.bind(this),&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;properties:&nbsp;this.properties,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context:&nbsp;this.context,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onGetErrorMessage:&nbsp;null,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;deferredValidationTime:&nbsp;0,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key:&nbsp;'viewPickerFieldId'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};&nbsp;&nbsp;&nbsp;&nbsp;}}

sudharsan k · Answer

Hi&nbsp;Carchambault&nbsp;I am so sorry that I missed the code that had to be added to the imports before that have you installed the PnP npm package? if not use the below command to install it and add the import statement mentioned below. After that, your code should work without any errors.npm install @pnp/sp --saveimport { sp } from "@pnp/sp";&nbsp;

Forum Discussion

Sharepoint Framework Web Part filter list view

Share

Resources