How can we help you today?

Getting Started with Teams Design Element

Now you can use ShortPoint to view company teams directly on your SharePoint page and Microsoft Teams tabs.

Short Video
Full Feature Demo

Adding Microsoft Teams to SharePoint and Office 365 is easy and straightforward with ShortPoint. Starting with ShortPoint version 6.7.x.x, you will be able to integrate Microsoft Teams in your SharePoint page and Teams tabs to:

  • View your teams;
  • View teams from the entire organization;
  • Open teams in Microsoft Teams Desktop App or in Microsoft Teams Online;
  • Open 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;
  • View my tasks and open tasks in Microsoft Planner.


Before You Start

Integrate ShortPoint with Microsoft Graph

Teams Design Element uses Microsoft Graph to get Teams data from your organization. Prior to adding Teams Design Element into your SharePoint Page or Teams tab, you have to connect ShortPoint to Microsoft Graph.

For SharePoint On-Premise/Online:

  1. From your Site Contents navigate to ShortPoint Dashboard and click Integrations.  
  2. If you didn't connected Microsoft Graph before, click connect and logging with you Office 365 Tenant Administrator account.
  3. If the login was successful, you have to grant ShortPoint the list of permissions that appears by clicking Accept.

Note: If you already Connected Microsoft Graph before ShortPoint version 6.7.x.x, you have to click Reconnect in order to be able to integrate Teams Design Element into your SharePoint pages. Follow this article to find out more.

For Microsoft Teams:

  1. From your ShortPoint tab, select Settings on your dropdown menu. This will open ShortPoint in edit mode.
  2. Press the cogwheel settings, go to the Integrations tab, and click Microsoft Graph. Get a token by entering your Office 365 Tenant Administrator account and accepting permissions. 
  3. Copy the token, paste on the Graph Token field, and hit Connect. You can check this support article for detailed instructions on establishing the integration.

ShortPoint Teams Integration Supports:

  • SharePoint Online (Office 365)
  • SharePoint 2019 On-Premise (limited functionality)
  • Microsoft Teams

The following points will describe the full functionality of Teams Design Element for SharePoint Online (Office 365) and Microsoft Teams.

How to Add Teams Design Element

Step 1: Insert Teams Design Element

Teams Design Element can be easily added to your SharePoint pages using ShortPoint Page Builder.

Add to SharePoint Page

Edit your SharePoint page and add a ShortPoint web part. Open Page builder by clicking the plus icon then select the Teams design element.

  • In a Modern page:

  • In a Classic page:

Add to Microsoft Teams

Go to your ShortPoint tab and choose settings from the dropdown. Press the plus icon to open the design element options and select Teams.

Step 2: Edit Teams settings

Complete the fields in the Teams design element according to what information you want to display and what available settings you want to apply.

Basic Settings

Configure your Teams Design Element as you wish. You can control privacy settings, show or hide the icons, modify the size of the element, completed tasks, expand tabs, etc.:

Filter Teams

In Teams design element you can choose to display My Teams or All Teams from the organization.  By default, My Teams will be selected, meaning that the Teams Design Element will only display teams where the current user is a member.

However, if you choose All Teams of organization, users will see all the teams grouped in two sections:

  • teams I'm member of on the top, and
  • teams I'm not member of at the bottom

Show Teams Icon

This option is by default enabled and it will generate dynamic icons for each team using the first letter of each team's name.

Expand tabs

Enabling this option will allow users to expand and see the tabs from each team channel: as well as to navigate to the channel tabs directly in the Microsoft Teams Desktop App:

And to navigate to the channel tabs directly in the Microsoft Teams Desktop App:

Show Completed Tasks

By default, this option is disabled meaning that the users will be able to see only the active tasks (not completed). By enabling this option, users will be able to see all their tasks including the completed ones.


Set the appropriate height for your Teams Design Element in order to align it with the other elements on the page.

Advanced Settings

Add some extra styling to your Teams Design Element:

Team Hover Color

You can choose the team item background color when the mouse is over it:

Search Box Label

Set a custom label for your Teams Search Box. By default, the search box label is "Search Teams...".

Heading and Sub Heading Styles

These settings will be applied to the header container of the Teams detailed view. The Teams detailed view will appear after you click on a specific team.

You can set a custom color for your header background and also set colors and font-weight for your headers.

Step 3: Insert and Publish

You can choose to preview how your Teams content will be displayed. When you achieve your desired result, hit Insert, and Publish your changes.

Your page or tab now has Teams content readily available for your users.

Related articles:

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 5 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more