Skip to content

MyTeams control

This control show all Teams the user has access (joined),and for each Team the user can see the channels has permissions and quick open the channel or if callback is specified can return the Team Id and Channel Id for use in App.

The user can quick see the members and owner of the group. This control uses the People component from mgt-toolkit that can be configured to show Person Card on hover. Please refer to required dependencies section to install the mgt-spfx library in your tenant.

Here is an example of the control:




Required dependencies

In order to resolve an issue using controls from mgt-toolkit within SharePoint Framework solutions, the mgt team created an SPFx library that should be deployed to your tenant. For the MyTeams control to work, we had no other option but to add a dependency on the mgt-spfx library. More information about mgt-spfx is available here

Simply download the mgt-spfx-2.2.0.sppkg file from the link below and deploy to the SharePoint app catalog, making the solution available to all sites in the tenant.

mgt-spfx direct download link


How to use this control in your solutions

  • Check that you installed the @pnp/spfx-controls-react dependency. Check out the getting started page for more information about installing the dependency.
  • Import the control into your component:
import { MyTeams } from "@pnp/spfx-controls-react/lib/MyTeams";
  • Use the MyTeams control in your code as follows:
            title="My Teams"
            title="My Teams"
  • The onSelectedChannel callback returns the teamId and ChannelId and can be implemented as follows:
 const  onSelectedChannel = (teamsId: string, channelId: string) => {
        console.log("TeamsId", teamsId);
        console.log("ChannelId", channelId);


The MyTeams control can be configured with the following properties:

Property Type Required Description
webPartContext WebPartContext yes The context object of the SPFx loaded webpart
title string no Title of WebPart
themeVariant IReadonlyTheme no themeVariant
enablePersonCardInteraction boolean no Show Person Card on hover
onSelectedChannel (teamId:string,channelId:string) => void; no callBack with TeamId and ChannelId Selected

MSGraph Permissions required

This control required the flowing scopes :

at least : Team.ReadBasic.All, Channel.ReadBasic.All, TeamMember.Read.All and all Scopes used by mgt-people, and Person-Card components