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

 

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>]
i.e.
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'