Loading and filtering Azure AD groups by displayName, groupType and extensionattribute

[2Who]

What version of PnPjs library you are using

3.x

Minor Version Number

17

Target environment

SharePoint Framework

Additional environment details

I'm using a SPFx webpart for our SharePoint and the package "@pnp/graph": "^3.17.0".

Question/Request

Hello,

i am trying to use pnpjs in a SPFx webpart to load groups from our AAD and apply filters to the request.
After a lot of trying I don't understand how to use the ".filter()" to filter my search for only the groupType "Unified" and also filter for contents in the extensionAttributes?
My code currently can only search for parts of the displayName and looks like the following:

export class AzureActiveDirectoryRepository {
    private readonly azure: GraphFI;

    constructor(context: WebPartContext) {
        this.azure = graphfi().using(SPFx(context));
    }

    async searchGroups(term: string): Promise<IDisplayGroup[]> {
        var displayGroups: IDisplayGroup[] = [];
        await this.azure.groups.search('"displayName:' + term + '"')()
        .then((groups) => runInAction(() => {
            groups.map(group => {
                displayGroups.push({
                    displayName: group.displayName ?? "",
                    groupId: group.id ?? "",
                    groupDescription: group.description ?? "",
                    groupType: group.groupTypes.indexOf('Unified') > -1 ? 0 : 1
                });
            })
        }));
        displayGroups = displayGroups.filter(x => x.groupType == 1);
        return displayGroups;
    }
}

export interface IDisplayGroup {
    displayName: string;
    groupId: string;
    groupDescription: string;
    groupType: number;
}

How can I implement such a filter?
Thank you in advance!
Best regards
Niklas

[juliemturner]

I took a quick look at the docs for Groups and ironically they had an example for exactly what you're requesting... https://learn.microsoft.com/en-us/graph/api/group-list?view=graph-rest-1.0&tabs=http#optional-query-parameters

So based on that I would surmise that you would want to do the following:

const groupsFiltered = await this.graph.groups.filter("groupTypes/any(c:c+eq+'Unified')")();

HOWEVER... it appears that because of the complexity of the filter the encoding that is done is breaking that call, which we'll look into further. That said this will work for you as a work around

import { GraphQueryable, graphGet, ..<other imports from this endpoint>... } from "@pnp/graph";
const groupFilteredTest = await graphGet(GraphQueryable(this.graph.groups, "?$filter=groupTypes/any(c:c+eq+'Unified')"));

[2Who]

For those who want to exclude Unified groups like myself i made the call like this:

await graphGet(GraphQueryable(this.azure.groups, `?$filter=NOT groupTypes/any(c:c+eq+'Unified')&$search="displayName:${term}"&$orderby=displayName`));

Source: https://learn.microsoft.com/en-us/graph/filter-query-parameter?tabs=http#examples-using-the-filter-query-operator

[patrick-rodgers]

This was fixed in v4 by #2982 including adding tests. As more encoding issues are reported we now have a framework to handle them.

[github-actions]

This issue is locked for inactivity or age. If you have a related issue please open a new issue and reference this one. Closed issues are not tracked.