How to Show the People You Work With on Your SharePoint Sites

With the Microsoft Graph API connection, you can display all your frequent collaborators. This makes it super easy for your users to see the details of the people they work with. Just use the “People I Work With” use case to achieve this.

NOTEThe people shown in the connected list will vary depending on the user viewing the page.

TABLE OF CONTENTS

• Prerequisites
• What is the “People I Work With” Use Case?
• 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 People I Work With 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 (People.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 “People I Work With” Use Case?

The People I Work With use case is a Microsoft Graph API GET query that retrieves the signed-in SharePoint user’s frequent collaborators. It is typically determined by the user’s communication and business relationship within Microsoft 365, including their email, chats, and shared documents.

The typical structure of this use case is:

https://graph.microsoft.com/v1.0/me/people

Once you connect using “People I Work With”, you will be able to display all the people you frequently work with. This gives your page viewers easy access to information about team members.

To use it, you must enable the following permissions in the SharePoint Admin Center:

• People.Read - this permission allows the app to read a list of people relevant to the signed-in user. The people included can be listed in your local contacts, your contacts from social networking, your organization's directory, or your recent communications.

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 People I Work With Use Case

Search for People I Work With and select it:

Then, click Run Query:

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 names of the employees as the titles.
2. #jobTitle in the Subtitle field - shows the work titles as the subtitles.
3. #scoredEmailAddresses_0_address in the description field - shows the email addresses as the descriptions.
4. #profileImage in the Image field - shows the image of the employees as the assigned image.

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! Your users now have easy access to their frequent collaborators.

TIPGot tons of Team members? No worries! The Search & Filter Toolbar is here to save the day and help your viewers find exactly what they need in a snap. They can search, sort, and filter through all those channels super quickly. Go to Getting Started: The Basics of the Search & Filter Toolbar to give it a try.

Related articles:

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