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………

Dynamic Filters in SharePoint Framework- React Component

Microsoft SharePoint framework with all its limitation, but the awesome framework for SP developer. Recently I encounter a bit different requirement on SharePoint framework. To filter data of SP List using react-Switch and textbox. The code is uploaded to the Git hub Link.

To Learn about reactJs and reactes6 use this Link – Learn React Js es6 Link

I used Sharepoint rest API and react-switch to filter data on the list.


SharePoint Framework Switch Webpart

(1) Create project using yo @microsoft/SharePoint

(2) Create We part with react extension (by doing this it will create react as component)

(3) Pass SPHttpclient and Page URL as props to the component class.

(4) We will use Rest Call to List data

happy sharing…..

Office 365 New features: MyAnalytics – Trends and Your time investments

We office 365 with another intelligent feature with the name MyAnalytics which seems very impressive. It is free available with E5 subscription however for other we have to purchase.

MyAnalytics uses data from Office 365 to help people across your organization understand how they spend their time and discover opportunities to work smarter.

All data surfaced in MyAnalytics is private and available only to the end user.

The new “Trends” chart gives users a visual overview of how their work habits have changed over time. The “Your time investments” chart provides a network map that helps users visualize and prioritize their relationships.


Trends: find long-term trends in your work habits


Your time investments: visualize and strengthen your network

MyAnalytics now visualizes your network so that you can identify missing links, improve your relationships, and prioritize the time you spend with co-workers.


Additional Information – Portal Office



Remove-PnPUserFromGroup -SharePoint Online (PnP Power Shell)

SharePoint/PnP-PowerShell has provide a great efforts to minimize code and increase productivity in SharePoint Online Development.

Recently we have to remove bulk amount of user from SharePoint Group. We decided to go with pnp power shell script to do it. As per the document Link – Remove User From Group below is the code.

Remove-PnPUserFromGroup -LoginName <String>
                        -Identity <GroupPipeBind>
                        [-Web <WebPipeBind>]
PS:> Remove-PnPUserFromGroup -LoginName user@company.com -GroupName 'Marketing Site Members'

But above code didn't work. 

Actually we have to provide the -LoginName string like "i:0#.f|membership|user@contoso.com"
and its work.Below is the working script.
Remove-PnPUserFromGroup -LoginName "i:0#.f|membership|abdul.aziz@contoso.com" -GroupName 'Document'