How to Display All Groups In Your Organization with Contact Details

Want to create a handy directory of all your organization's groups with their contact info? The Graph API connection makes this a breeze! Your visitors will love being able to quickly find and connect with any group they need. Just use the 'All Groups in My Organization' use case and you're good to go. Follow the steps below to learn how.

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 All Groups in My Organization Use Case
  • Step 6: Map Items
  • Step 7: Save

Prerequisites

• You must have ShortPoint SPFx version 8.6.0.0 or later installed in 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.).

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 All Groups in My Organization Use Case

Search for All Groups in My Organization and 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 group as the titles.
2. #email in the Subtitle field - shows the email of the group as the subtitles.

(Optional) If you’re using an Icon List, choose 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:

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

Once satisfied, click Save:

Congratulations! You now have a handy list of all your groups’ contact information, making it easier to stay connected with each other.

TIPWorking with a lengthy group list? No worries! The Search & Filter Toolbar is your users' best friend for finding exactly what they need. With quick search, sort, and filter options, they can locate any group in just a few clicks. Ready to check it out? Head on over to Getting Started: The Basics of the Search & Filter Toolbar to learn how. 

Related articles:

• How to Display Rows in an Excel Table
• How to Create a Navigation Menu of All Your Joined Teams
• How to Show All the Files in Your OneDrive
• How to Showcase Your Outlook Emails in SharePoint