How to Create a List of All the Groups You are Part of

Using the Microsoft Graph API connection, you can create a list that dynamically displays the groups your end-user/viewer belongs to, creating a personalized experience for them. This can be done through the "Groups I belong to" use case. Follow the Step-by-step Tutorial below to learn how.

NOTEThe groups displayed in the list will vary depending on who is viewing the page

Important!
This feature will be released in version 8.5.2.0 (Q3 2025) for SharePoint Online and is not currently available.

TABLE OF CONTENTS

• Prerequisites
• Step-by-step Tutorial
  • Step 1: Edit the ShortPoint Web Part
  • Step 2: Switch to Grid Mode
  • Step 3: Edit the Design Element
  • Step 4: Connect to Microsoft Graph API
  • Step 5: Use the Groups I Belong To Use Case
  • Step 6: Map Items
  • Step 7: Save

Prerequisites

• You must have ShortPoint SPFx version x.x.xxx and up installed on your SharePoint environment.
• You must be a ShortPoint Designer with an active license.
• You must have the Microsoft Graph API connection enabled. Go to How to Enable Microsoft Graph Integration for MS Graph API Connections to learn how.
• You must authorize the necessary permissions (Group.Read.All) in the API access page. To check, go to your SharePoint Admin Center > Advanced > API access.
• You must have the Design Element you want to use to connect on your SharePoint page. For best results, we recommend using Design Elements that allow listing of multiple items (e.g. Icon List, Image List, Simple List, etc.).

Step-by-step Tutorial

Follow the steps below to get started:

Step 1: Edit the ShortPoint Web Part

Go to the SharePoint page you want to use and click Edit:

Close the Toolbox:

Select the ShortPoint web part and click the Edit Properties icon:

Step 2: Switch to Grid Mode

NOTEShortPoint Connect is currently only available in Grid Mode.

Click the Switch to Grid Mode icon:

Step 3: Edit the Design Element

NOTEYou can use any Design Element you want. For best results, we recommend using Design Elements that allow listing of multiple items (e.g. Icon List, Image List, Simple List, etc.). For this guide, we’ll use Icon List.

Click the cogwheel icon of the Design Element you’ll use:

Step 4: Connect to Microsoft Graph API

Go to the Connect tab:

Select Microsoft Graph API:

NOTEYou need to enable the Microsoft Graph API connection before using it. Learn more about it in How to Enable Microsoft Graph Integration for MS Graph API Connections.

Step 5: Use the Groups I Belong To Use Case

Scroll down to the Use Cases section and search for Groups I belong to. Select it:

Select Run Query:

Then, click Connect:

Step 6: Map Items

Go to the Items tab:

Delete default content:

Use the link icon to map the properties you want to be displayed:

You can map any property you want. In our case, we used the following properties:

1. #displayName in the Title field - shows the name of the members as the titles.
2. #email in the Subtitle field - shows the email of the members as the subtitles.

(Optional) If you are using an Icon List, select the Icon you want to use:

NOTECheck out ShortPoint Connect: Basic Tutorial to learn more about mapping properties.

Step 7: Save

Click Preview to see how the Design Element will look:

Click Update to apply your changes:

NOTEThe groups displayed in the list will vary depending on who is viewing the page.

Select the eye icon to see your page in real time:

Once satisfied, click Save:

Amazing! You have just personalized the intranet experience for your end-users by displaying and giving them quick access to the list of groups that they belong to.

TIPHave lots of groups? Use the Search & Filter Toolbar to help your users easily find  group they need! With it, they can quickly search, sort, and filter through their list, so they can find exactly what they're looking for in seconds. To learn how to add it, go to Getting Started: The Basics of the Search & Filter Toolbar.

Related articles:

• How to Enable Microsoft Graph Integration for MS Graph API Connections
• Connection Type: Microsoft Graph API