Try ShortPoint nowNOTEThis solution is in development and will be released soon.
Want to display all the team members from a particular department in your organization? The Microsoft Graph API connection makes this super easy. You can use the "Filter Users by Department" use case to pull this off. We've put together a simple step-by-step guide below that'll walk you through the whole process.
TABLE OF CONTENTS
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 (User.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:
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.
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 Filter Users by Department Use Case
Search for Filter Users by Department and select it:
You will be prompted to fill in details under Query Parameters. Write the Department you want to get the users from:
Then, click Run Query:
Under Response Review, you can view the results of the query. Check if it’s pulling the right data for you:
Once satisfied, 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 names of the users as the titles.
- #jobTitle in the Subtitle field - shows the job titles of the users as the subtitles.
- #mail in the Description field - shows the email of the users as the description.
- #profileImage in the Image field - displays the image of the users.
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 can now display team members by department, making it easier for your site viewers to find the teammate they’re looking for.
TIPWant to search for a specific team member? The Search & Filter Toolbar is exactly what your users need! With it, they can quickly search, sort, and filter through team members in seconds. Ready to give it a try? Check out Getting Started: The Basics of the Search & Filter Toolbar.
Related articles:
