Regarding the SPFx webpart to extract list items from specific view in list

Occasional Contributor

Hi there,

I refer to the document from <https://wowsomuch.com/sharepoint/pnp-js-caml-query/>. When there are 3000 List items in specific view of List, the performance is not good (Low Performance). Does anyone have any idea on it?? or other workaround to increase the performance. Thanks

 

private async _getListView(): Promise<void>
{
// https://wowsomuch.com/sharepoint/pnp-js-caml-query/
let listName = "Year"; //The display name of the sharepoint list.
let viewName = "2020_21"; //The View Name
let html: string = `<H2>` + "Sample - GetItemsByViewQuery with CAML" + `</H2>`;

this._getViewQueryForList(listName,viewName).then((res:any) => {
this._getItemsByViewQuery(listName,res).then((items:ISPListItem[])=>{
items.forEach((item:ISPListItem) => {
html += item.Title + ", " + item.ShowTimeTitle + ", " + item.DivisionColorCode + ", " +
item.DivisionHoverColor + ", " + item.YearColorCode + `<br/>`;
this.domElement.innerHTML = html;
});
})
}).catch(console.error);
}

//First method that retrieves the View Query
private async _getViewQueryForList(listName:string,viewName:string):Promise<any> {
let listViewData = "";
if(listName && viewName){
return sp.web.lists.getByTitle(listName).views.getByTitle(viewName).select("ViewQuery").get().then(v => {
return v.ViewQuery;
});
} else {
console.log('Data insufficient!');
listViewData = "Error";
}
}

//Second method that retrieves the View data based on the View Query and List name
private async _getItemsByViewQuery(listName:string, query:string):Promise<any> {
const xml = '<View><Query>' + query + '</Query></View>';
return sp.web.lists.getByTitle(listName).getItemsByCAMLQuery({'ViewXml':xml}).then((res:SPHttpClientResponse) => {
return res;
})
}

 

0 Replies