SharePoint Online Library - React Component with 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[/caption]
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.....
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[/caption]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.....
Comments
Post a Comment