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.





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 Online Establishing a new dedicated page for Site usage – 30 June 17 Update

Site usage is like a dashboard to of any site in the SP Online. How many Visit, How Many new items and all highlighted items, documents show to admin. It is very helpful for the site admin to draw a clear picture for the content and statistics.

Previously these reports show on the site content page, in the modern site in SharePoint and  a site owner would see site usage information at the top of the Site contents page.

Site usage on site content page
Site usage on site content page

Now MS has established a dedicated page for the site usage. They have moved this analytics portion to a dedicated page. The Site contents page maintains focus on access and management of content (lists, libraries, pages, etc.), and provides insights into how your site is being used via this new Site usage page.

Site Usage option to show on dedicated page
Site Usage option to show on dedicated page


his message is associated with Office 365 Roadmap ID 16048.

It ‘ll begin gradually rolling this out in the following days (June 29 17), and the rollout will be completed by the end of July.

What do I need to do to prepare for this change?
There is nothing you need to do to prepare this change. Please click Additional Information to learn more.

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



(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){
.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
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.