React Groups and Teams Filters

Published May 15 2021 04:02 AM 1,079 Views
Senior Member

In this article I’ll go over both of the filters you can find in my React Groups and Teams Filters webpart. The webpart is useful for site managers, admins, and users to find their sites and it’s ​information. The first filter switches the All Groups in my Organization to My Groups and the second filters the visibility of the groups ( Public/Private/All )

In the screenshot below you can see the code for the buttons.

 

img1.png

 

Visibility Filters

 

The first three buttons are the visibility filters. They filter the MyGroupResultsFiltered to be the button text you clicked. For example, if you click the ‘Public’ button MyGroupResultsFiltered will be filtered to include only groups with the visibility set as ‘Public’.

 

Let’s dive deeper into what’s happening. On click of, for instance, Private, the button calls the SwitchGroupList2 function (line 69) and passes through ‘Private’ as a parameter. img2.png

 

That parameter ‘Private’ is now called ‘Switch’ and next we check if that equals ‘All’.

 

If it does and you clicked the button titled ‘All’, we want to set the state of AllGroupsresults to the state holding all of the items. We do this because if I were to filter the AllGroupsresults to private and then switch to public and filter that, we’re just filtering a filtered list and you won’t get back any results. AllGroupsresults hold all of the results for Groups in my Organization and AllGroupsresultsFiltered is the filtered version of that list. In other words, when we get back the Groups ( both Groups in my Org and My Groups ) we make a copy of this list that we can filter however we would like and we can call on that list and filter it and assign it to the AllGroupsresultsFiltered value.

 

If the selected filter is anything other than ‘All’ we go ahead and create a constant that is assigned the filtered list. What this filter does is it maps through AllGroupsresults and checks if every group has the visibility that you selected, keeps the groups that has the visibility, and assigns the value to SwitchedALL. Same thing for MyGroupResults; It maps through MyGroupResults and filters the groups to be the ones that match the visibility you selected. Next, we set the state of AllGroupsresultsFiltered and MyGroupResultsFiltered to be SwitchedALL and SwitchedMY, respectively. In our case, we selected the button with the text ‘Private’ so AllGroupsresultsFiltered and MyGroupResultsFiltered will reflect this change and only show the groups with the visibility ‘Private’.

 

The last part is, after the if/else statement, we want to set the state ‘mode’ to be the selected filter. We’re doing this so that the button we clicked will have the ‘SelectedFilter’ styling. How we do this is by inputting a ternary operator in the code so that, depending on if the mode equals ‘Private’, we change the styling. If you selected the Private button the SwitchGroupList2 function will set the mode to be ‘Private’ and, consequently, rendering the button with the class ‘Selected Filter’.

 

img3.png

 

Option Filter

On the bottom right of the heading before the groups you will either see a button titled ‘My Groups’ or ‘Groups In My Organization’.

option filter.png

This button allows you to toggle between either displaying groups you are a member of or groups in your organization. On click of this button you call the SwitchGroupList function. ( Not the SwitchGroupList2 function mentioned earlier )

 

In this function we check if the title in state is ‘Groups In My Organization’. The title is what is displayed, meaning that if the button text is ‘View My Groups’ the title is ‘Groups In My Organization’.

switch group list.png

 

If the title is ‘Groups In My Organization’ we change it to be ‘My Groups’. The opposite also applies- if the title is ‘My Groups’ we go ahead and change it to be ‘Groups In My Organization’.

 

Why is this part of the code? For two reasons: the first is because we want to toggle the button text and header text between ‘Groups In My Organization’ and ‘My Groups’ and also so that we can display the right information.

 

ternary.png In the render there is a ternary operator that checks if the current selected option is ‘My Groups’.

 

If this is true it maps through MyGroupResultsFiltered and displays the groups. If not, it renders All of the groups in your organization.

 

I hope you liked this article and it helped you out with your filters!

You can view the code here: https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-groups-teams

%3CLINGO-SUB%20id%3D%22lingo-sub-2355920%22%20slang%3D%22en-US%22%3EReact%20Groups%20and%20Teams%20Filters%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2355920%22%20slang%3D%22en-US%22%3E%3CP%3EIn%20this%20article%20I%E2%80%99ll%20go%20over%20both%20of%20the%20filters%20you%20can%20find%20in%20my%20React%20Groups%20and%20Teams%20Filters%20webpart.%20The%20webpart%20is%20useful%20for%26nbsp%3B%3CSPAN%20data-usefontface%3D%22true%22%20data-contrast%3D%22none%22%3Esite%20managers%2C%20admins%2C%20and%20users%20to%20find%20their%20sites%20and%20it%E2%80%99s%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%3E%20i%3C%2FSPAN%3E%3CSPAN%20data-usefontface%3D%22true%22%20data-contrast%3D%22none%22%3Enformation.%26nbsp%3B%3C%2FSPAN%3EThe%20first%20filter%20switches%20the%20All%20Groups%20in%20my%20Organization%20to%20My%20Groups%20and%20the%20second%20filters%20the%20visibility%20of%20the%20groups%20(%20Public%2FPrivate%2FAll%20)%3C%2FP%3E%0A%3CP%3EIn%20the%20screenshot%20below%20you%20can%20see%20the%20code%20for%20the%20buttons.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%22img1.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F280774i6C0240580AC8F4D4%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22img1.png%22%20alt%3D%22img1.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CH2%20class%3D%22has-text-align-center%20lia-align-center%22%20id%3D%22toc-hId--466899334%22%20id%3D%22toc-hId--466929130%22%3E%26nbsp%3B%3C%2FH2%3E%0A%3CH2%20class%3D%22has-text-align-center%20lia-align-center%22%20id%3D%22toc-hId-2020613499%22%20id%3D%22toc-hId-2020583703%22%3EVisibility%20Filters%3C%2FH2%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EThe%20first%20three%20buttons%20are%20the%20visibility%20filters.%20They%20filter%20the%20MyGroupResultsFiltered%20to%20be%20the%20button%20text%20you%20clicked.%20For%20example%2C%20if%20you%20click%20the%20%E2%80%98Public%E2%80%99%20button%20MyGroupResultsFiltered%20will%20be%20filtered%20to%20include%20only%20groups%20with%20the%20visibility%20set%20as%20%E2%80%98Public%E2%80%99.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CTABLE%20style%3D%22border%3A%20none%3B%22%20width%3D%22100%25%22%3E%0A%3CTBODY%3E%0A%3CTR%3E%0A%3CTD%20width%3D%2250%25%22%20style%3D%22border%3A%20none%3B%22%3E%3CSPAN%3ELet%E2%80%99s%20dive%20deeper%20into%20what%E2%80%99s%20happening.%20On%20click%20of%2C%20for%20instance%2C%20Private%2C%20the%20button%20calls%20the%20SwitchGroupList2%20function%20(line%2069)%20and%20passes%20through%20%E2%80%98Private%E2%80%99%20as%20a%20parameter.%3C%2FSPAN%3E%3C%2FTD%3E%0A%3CTD%20width%3D%2250%25%22%20style%3D%22border%3A%20none%3B%22%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%22img2.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F280775i666631F4E7738F6F%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22img2.png%22%20alt%3D%22img2.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FTD%3E%0A%3C%2FTR%3E%0A%3C%2FTBODY%3E%0A%3C%2FTABLE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%20class%3D%22lia-align-center%22%3EThat%20parameter%20%E2%80%98Private%E2%80%99%20is%20now%20called%20%E2%80%98Switch%E2%80%99%20and%20next%20we%20check%20if%20that%20equals%20%E2%80%98All%E2%80%99.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EIf%20it%20does%20and%20you%20clicked%20the%20button%20titled%20%E2%80%98All%E2%80%99%2C%20we%20want%20to%20set%20the%20state%20of%20AllGroupsresults%20to%20the%20state%20holding%20all%20of%20the%20items.%20We%20do%20this%20because%20if%20I%20were%20to%20filter%20the%20AllGroupsresults%20to%20private%20and%20then%20switch%20to%20public%20and%20filter%20that%2C%20we%E2%80%99re%20just%20filtering%20a%20filtered%20list%20and%20you%20won%E2%80%99t%20get%20back%20any%20results.%20AllGroupsresults%20hold%20all%20of%20the%20results%20for%20Groups%20in%20my%20Organization%20and%20AllGroupsresultsFiltered%20is%20the%20filtered%20version%20of%20that%20list.%20In%20other%20words%2C%20when%20we%20get%20back%20the%20Groups%20(%20both%20Groups%20in%20my%20Org%20and%20My%20Groups%20)%20we%20make%20a%20copy%20of%20this%20list%20that%20we%20can%20filter%20however%20we%20would%20like%20and%20we%20can%20call%20on%20that%20list%20and%20filter%20it%20and%20assign%20it%20to%20the%20AllGroupsresultsFiltered%20value.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EIf%20the%20selected%20filter%20is%20anything%20other%20than%20%E2%80%98All%E2%80%99%20we%20go%20ahead%20and%20create%20a%20constant%20that%20is%20assigned%20the%20filtered%20list.%20What%20this%20filter%20does%20is%20it%20maps%20through%20AllGroupsresults%20and%20checks%20if%20every%20group%20has%20the%20visibility%20that%20you%20selected%2C%20keeps%20the%20groups%20that%20has%20the%20visibility%2C%20and%20assigns%20the%20value%20to%20SwitchedALL.%20Same%20thing%20for%20MyGroupResults%3B%20It%20maps%20through%20MyGroupResults%20and%20filters%20the%20groups%20to%20be%20the%20ones%20that%20match%20the%20visibility%20you%20selected.%20Next%2C%20we%20set%20the%20state%20of%20AllGroupsresultsFiltered%20and%20MyGroupResultsFiltered%20to%20be%20SwitchedALL%20and%20SwitchedMY%2C%20respectively.%20In%20our%20case%2C%20we%20selected%20the%20button%20with%20the%20text%20%E2%80%98Private%E2%80%99%20so%20AllGroupsresultsFiltered%20and%20MyGroupResultsFiltered%20will%20reflect%20this%20change%20and%20only%20show%20the%20groups%20with%20the%20visibility%20%E2%80%98Private%E2%80%99.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EThe%20last%20part%20is%2C%20after%20the%20if%2Felse%20statement%2C%20we%20want%20to%20set%20the%20state%20%E2%80%98mode%E2%80%99%20to%20be%20the%20selected%20filter.%20We%E2%80%99re%20doing%20this%20so%20that%20the%20button%20we%20clicked%20will%20have%20the%20%E2%80%98SelectedFilter%E2%80%99%20styling.%20How%20we%20do%20this%20is%20by%20inputting%20a%20ternary%20operator%20in%20the%20code%20so%20that%2C%20depending%20on%20if%20the%20mode%20equals%20%E2%80%98Private%E2%80%99%2C%20we%20change%20the%20styling.%20If%20you%20selected%20the%20Private%20button%20the%20SwitchGroupList2%20function%20will%20set%20the%20mode%20to%20be%20%E2%80%98Private%E2%80%99%20and%2C%20consequently%2C%20rendering%20the%20button%20with%20the%20class%20%E2%80%98Selected%20Filter%E2%80%99.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%22img3.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F280777i621BDAEABE92A2A4%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22img3.png%22%20alt%3D%22img3.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CH2%20class%3D%22has-text-align-center%20lia-align-center%22%20id%3D%22toc-hId-213159036%22%20id%3D%22toc-hId-213129240%22%3E%26nbsp%3B%3C%2FH2%3E%0A%3CH2%20class%3D%22has-text-align-center%20lia-align-center%22%20id%3D%22toc-hId--1594295427%22%20id%3D%22toc-hId--1594325223%22%3EOption%20Filter%3C%2FH2%3E%0A%3CTABLE%20style%3D%22border%3A%20none%3B%22%20width%3D%22100%25%22%3E%0A%3CTBODY%3E%0A%3CTR%3E%0A%3CTD%20width%3D%2250%25%22%20height%3D%22180px%22%20style%3D%22border%3A%20none%3B%22%3E%3CSPAN%3EOn%20the%20bottom%20right%20of%20the%20heading%20before%20the%20groups%20you%20will%20either%20see%20a%20button%20titled%20%E2%80%98My%20Groups%E2%80%99%20or%20%E2%80%98Groups%20In%20My%20Organization%E2%80%99.%3C%2FSPAN%3E%3C%2FTD%3E%0A%3CTD%20width%3D%2250%25%22%20height%3D%22180px%22%20style%3D%22border%3A%20none%3B%22%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%22option%20filter.png%22%20style%3D%22width%3A%20902px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F280780iA0796B9CD323BD3E%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22option%20filter.png%22%20alt%3D%22option%20filter.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3C%2FTD%3E%0A%3C%2FTR%3E%0A%3C%2FTBODY%3E%0A%3C%2FTABLE%3E%0A%3CP%20class%3D%22lia-align-center%22%3E%3CSPAN%3EThis%20button%20allows%20you%20to%20toggle%20between%20either%20displaying%20groups%20you%20are%20a%20member%20of%20or%20groups%20in%20your%20organization.%20On%20click%20of%20this%20button%20you%20call%20the%20SwitchGroupList%20function.%20(%20Not%20the%20SwitchGroupList2%20function%20mentioned%20earlier%20)%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%20class%3D%22lia-align-center%22%3E%26nbsp%3B%3C%2FP%3E%0A%3CTABLE%20style%3D%22border%3A%20none%3B%22%20width%3D%22100%25%22%3E%0A%3CTBODY%3E%0A%3CTR%3E%0A%3CTD%20width%3D%2250%25%22%20style%3D%22border%3A%20none%3B%22%3E%3CSPAN%3EIn%20this%20function%20we%20check%20if%20the%20title%20in%20state%20is%20%E2%80%98Groups%20In%20My%20Organization%E2%80%99.%20The%20title%20is%20what%20is%20displayed%2C%20meaning%20that%20if%20the%20button%20text%20is%20%E2%80%98View%20My%20Groups%E2%80%99%20the%20title%20is%20%E2%80%98Groups%20In%20My%20Organization%E2%80%99.%3C%2FSPAN%3E%3C%2FTD%3E%0A%3CTD%20width%3D%2250%25%22%20style%3D%22border%3A%20none%3B%22%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%22switch%20group%20list.png%22%20style%3D%22width%3A%20520px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F280781i156E78B9D2C729F6%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22switch%20group%20list.png%22%20alt%3D%22switch%20group%20list.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3C%2FTD%3E%0A%3C%2FTR%3E%0A%3C%2FTBODY%3E%0A%3C%2FTABLE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%20class%3D%22lia-align-center%22%3EIf%20the%20title%20is%20%E2%80%98Groups%20In%20My%20Organization%E2%80%99%20we%20change%20it%20to%20be%20%E2%80%98My%20Groups%E2%80%99.%20The%20opposite%20also%20applies-%20if%20the%20title%20is%20%E2%80%98My%20Groups%E2%80%99%20we%20go%20ahead%20and%20change%20it%20to%20be%20%E2%80%98Groups%20In%20My%20Organization%E2%80%99.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%20class%3D%22lia-align-center%22%3EWhy%20is%20this%20part%20of%20the%20code%3F%20For%20two%20reasons%3A%20the%20first%20is%20because%20we%20want%20to%20toggle%20the%20button%20text%20and%20header%20text%20between%20%E2%80%98Groups%20In%20My%20Organization%E2%80%99%20and%20%E2%80%98My%20Groups%E2%80%99%20and%20also%20so%20that%20we%20can%20display%20the%20right%20information.%3C%2FP%3E%0A%3CP%20class%3D%22lia-align-center%22%3E%26nbsp%3B%3C%2FP%3E%0A%3CTABLE%20style%3D%22border%3A%20none%3B%22%20width%3D%22100%25%22%3E%0A%3CTBODY%3E%0A%3CTR%3E%0A%3CTD%20width%3D%2250%25%22%20style%3D%22border%3A%20none%3B%22%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%22ternary.png%22%20style%3D%22width%3A%20845px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F280782iA7EEBF7CD09C6FAF%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22ternary.png%22%20alt%3D%22ternary.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FTD%3E%0A%3CTD%20width%3D%2250%25%22%20style%3D%22border%3A%20none%3B%22%3E%3CSPAN%3EIn%20the%20render%20there%20is%20a%20ternary%20operator%20that%20checks%20if%20the%20current%20selected%20option%20is%20%E2%80%98My%20Groups%E2%80%99.%3C%2FSPAN%3E%3C%2FTD%3E%0A%3C%2FTR%3E%0A%3C%2FTBODY%3E%0A%3C%2FTABLE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%20class%3D%22lia-align-center%22%3E%3CSPAN%3EIf%20this%20is%20true%20it%20maps%20through%20MyGroupResultsFiltered%20and%20displays%20the%20groups.%20If%20not%2C%20it%20renders%20All%20of%20the%20groups%20in%20your%20organization.%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%20class%3D%22lia-align-center%22%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%20class%3D%22lia-align-center%22%3E%3CSPAN%3EI%20hope%20you%20liked%20this%20article%20and%20it%20helped%20you%20out%20with%20your%20filters!%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%20class%3D%22lia-align-center%22%3E%3CSPAN%3EYou%20can%20view%20the%20code%20here%3A%20%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-groups-teams%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-groups-teams%3C%2FA%3E%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-TEASER%20id%3D%22lingo-teaser-2355920%22%20slang%3D%22en-US%22%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%2211.png%22%20style%3D%22width%3A%20894px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F280779i21AD00FA35EF809A%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%2211.png%22%20alt%3D%2211.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3BThis%20article%20goes%20over%20both%20of%20the%20M365%20groups%20filters%3B%20The%20Visibility%20filter%20(%20Public%2FAll%2FPrivate%20)%20and%20the%20type%20of%20group%20filter%20(%20My%20Groups%20%2F%20Groups%20in%20my%20Org%20)%3C%2FP%3E%3C%2FLINGO-TEASER%3E
Co-Authors
Version history
Last update:
‎May 14 2021 11:33 AM
Updated by: