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

Advertisements

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