React Groups & Teams 2.0

On the left is the new Table style with the default 5 groups selected. On the right is the Cards display with 9 cards in the total view.

Overview

React Groups and Teams was released May 3rd to the Patterns and Practices SPFx community (PnP). This was my first official web part for PnP and I’m happy to say there may be some major changes rolling out soon.

All of the features from the original version are staying. These are:

Group Name (hover for group description)	Link to Planner plan (if available)
Link to Group email	Group privacy filter (Private/Public/All)
Link to SharePoint site	Link to Microsoft Teams for the Group (if available)
Link to calendar	Groups you’re a part of or all Org groups filter

Here are the major changes that we could be seeing roll out:

Pagination ( Back/Next buttons ) and Page Display ( n out of n pages )
Style Toggle between Card style and Table style (default)
Group display selection – display 5, 10, 15 groups at a time for Table and 6, 9, and 12 for Card style.

Let’s Talk Styling

The updated version will feature sleek new styles. It’s not only simplified in terms of styling and functionality, but it has new options available.

There is now a Style toggle in the web part property pane that you can choose either the original table or the new card list. The card list makes use of the DocumentCard from the Fluent UI React Controls! You can choose if you want 6, 9, or 12 groups displayed at one time.

I also combined both the Groups and Teams tab that was in the previous version. Now, there is no need to click on either Groups or Teams- you can find the Microsoft Teams link (if available) in the main display.

The filters have all stayed the same and just look different!

The table style pictured here has the option of 5, 10, or 15 groups to be displayed at one time.

Additionally, I made sure that the tooltip text color was changed for readability purposes. Because of the very light background, white text was harder to read. The description still displays as normal!

Pagination

The main reason of updating the web part was the pagination ability. If you have more than 20 groups this tool is helpful for you!

You can go into the property pane of the web part and configure the Group Display for either style (5, 10, 15 for Table and 6, 9, 12 for Card). The changes will stay in place as you toggle the display. For example, if you’re on Card display, select 10 for the table display, and switch to Table display you will see the change!

There will be an article explaining how the pagination code works out soon!

Summary

The React Groups and Teams web part may have some new changes rolling out soon! While it keeps the original features and tools it includes some new ones like pagination, a style toggle, and group display filters. Look out for updates!