One of the hardest things for users to find in Office365 are groups created within Office365, as well as knowing which they have joined. This can happen because they have joined a large list of groups, because they were invited via Microsoft Teams (or Groups), or even because there isn’t a simple way to search for them with Outlook.

With this in mind, we decided to create a web part that uses Microsoft Graph to search by these Groups.

And you know what? It is very simple.

Frameworks Recipe

Mixing it all together

At first, all we wanted was to list Office365 Groups and have a search box to filter them. Datatables already gives us this out-of-box, so we only needed to invoke Groups endpoint and define the permissions needed in package-solution.json file.

"webApiPermissionRequests": [
      {
        "resource": "Microsoft Graph",
        "scope": "Group.Read.All"   
      }
    ]

As you can probably notice from the code above, the number of items to be returned are from a web part property that is defined “999” by default. And no, at this point, we don’t have server-side paging – no yet.

Office Groups List with Links

But then, it occurred to us that this could be enriched with links to other features that are already connected to Office365 Groups, like Email, Teams, PowerBI and OneNote.

And so, with this in mind, we’ve created links to those services to be possible to access them from one single point. Of course, if you don’t have access to it, it will return a fantastic “Access Denied” message.

Of course, there is still some work to do, and we can add a lot more feature to it. But at the moment this can be a good starting point for the community.

You can find the source code on our public GitHub.

Sharing is caring!


1 Comment

SharePoint Dev Weekly - Episode 49 - Microsoft 365 Developer Blog · August 27, 2019 at 11:53 am

[…] Office 365 Groups Search Web Part – Ricardo Calejo (DevScope Ninjas) […]

Leave a Reply to SharePoint Dev Weekly - Episode 49 - Microsoft 365 Developer Blog Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: