Forum Discussion
Sharepoint Framework Web Part filter list view
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...
Sudharsan K 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
sp.web.lists. Do I need to add this https://pnp.github.io/pnpjs/authentication/client-spfx/#connect-to-sharepoint-as-current-user to authenticate?
import { Version } from '@microsoft/sp-core-library';
import { IPropertyPaneConfiguration } from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import { escape } from '@microsoft/sp-lodash-subset';
import { PropertyFieldViewPicker, PropertyFieldViewPickerOrderBy } from '@pnp/spfx-property-controls/lib/PropertyFieldViewPicker';
import styles from './Ceo2WebPart.module.scss';
import * as strings from 'Ceo2WebPartStrings';
export interface ICeo2WebPartProps {
description: string;
lists: string;
views: string;
}
export default class Ceo2WebPart extends BaseClientSideWebPart<ICeo2WebPartProps> {
private _getListDataUsingPnP() {
sp.web.lists.getByTitle('CEOCornera').items.select('Title').get()
.then(result => {
console.log("Using PnPJs: ", result);
});
}
public render(): void {
this.domElement.innerHTML = `
<div class="${ styles.ceo2 }">
<div class="${ styles.container }">
<div class="${ styles.row }">
<div class="${ styles.column }">
<span class="${ styles.title }">Welcome to SharePoint!</span>
<p class="${ styles.subTitle }">Customize SharePoint experiences using Web Parts.</p>
<p class="${ styles.description }">${escape(this.properties.description)}</p>
<a href="https://aka.ms/spfx" class="${ styles.button }">
<span class="${ styles.label }">Learn more</span>
</a>
</div>
</div>
</div>
</div>`;
}
protected get dataVersion(): Version {
return Version.parse('1.0');
}
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
return {
pages: [
{
header: {
description: strings.PropertyPaneDescription
},
groups: [
{
groupName: strings.BasicGroupName,
groupFields: [
PropertyFieldViewPicker('views', {
label: 'Select a view',
listId: this.properties.lists,
selectedView: this.properties.views,
orderBy: PropertyFieldViewPickerOrderBy.Title,
disabled: false,
onPropertyChange: this.onPropertyPaneFieldChanged.bind(this),
properties: this.properties,
context: this.context,
onGetErrorMessage: null,
deferredValidationTime: 0,
key: 'viewPickerFieldId'
})
]
}
]
}
]
};
}
}
Hi Carchambault
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";