Try ShortPoint nowThis article will demonstrate how to customize the Teams Design Element and showcase all its features. Adding the Teams Design Element to your SharePoint page will allow you to:
- View your teams;
- View teams from the entire organization;
- Open teams in Microsoft Teams Desktop App or Microsoft Teams Online;
- Open the team's Documents Library;
- View team members and open member's Delve Profiles;
- View team channels and tabs and open them in the Microsoft Teams Desktop App;
- and View my tasks and open tasks in Microsoft Planner.
TABLE OF CONTENTS
- Prerequisites
- Step-by-step Tutorial
- Teams Features
Prerequisites
- You must have the latest version of ShortPoint SPFx installed on your SharePoint environment.
- You must be a ShortPoint Designer with an active license.
Step-by-step Tutorial
Follow the two-part tutorial to add the Teams Design Element to your SharePoint page successfully:
Part 1: Integrate ShortPoint with Microsoft Graph
The Teams Design Element uses Microsoft Graph to get Teams data from your organization. Before adding Teams Design Element to your SharePoint Page, you must connect ShortPoint to Microsoft Graph. Click Get Started to learn how:
NOTEIf you have already connected ShortPoint with Microsoft Graph, click Reconnect to integrate Teams Design Element into your SharePoint pages. You can check out Setting up Microsoft Graph Integration for SharePoint Online to learn more.
Step 1: Open the ShortPoint Dashboard
- Click the ShortPoint icon:
- Select Dashboard from the drop-down.
Step 2: Open the Integrations page
- Click Integrations.
Step 3: Connect Microsoft Graph with ShortPoint
- Under Microsoft Graph, click Connect.
- Then, log in with your Microsoft 365 Tenant Administrator account.
- If the login was successful, grant ShortPoint the list of permissions that appear. Click Accept.
- Go back to your SharePoint page.
NOTEIf you have already connected ShortPoint with Microsoft Graph, click Reconnect to integrate Teams Design Element into your SharePoint pages. You can check out Setting up Microsoft Graph Integration for SharePoint Online to learn more.
You may now proceed to Part 2 of this tutorial.
Part 2: Insert the Teams Design Element
Click Get Started to learn how to add the Teams Design Element on your SharePoint page:
NOTECheck out Teams Features to learn more about the customizable features you can modify.
Step 1: Edit the ShortPoint Web Part
- Click Edit:
- Click the cross icon to close the Tool box.
- Select the ShortPoint tag.
- Click the Edit properties icon.
Step 2: Switch to Grid Mode
NOTEThe Teams Design Element is currently only available in Grid Mode.
- Click the Switch to Grid Mode icon:
Step 3: Insert the Teams Design Element
- Click the plus icon to see the Library of Design Elements.
- Use the search bar to look for Teams and select it.
Step 4: Customize the content of the Teams
- Click the Show Teams For drop-down and choose any of the following:
- My Teams - allows you to display Teams that you are a part of;
- All Teams of organisation - allows you to display all the Teams in your organization.
NOTECheck out Teams Features to learn more about the customizable features you can modify.
Step 5: Customize the look of the Teams Design Element
- Navigate to the Advanced tab.
- Customize the design of the Teams Design Element according to your preferences.
NOTECheck out Teams Features to learn more about the customizable features you can modify.
Step 6: Save
- Click Preview to see how the Teams Design Element will look on your page.
- Once satisfied, click Insert.
- Click the eye icon to see your page in real-time.
- Click Save to apply all your changes.
Teams Features
Below are the tabs you can find in the Teams Settings window:
A. Design Tab
The Design tab allows you to configure the content of the Teams Design Element. It has the following options:
 | Show Teams For | allows you to filter the teams to display You can choose to display:
|
 | Show Teams Icon | allows you to display the teams icons. If no icon is assigned, ShortPoint will use the first letter of the teams as icons. |
 | Expand Tabs | when enabled, this will allow you to expand and see the tabs from each team channel. |
 | Show Completed Tasks | by enabling this option, you will be able to see all your tasks including the completed ones. |
 | Height | allows you to set the height of the Teams Design Element. |
B. Visibility Tab
The Visibility tab allows you to control who can see the Teams Design Element and the devices that can access it.
NOTECheck out Managing Visibility of ShortPoint Design Elements to learn more about it.
C. Advanced Tab
The Advanced tab allows you to further customize the look of the Teams Design Element. It has the following options:
 | Team Hover Color | allows you to choose the team item background color when the mouse hovers over it. |
 | Search Box Label | allows you to set a custom label for your Teams Search Box. By default, the search box label is "Search Teams...". |
 | Header Background Color | allows you to choose the background color of the header container in the team detailed view. |
 | Header color | allows you to choose the text color of the header for the team's detailed view. |
 | Bold header | when enabled, it will turn the header style into bold. |
 | Sub-Header Color | allows you to choose the text color of the sub-header for the team's detailed view. |
 | Bold Sub-Header | when enabled, it will turn the sub-header style into bold. |
D. Custom CSS Tab
This tab allows you to use your own CSS to customize the Teams Design Element.
NOTECheck out our support article on How to Insert Custom CSS into a Page Builder Element? (Basic Tutorial) to know more about Custom CSS.
Congratulations! You can now add Teams to your SharePoint page.
Related articles:
- Setting up Microsoft Teams Integration for ShortPoint Online
- Setting Up Microsoft Graph Integration For Teams
- Microsoft Teams Integration FAQ
