Try ShortPoint nowUsing the Microsoft Graph API connection, you can generate a list of all members within any group in your organization. For instance, in our example below, we connected an Image List to our Human Resources group:
This article demonstrates how to showcase your group members in SharePoint using the 'Members of a Group’ use case.
TABLE OF CONTENTS
Prerequisites
- You must have ShortPoint SPFx version 8.6.0.0 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 and Directory.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.).
What is the Members of a Group Use Case?
The Members of a Group use case is a Microsoft Graph API GET query that allows SharePoint users to get a list of a group's members, including users, organizational contacts, devices, service principals, and other groups.
The typical structure of this use case is:
https://graph.microsoft.com/v1.0/groups/[%_spPageContextInfo('groupId')%]/members
Where you will need to get the following ID:
- groupId - is the unique ID of the group you want to use.
Once you connect using “Members of a Group”, all members of your specified group will be shown on your SharePoint site. With it, your page viewers can now see the details of other team members.
To use it, you must enable the following permissions in the SharePoint Admin Center:
- Directory.Read.All - this permission allows the app to read data in your organization's directory.
- Group.Read.All - this permission allows the app to list groups, group memberships, and properties. It also permits reading of calendars, conversations, files, and other group content for all the groups you can access.
NOTEIf you haven’t given access to the permissions above, go to your SharePoint Admin Center > Advanced > API access.
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 Image 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 Members of a Group Use Case
Search for Members of a Group and select it:
Under Query Parameters, you will be prompted to get the Group ID. To do this, click Get Parameter:
Look for the name of the group you want to use and copy its id:
Click Go back:
Paste the copied ID in the Group ID field:
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:
- #displayName in the Title field - shows the name of the members as the titles.
- #email in the Subtitle field - shows the email of the members as the subtitles.
- #profileImage in the Image field - shows the members’ profile photos.
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:
Select the eye icon to see your page in real time:
Once satisfied, click Save:
TIPGot a long list of group members? The Search & Filter Toolbar makes it super easy for your users to find who they're looking for! They can quickly search, sort, and filter through the list to locate the exact member they need in a few clicks. Want to add this helpful feature? Check out Getting Started: The Basics of the Search & Filter Toolbar to learn how.
Excellent! You have now created a complete list of all members in your selected organizational group.
Related articles:
