Sp-starter-kit: Fixing People Directory Web Part search results

[ShowMeTheGita]

Category

• [x] Question

Question

This seems to be working as intended as seen in the dedicated page for this web part, but the results that output from the search query to search for people are very strange for an end-user.
I've deployed the starter kit to our tenant and wanted to make a local change so that the clicking on specific letters such as A or B only retrieve people whose names start with A or B (or at least show those results first, before checking last names). And also so that searching "Jo" for example, first shows everyone whose first name starts with, and or has "Jo" in their first name, only showing last name after.

I'm not quite sure where to look for for this solution and if/or I need to do some config change afterwards or re-build with npm. Would it be possible for someone to provide an example?

Thank you, and amazing work with the kit!

[msftbot[bot]]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[bcameron1231]

You will need to update the search query from within the PeopleDirectory component. https://github.com/pnp/sp-starter-kit/blob/master/source/react-people-directory/src/webparts/peopleDirectory/components/PeopleDirectory/PeopleDirectory.tsx

Check out line 98, the solution currently works by searching against the LastName. Sounds like you want to update this part to search based on FirstName. Subsequently, you could search against both. The People DIrectory uses the Search API and KQL. SO you can update the KQL to match how you want to search.

Here is some documentation on the KQL functionality. https://docs.microsoft.com/en-us/sharepoint/dev/general-development/keyword-query-language-kql-syntax-reference

I hope this helps

[ShowMeTheGita]

Found it. Will look into it. After modifying is it necessary to rebuild the project before redeploying to our tenant? I'm new to this, sorry for the newbie question. Thank you for the explanation!

[bcameron1231]

Yup! Re-bundle and package the solution, upload to your app catalog and you will be all set.

[ShowMeTheGita]

Thanks Cameron! Would it be too much to ask how exactly to re-bundle and package this specific solution and then uploading it? I'm assuming the upload part will be done through the admin center, but I haven't had much contact with React so I'm not quite sure what to do now. I've been testing the new query on-browser and it's working how I intended it, just changed LastName to FirstName. But unsure what to do with the source code now 😞

[bcameron1231]

You will need to run the following commands and upload the .sppkg file to your App Catalog. I have linked the tutorial for SPFx on how to do this.

gulp bundle --ship
gulp package-solution --ship

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/hosting-webpart-from-office-365-cdn

[ShowMeTheGita]

Fantastic I couldn't ask for better. Thank you once again, I'm closing the issue with this comment 😃