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

Office 365 navigation bar – New Feature -Pin apps to the navigation bar


With all improvements and enhancements, another best feature has started to roll out from today in office 365.

The app launcher enables you to navigate across your services and apps in Office 365. we can can also pin up to three apps in navigation bar .

This makes those apps available instantly, from any Office 365 page or app.It will be more beneficial for the admin users.

navigation bar short cut

 

Upload Docs to SharePoint Library & Update Columns using Pnp.js


Microsoft SharePoint Pattern and practices libraries makes it very simple to deal with SharePoint site. Less code and easy to understand. Link to SharePoint PNP-JS-Core.

In this article I will use pnp.js library to upload document and update the other fields in the same item uploaded in SharePoint document library.

(1 ) We need to reference the 4 files to work with pnp.js

/SiteAssets/4.0.5/es6-promise.js
/SiteAssets/4.0.5/es6-promise.auto.js
/SiteAssets/pnp.js
/SiteAssets/fetch.js

 

(2)I have reference the bootstrap in my page and use bootstrap classes.

Html of upload file, I have attached the link of Html Code in the PDF file, just copy and paste.

(3)  Now Call Simple JS Function UploadFiles() to Upload file and update the fields in the same item uploaded. Copy the below Code in JS File.

function UploadFiles() {
var files = document.getElementById(‘exampleInputFile’).files;
var file = files[0]; //using File Api
if (file!=undefined || file!=null){
$pnp.sp.web.getFolderByServerRelativeUrl(“/Documents”)
.files.add(file.name, file, true)
.then(function (data) {
var RelativeUrls=”/Documents/”+file.name;

//Retrive Document which is uploaded. Start
$pnp.sp.web.getFolderByServerRelativeUrl(RelativeUrls).getItem().then(item => {
//update start Below Call to Doc List will update the Row baseed on Item.ID
$pnp.sp.web.lists.getByTitle(“Documents”).items.getById(item.ID).update({
ColumnName: ‘New Value’
}).then(r => {
alert(file.name + ” upload successfully!”);
});
//update end
}); //Retrive Doc Info End
}); //Upload Document End

}

 

 

Below are the References to pnp js core library to deal with files and update item by id.  PDF file contain the html part.

Links

SharePoint 2013 Search Administration Web Service Application stopped- Stuck


Recently I got stuck with the SharePoint Search Service application. It was deleted earlier from the Farm. But Search Administration Web  Service Application is stuck with stopped status.

Search Service Web application status Stopped
Search Service Web application status Stopped

Solution:
Below Power shell Command will successfully remove Search remaining stuff form the Farm. with all the web services.
# Add SharePoint cmdlets reference
Add-PSSnapin microsoft.sharepoint.powershell -ErrorAction SilentlyContinue
$SSA = Get-SPEnterpriseSearchServiceApplication
$SSA.Delete()

SharePoint 2016 ‘HTTP 500 Internal Server Error’ while trying to browse to a SharePoint site using Claims-based


I got a chance to Install SharePoint 2016 SharePoint Server 2016 Preview and Configure Single Server Farm (SharePoint Server and another is SQL Server). Every thing went good but Once I launch a web application HTTP 500 Internal Server Error from web application. 

I check the Event Viewer below erorr adding in the Event Viewer.

 

 

Security Token Issuer
Security Token Issuer

Resolution:

I checked the SharePoint web services It was pointing to 15 hive folder. Change it to 16 it works.

Error2

 

Reason for sharing to add in to my thoughts diaries and I hope it may help others.

Note: I checked the 2016 and most of the item are similar to 2013. I will deploy some web part, install workflow manager and initiate some workflows and share my thoughts.