Try ShortPoint nowUse the ShortPoint Microsoft Graph API connection type to display dynamic content from Microsoft 365 applications (Outlook, Teams, OneDrive, OneNote, etc.), SharePoint sites, and other sources through the Microsoft Graph API.
The Microsoft Graph API provides REST APIs and client libraries, giving you access to rich data that helps create personalized user experiences and boost productivity.
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
- Interactive Tutorial
- Step-by-step Tutorial
- Microsoft Graph API Features
- List of Common Use Cases
Prerequisites
- You have ShortPoint SPFx version 8.x.xx or later installed on your Microsoft 365 SharePoint site. This feature is not available for SharePoint 2019 and SharePoint 2016/2013 On-premises environments.
- You have enabled the ShortPoint - Azure AD Services Proxy SPFx app, approved API access permissions, and established Microsoft Graph integration on your SharePoint site. If you haven't done this yet, please refer to our article on How to Enable Microsoft Graph Integration for MS Graph API Connections.
- You are a ShortPoint Designer with an active license.
Interactive Tutorial
Follow this interactive tutorial to learn how to use the ShortPoint Microsoft Graph API connection:
Explore the Features section to learn about customization options, and visit the Use Cases section to discover common applications for this connection.
Step-by-step Tutorial
Follow these detailed steps to set up a Microsoft Graph API connection:
Step 1: Edit the ShortPoint web part
- Open your SharePoint page and click Edit
- Select the ShortPoint web part
- Press the Edit Properties button
Step 2: Switch to Grid Mode
ShortPoint Connect is currently only available in Grid Mode.
- Go to the ShortPoint Actions Toolbar
- Click Switch to Grid Mode
Step 3: Edit ShortPoint Design Element
- Navigate to the Design Element you want to connect
- Open the settings window by clicking the cogwheel icon
Note: If you haven't added a Design Element to connect yet, you can insert one by clicking the plus button.
Step 4: Select Microsoft Graph API connection
- Switch to the Connect tab
- Choose the Microsoft Graph API connection type
Note: If you haven't enabled the Microsoft Graph API connection yet, follow the steps in our article How to Enable Microsoft Graph Integration for MS Graph API Connections .Step 5: Enter a Microsoft Graph API query
You can enter a Microsoft Graph API query in two ways. Choose the method that works best for you:
- Select from predefined Use Cases
- Input a custom query
Option 1: Select from predefined Use Cases
We've provided a library of common Use Cases that you can easily select and apply as needed.
- Scroll down to the Use Cases section
- Select the Use Case that best matches your desired results
- (If required) Enter any additional parameters for the Use Case and click Apply Parameters
- Hit Run query
For this example, we'll list all the groups that the viewer belongs to in an Icon List Design Element. We've selected the Groups I Belong To use case.
In another example, we will list the members of a specific group by selecting the Members of a Group use case. It requires you to enter a Group ID.
Explore additional use cases and their practical applications in the Use Cases section.
Option 2: Input a custom query
If you're familiar with Microsoft Graph API queries or know how to obtain one from Graph Explorer, you can use these queries to retrieve your desired data.
- Enter your query in the Microsoft Graph API field
- Hit Run query
If your query succeeds, you'll see a green notification banner confirming this. You will also see content appear in the Response Preview window if the query yields results.
Step 6: Connect
- (Optional) Configure connection settings and performance caching options. You'll find details about these in the Features Section below.
- Hit the Connect button
You'll know your connection is properly established when the banners turn green and show a successful connection.
Step 7: Map items to display
You can now select which data property from the query results you want to display on the Design Element.
- Switch to the Items tab
- Delete default content
- Click the link icon and map any property that you want into each available field
In our example, we mapped the following fields and selected an icon:
- #displayName in the Title field - shows the names of the users as the titles
- #mail in the Subtitle field - shows the job titles of the users as the subtitles
For more information about mapping results, see our ShortPoint Connect: Basic Tutorial article.
Step 8: Update and save
- (Optional) Click Preview to see how the contents of your Design Element will appear
- Once satisfied, apply your changes by hitting Update or Insert
- Do not forget to hit Save and publish your page
Congratulations! You've now mastered the basics of the ShortPoint Microsoft Graph API connection. Start exploring the various use cases to make the most of this powerful tool today.
Microsoft Graph API Features
The Microsoft Graph API connection offers the following features:
Use Cases
This section provides a curated library of common scenarios where Microsoft Graph API can retrieve data and display it on your page. Learn how to Get Started with Use Cases.
Other Settings
- Date/Time Format - lets you customize how dates and times are displayed. For more details, see How to Use Custom Date and Time Formats with ShortPoint Design Elements.
- Flatten Results - lets you simplify complex data structures by removing nested layers, making the data easier to work with.
- Items Limit - lets you set the maximum number of items displayed in your Design Element.
Advanced Settings
- Enable Advanced Settings - displays advanced settings when you toggle this switch on.
- Custom headers - You can append custom header parameters using JavaScript. For example, you can pass "origin" to allow Cross-Origin Resource Sharing (CORS) for your service. Learn more about the Custom Headers function.
- Change Parameters - You can pass parameters to the URL with JavaScript. For example, you can pass the logged-in User ID. Learn more about the Change Parameters function.
- Change Path - You can modify the Service URL Path using JavaScript. For example: https://service.com/sales, where "sales" changes dynamically based on the logged-in user's department. Learn more about the Change Path function.
- Map Results - If your API doesn't return an array of result items (which ShortPoint expects), use this function to transform the data into the proper format for ShortPoint. Learn more about the Map Results function.
Performance and Caching
Enable Partial Loading - This feature comes enabled by default. When the connection returns more than 20 results, partial loading activates automatically. Additional results will load as the user scrolls. Learn more about the Partial Loading function.
Cache Options - choose from the following:
- Smart Cache+ (Recommended) - This feature allows the element to load quickly from cached data. Once the page finishes loading, it automatically fetches and displays the most recent data in the background.
- Cache for a Set Period of Time - This option lets you specify how long to keep cached data. The cached data will be displayed until the set time period expires, after which the latest data will be retrieved.
- Disable Caching - This option disables all caching on your page, which means the page will always fetch fresh data directly from the source.
Learn more about these caching options and how to improve ShortPoint performance on your SharePoint sites.
List of Common Use Cases
The Microsoft Graph API connection type offers numerous applications for SharePoint pages. Here are detailed tutorials for the most common use cases.
GROUPS
- Groups I Belong To - shows all the groups the current user is a part of. Check out How to Create a List of All the Groups You are Part of to learn more.
- Members of a Group - shows all the members of a particular SharePoint group. Check out How to List All the Members of a Group in SharePoint to learn more.
- Children in a Group's Drive Item (Folder) - shows all the files in a SharePoint group’s OneDrive folder. Check out How to Show All the Files in a Group’s OneDrive Folder to learn more.
ONEDRIVE
- My Recent One Drive Items - show all the items in the current user's OneDrive that have been recently modified. Go to How to Show Your Most Recent OneDrive Items to learn more.
Related articles:
