A new version of the Group People SharePoint Group People Web Part was released to display users (only) who are members of a specific SharePoint group.

New version of Group People - v1.1.0

This release includes a lot of new little features to improve the experience and answer a couple of visual needs beside the code improvements.

Update the Web Part name

SharePoint Web Part picker

Anticipating the next version (2.x) based on Microsoft Graph to retrieve more information and include Office 365 groups and AD Security groups, the stable version 1.x was renamed SharePoint Group People rather than Group People.

Manage displayed fields

Web Part properties panel - Manage displayed user information

For more flexibility and to answer more use cases, the displayed fields can be managed directly from the properties panel of the Web Part.

In addition, the number of displayed fields can be extended to three in accordance with the selected size of the pictures.

Manage the size of the personas' pictures

Web Part properties panel - Manage pictures size

Display users picture from the SharePoint user profiles allows to automatically sync the users properties with the Web Part. The UI Fluent Persona control has several properties and among them the size property that enables to change the size of the users pictures.

Rather than listing all available sizes, three of them that seem to be the most relevant ones have been selected:

  • Regular
  • Large
  • ExtraLarge

Hide Web Part if nothing to show

Web Part properties panel - Manage visibility if nothing to show

When a Web Part does not contain content, it is possible to display:

  • The title of the Web Part only
  • A shimmer or a default content
  • A default message in addition to the title to explain to the user that nothing was found
  • Or even hide the Web Part completely

With the new version, a default message is displayed if nothing is to show and let the possibility to choose to hide the Web Part completely from the properties panel.

Code coverage

The code coverage is not easy (I think) with the SPFx components; Β there are not a lot of "official" documentations about it and the existing one is quite deprecated.

It was a challenge and an opportunity to include this kind of tests into this solution. 100% of the code is covered (excluding the WebPart.ts file). Moreover, the code coverage was really useful for this solution to check each part of the code and with a good mock, it is possible to find some issues before releasing a new version.

✍🏻 I think I will write one or more blog posts about the code coverage, the mocks and the steps to include it into your own solution (don't hesitate to let me know if this kind of subject interests you πŸ˜‰).

Other

  • Upgrade the solution to SPFx 1.11.0.
  • The code was totally restructured to improve the maintainability, be compliance with the Best Practices of developments and facilitate the Jest unit tests
  • As part of the unit tests, the PnPJS Framework was removed from the solution. Some other useless packages were removed from the solution to reduce the size of the package
  • The new release (from the repository) use pnpm to manage the NodeJS packages. The previous version size was 136 KB and the new one is 105KB. This is really huge for a little solution like this one
  • Also with the aim of having a better performance, limiting the bandwidth and avoiding threshold, a cache system was implemented for the SharePoint requests that are the most used. The cache was setup to 5 minutes
  • Some CSS bugs were fixed, including the people cards alignment
  • Add french support language

More information

Another version is in pending to add more capabilities and include Microsoft Graph. Some people have contributed to the next version that will be released as soon as possible (thank you guys πŸ™πŸ»).

You are maybe wondering: "Why keeping a version without Microsoft Graph?"

  • Firstly because without Microsoft Graph, no authorization from SharePoint admin is required
  • Secondly, the first goal of this Web Part was to display some people without editing the page every time when you used the People Web Part

Releases Β· Microsoft SharePoint / SPFx / Group People
Display the members of a target SharePoint group. http://sharepoint.gitlab-pages.lsonline.fr/sp-dev-fx-webparts/group-people

Hoping this post will help you πŸ˜‰