SharePoint Online Document Library Information Dynamically – React n Rest Api


I have come out with one requirement which can tell the number files in the document library. Regardless the number of document in the library. I have used React with rest api to get all the folder, and document type count with some ready made components on react. I would like others input to make it more optimize and speedy.

Web part takes document library name from the property name dynamically.

 

Code is already uploaded on Git Hub.

Resultant screen shot of our solution will be like below.

 

 

 

SP Document Library Information
SP Document Library Information

Step 1.  yo @microsoft/sharePoint
Step 2. Choose SharePoint Online only (latest)
Step 3. Use the current folder
Step 4. Do you want to allow the tenant admin the choice of being able to deploy the solution to all sites immediately without running any feature deployment or adding
apps in sites? (y/N) Choose y
Step 5. Select WebPart
Step 6.What is your Web part name?
Step 7 What is your Web part description?
Step 8. Which framework would you like to use? Chooe React
wait around 3 minutes npm to make necessary files………

Install Jquery and react-countup
i.e. npm install jquery –save Similary
npm install react-countup –save

Go to the component tsx file inside src – > webpart – > yourwebparname.tsx

Go to the interface your webpart calss is inheriting….. and update with below.

import { SPHttpClient } from ‘@microsoft/sp-http’;

export interface IWpDocumentLibInfoProps {
spHttpClient: SPHttpClient;
TotalItem:string;
TotalFolders:string;
TotalFiles:string;
description: string;
siteurl:string;
ItemStart:number;
ItemEnd:number;
LoopForList:number;
FileArray:Array<string>;
DocFiles:number;
XlsFiles:number;
PDFFiles:number;
P3Files:number;
Photos:number;
Drawing:number;
TextFiles:number;
MISCFiles:number;
DocumentLibraryName:string;
}

Now come back to tsx file and add the below function one by one.

import CountUp from ‘react-countup’;
import * as jquery from ‘jquery’;

1. Constructor

2. Add below code : It will run during initializing and bring the cound of the document library using rest.
componentDidMount() {
this._GetListTotalCount();
}

private _GetListTotalCount(): void {
var reactHandler = this;
var NewISiteUrl = this.props.siteurl;
var NewSiteUrl = NewISiteUrl.replace(“SitePages”, “”);
if (this.state.DocumentLibraryName==””){return;}
console.log(NewSiteUrl);
jquery.ajax({
url: `${NewSiteUrl}/_api/web/Lists/getbytitle(‘${this.state.DocumentLibraryName}’)/ItemCount`,
type: “GET”,
headers: { ‘Accept’: ‘application/json; odata=verbose;’ },
success: function (resultData) {
this.setState({ TotalItem: resultData.d.ItemCount })
var number = parseInt(this.state.TotalItem);
var LoopToQuery = number / 4000;
var LooingItemInt = Math.ceil(LoopToQuery)
this.setState({ LoopForList: LooingItemInt });
this.QueryFilesAndFoldersWrapper();
}.bind(this),
error: function (jqXHR, textStatus, errorThrown) {
}

});
}

3.Add this function QueryFilesAndFoldersWrapper # Code is already on the Git Hub

4.QueryITems in Loop because due to 5000 threshold limit we can query rest in chunks of 4999 records.

5. Add the render Method # from git hub.

We can change the Document Library Name from the Property Pane save and refresh.

 

#Kindly download the code and help me to make it more optimize and more usable for others.

#Happy sharing…..

 

 

Advertisements

Get 50000 items from SharePoint List using JS-SharePoint Item 5000 Threshold Issue [Solved] –


My blog will help to load data from SharePoint list regardless of list-view threshold limit . I have been through many forums and even I experienced bit difficulty to load data from list having record greater than limit defined by the SharePoint administrator (threshold limit). I have created a simple JS file with some functions to load data in chunks. i.e. My JS function will automatically take the total count of list and break them in the chunks and iterate them. In the result it will provide the array of items requested by the user.

Global Varaiable
Screen shot is to provide the global variable for our JS File
Initial Method to Call from my js
Initial Method to Call from my js
Internal method of JS File, This methods will take the cound of the List and divide them as 5000 each cycle
Internal method of JS File, This methods will take the cound of the List and divide them as 5000 each cycle

 

 

 

Final Methods will runs once all the data finish loading

Final Methods will runs once all the data finish loading

Just add the attached JS file to your SharePoint Solution and call the below mentioned function. In return once the data get loaded , it will write the desired array to flatArray and update var TransactionComplete = 1; further you can use flatArray with data in your app.
JS File – Click here to Download – Rename PDF to JS

Funciton to call GetListItem(siteurl,listname,columns)

siteurl = http://sitename

listname=testlist

columns=ID,Created,Title,Column1,Column2,Column4,Column5

Result = flatArray as Array

Resultant Screen shot.

ResultArray
ResultArray

 

I hope my little efforts may save time for those who are struggling with SharePoint threshold 5000 issue.