add a user search box to a SharePoint online webpage

%3CLINGO-SUB%20id%3D%22lingo-sub-2282079%22%20slang%3D%22en-US%22%3Eadd%20a%20user%20search%20box%20to%20a%20SharePoint%20online%20webpage%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2282079%22%20slang%3D%22en-US%22%3E%3CP%3EHi%20All%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIs%20there%20a%20way%20I%20can%20add%20a%20user%20search%20box%20to%20a%20modern%20SharePoint%20online%20webpage%20so%20a%20user%20can%20search%20for%20another%20user%20within%20the%20company%3F%20For%20example%2C%20I%20want%20the%20details%20of%20a%20user%20with%20the%20surname%20Smith.%20The%20search%20results%20list%20all%20the%20members%20of%20staff%20with%20the%20surname%20Smith%20and%20I%20just%20select%20the%20correct%20user.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20hope%20you%20can%20help%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks%3C%2FP%3E%3CP%3ECourtney%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-2282079%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3ESharePoint%20Online%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2282399%22%20slang%3D%22en-US%22%3ERe%3A%20add%20a%20user%20search%20box%20to%20a%20SharePoint%20online%20webpage%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2282399%22%20slang%3D%22en-US%22%3E%3CP%3E...%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F373269%22%20target%3D%22_blank%22%3E%40ganeshsanap%3C%2FA%3E%26nbsp%3Bor%20you%20can%20build%20one%20in%20Power%20Apps.%20That%20can%20then%20be%20added%20as%20a%20Microsoft%20Power%20Apps%20webpart%20to%20your%20SharePoint%20page.%20On%20my%20one%20below%20the%20user%20starts%20entering%20a%20name%2C%20location%2C%20job%20or%20team%20and%20it%20filters%20the%20list%20as%20you%20type%3A%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%22SearchStaff.png%22%20style%3D%22width%3A%20914px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F274947i6B24F38DE0017DC3%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22SearchStaff.png%22%20alt%3D%22SearchStaff.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ERob%3CBR%20%2F%3ELos%20Gallardos%3CBR%20%2F%3E%3CFONT%20size%3D%222%22%20color%3D%22%23006400%22%3EMicrosoft%20Power%20Automate%20Community%20Super%20User%3C%2FFONT%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2282388%22%20slang%3D%22en-US%22%3ERe%3A%20add%20a%20user%20search%20box%20to%20a%20SharePoint%20online%20webpage%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2282388%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F125152%22%20target%3D%22_blank%22%3E%40CEStar321%3C%2FA%3E%26nbsp%3BThere%20is%20no%20SharePoint%20out%20of%20the%20box%20web%20part%20for%20people%20search.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ESo%2C%20you%20will%20need%20custom%20SPFx%20web%20part%20for%20your%20requirements.%26nbsp%3BCheck%20below%20SPFx%20samples%20created%20by%20community%20members.%20You%20can%20use%20these%20web%20parts%20as%20it%20is%20if%20it%20fulfills%20your%20requirements%20OR%20you%20can%20modify%20them%20as%20per%20your%20requirements%20after%20downloading.%3C%2FP%3E%3COL%3E%3CLI%3E%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmaster%2Fsamples%2Freact-msgraph-peoplesearch%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3EMicrosoft%20Graph%20People%20Search%3C%2FA%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E-%20This%20web%20part%20uses%20Microsoft%20Graph%20AI%20to%20get%20the%20user%20details.%20You%20can%20also%20filter%20the%20results%20using%20search%20query%20(For%20example%20to%20limit%20the%20results%20to%20particular%20department).%3C%2FLI%3E%3CLI%3E%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmaster%2Fsamples%2Freact-people-directory%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3EPeople%20Directory%3C%2FA%3E%3C%2FLI%3E%3CLI%3E%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-starter-kit%2Fblob%2Fmaster%2Fdocumentation%2Fcomponents%2Fwp-people-directory.md%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3EPeople%20Directory%20web%20part%3C%2FA%3E%26nbsp%3B%3C%2FLI%3E%3C%2FOL%3E%3CHR%20%2F%3E%3CP%3EPlease%20click%26nbsp%3B%3CSTRONG%3EMark%20as%20Best%20Response%3C%2FSTRONG%3E%26nbsp%3B%26amp%3B%20%3CSTRONG%3ELike%3C%2FSTRONG%3E%20if%20my%20post%20helped%20you%20to%20solve%20your%20issue.%20This%20will%20help%20others%20to%20find%20the%20correct%20solution%20easily.%20It%20also%20closes%20the%20item.%20If%20the%20post%20was%20useful%20in%20other%20ways%2C%20please%20consider%20giving%20it%20%3CSTRONG%3ELike%3C%2FSTRONG%3E.%3C%2FP%3E%3C%2FLINGO-BODY%3E
Occasional Contributor

Hi All,

 

Is there a way I can add a user search box to a modern SharePoint online webpage so a user can search for another user within the company? For example, I want the details of a user with the surname Smith. The search results list all the members of staff with the surname Smith and I just select the correct user.

 

I hope you can help

 

Thanks

Courtney

2 Replies

@CEStar321 There is no SharePoint out of the box web part for people search.

 

So, you will need custom SPFx web part for your requirements. Check below SPFx samples created by community members. You can use these web parts as it is if it fulfills your requirements OR you can modify them as per your requirements after downloading.

  1. Microsoft Graph People Search - This web part uses Microsoft Graph AI to get the user details. You can also filter the results using search query (For example to limit the results to particular department).
  2. People Directory
  3. People Directory web part 

Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

...@ganeshsanap or you can build one in Power Apps. That can then be added as a Microsoft Power Apps webpart to your SharePoint page. On my one below the user starts entering a name, location, job or team and it filters the list as you type:

SearchStaff.png

 

Rob
Los Gallardos
Microsoft Power Automate Community Super User