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

Employee Directory with SPFX ReactJS Using SharePoint Search Rest Api – Modern Webpart


Employee directory is now become a tea spoon in SharePoint. By using Search with Rest Api and react we can easily integrate in our SharePoint Pages.  Another best advantage is we can re-use the react component as well as we can use it on the classic site template.

Screen shots are mentioned below and the Code is on the Git Hub.

This component can fetch the user profile and get the department of login user and query to Search People rest api.

 

blog_01

 

 

1. Open Powershell and write the command to Create a SharePoint Framework project. yo @microsoft/sharePoint.

SharePoint Framework - Npm Package Manager
SharePoint Framework – Npm Package Manager

2. Options and settings are in the screen shot. i.e. Choose webpart, name, framework as react to make reuseable component. It will take a while to complete all pre-requisit.

SharePoint Framework - Npm Package Manager
SharePoint Framework – Npm Package Manager

3. Install Jquery through npm install jquery –save command

4. Instal react-radio-group throug npm install react-radio-group –save command
5. Open the solution in the VS Code Editor by “code .”

6. Go to the src->components->EmployeeDirectory.tsx file add the code.
a. First we need to add more proerties in the IEmployeeDirectoryProps interface

b. Import Libraries for request, jquery, radio group to be available in the component

b. Import Libraries for request, jquery, radio group to be available in the component

c. Add Constructor

SPFX ES6 Constructor
SPFX ES6 Constructor

d. RequestSeach Method

e. Render Method

Render Methods
Render Methods

f. Adding CSS. Open src->components->EmployeeDirectory.module.css.ts and add the css.

–Happy Sharing………

SharePoint Framework Custom Form- React JS – SPFX – Complex Forms


In this blog I have create a simplest react project with complex form which can save others time to use in the project. Project is uploaded on Git, it is a SharePoint framework web part with react framework. In this project, a forms with DropDown, Datetime picker, Upload File to SharePoint, Input Fields, HtmlTextEdtir,CheckBoxes  which will submit data to SharePoint List using pnp. Below are components

(1) react-select to bind with SharePoint List

(2) react-datetime for Date Time on the Form

(3) react-file-reader to Upload File to SharePoint Document Library

(4) react-checkbox-group for Checkbox in the Form

(5)  sp-pnp-js to Upload file and submit data to List.

(6) react-medium-editor is used for rich textbox in the form.

 

Need to install below external compoenent.

react-file-reader  (for Uploading Files)

react-medium-editor (for Rich Textbox)

react-datetime (for DateTime Calender)

react-checkbox-group (for checkbox group)

Have a look

Upload button will upload the file to the SharePoint document Library, I used pnp framework to upload, which allow us to update metadata easily.

Now code will insert item to SharePoint List on button click.It will upload file to My Docs in the Same site and insert to list with unique Guid, to maintain relationship between List and document library.

 

SharePoint Framework Custom Form- React JS – SPFX – Complex Forms
SharePoint Framework Custom Form- React JS – SPFX – Complex Forms

Installing required libs i.e. jquery, pnpjs, checkbox, react-file-uploader

react-medium-editor
react-medium-editor

 

SharePoint Online – Update – default document mode will soon be 11 (Edge mode)


Display a classic SharePoint Online site in Internet Explorer 10 document mode to 11 (Edge mode)

When users browse SharePoint Online sites in Internet Explorer 11, the default document mode will soon be 11 (Edge mode), regardless of whether the site uses the new lists and libraries experience. We’ll no longer force the legacy compatibility mode 10. This will improve the performance and reliability of most pages. However, some custom master pages or custom web parts may contain custom code that relies on the older Internet Explorer 10 document mode.

Check if a site works in Edge document mode

Follow these steps to determine if the customization on a site will work in Edge mode:

  1. Open the site in Internet Explorer 11 and press F12 to open the developer tools.
  2. Select the Emulation tab, and under Document mode, select 11.

Revert site collections to Internet Explorer 10 document mode

If you find that a site collection has a customization that doesn’t work in Edge document mode, you can revert the site collection to Internet Explorer 10 document mode. To do this, you need to use a Microsoft PowerShell script with a CSOM (Client-side object model) wrapper. You must be a global admin in Office 365 to perform this task.

  1. Review the PowerShell execution policies.
  2. Copy the following code and paste it in a text editor such as Notepad.
    ##The first two lines of the script load the CSOM model:
    Add-Type -Path "C:\Users\{username}\downloads\Microsoft.SharePointOnline.CSOM.16.1.5026.1200\lib\net45\Microsoft.SharePoint.Client.dll"
    Add-Type -Path "C:\Users\{username}\downloads\Microsoft.SharePointOnline.CSOM.16.1.5026.1200\lib\net45\Microsoft.SharePoint.Client.Runtime.dll"
    
    $webUrl = 'https://{domain}.sharepoint.com/[optional path to subweb]'
    
    $username = Read-Host -Prompt "Enter or paste the site collection administrator’s full O365 email, for example, name@domain.onmicrosoft.com" 
    $password = Read-Host -Prompt "Password for $username" -AsSecureString
    
    [Microsoft.SharePoint.Client.ClientContext]$clientContext = New-Object Microsoft.SharePoint.Client.ClientContext($webUrl)
    $clientContext.Credentials = New-Object Microsoft.SharePoint.Client.SharePointOnlineCredentials($username, $password)
    ##To apply script to a site collection:
    	$site = $clientContext.Web; 
    $featureguid = new-object System.Guid "80E47777-D21C-46E0-9139-7C7741EB4B54"site.Features.Add($featureguid, $true, [Microsoft.SharePoint.Client.FeatureDefinitionScope]::None);
  3. Remove the code comment lines (which begin with ##) and save the file as an ANSI-encoded text file with the extension .ps1. For this example, we name the script file “IEMode.ps1.”
  4. Change to the directory where you saved the file.
  5. At the PowerShell command prompt, type:
    ./IEMode.ps1

source : https://support.office.com/en-us/article/Display-a-classic-SharePoint-Online-site-in-Internet-Explorer-10-document-mode-4b4572b7-9223-45ec-8497-557a643da12a?ui=en-US&rs=en-US&ad=US

Summary : Honestly, It will really helpful for people if it was done before, currently most of them are encountered done with branding with their tenants with this tag in their design manger html page 🙂 happy sharing……