Edit

Microsoft Teams Channel Picker component in Microsoft Graph Toolkit

Caution

The Microsoft Graph Toolkit is deprecated. The retirement period begins September 1, 2025, with full retirement planned for August 28, 2026. Developers should migrate to using the Microsoft Graph SDKs or other supported Microsoft Graph tools for building web experiences. For more information, see the deprecation announcement.

You can use the mgt-teams-channel-picker component to enable searches for Microsoft Teams channels associated with a user. The component can search all teams the user has joined, and each channel in those teams.

Example

The following example shows the mgt-teams-channel-picker component. Start searching for a channel or team to see the results render.

Getting the selected channel

Use the selectedItem property to retrieve the currently selected channel and parent team. This value will be null if no channel has been selected. selectedItem contains two properties: channel (MicrosoftGraph.Channel) and team (MicrosoftGraph.Team).

const channelPicker = document.querySelector("mgt-teams-channel-picker");
console.log(channelPicker.selectedItem.channel);
console.log(channelPicker.selectedItem.team);

Selecting a channel

Use the selectChannelById(channelId: string) method to programmatically select a channel.

Note: the Teams channel picker only supports single channel selection.

const channelPicker = document.querySelector("mgt-teams-channel-picker");
const channelId = "some-channel-id";
channelPicker.selectChannelById(channelId);

Note: The provided channel (and subsequent ID) must belong to a team that the authenticated user has joined.

CSS custom properties

The mgt-teams-channel-picker component defines the following CSS custom properties.



.teams-channel-picker {
  --channel-picker-input-border: 2px rgba(255, 255, 255, 0.5) solid; /* sets all input area border */

  --channel-picker-input-background-color: #1f1f1f; /* input area background color */
  --channel-picker-input-background-color-hover: #008394; /* input area border hover color */
  --channel-picker-input-background-color-focus: #0f78d4; /* input area border focus color */

  --channel-picker-dropdown-background-color: brown; /* channel background color */
  --channel-picker-dropdown-item-text-color: #fff;
  --channel-picker-dropdown-item-background-color-hover: #333d47; /* channel or team hover background */
  --channel-picker-dropdown-item-text-color-selected: #0f78d4; /* selected channel background color */

  --channel-picker-color: white; /* input area border focus color */
  --channel-picker-arrow-fill: #ffffff;
  --channel-picker-input-placeholder-text-color: #f1f1f1; /* placeholder text color */
  --channel-picker-input-placeholder-text-color-hover: rgba(
    255,
    255,
    255,
    0.8
  ); /* place holder text focus color */
  --channel-picker-input-placeholder-text-color-focus: rgba(
    255,
    255,
    255,
    0.8
  ); /* place holder text focus color */

  --channel-picker-search-icon-color: yellow;
  --channel-picker-close-icon-color: yellow;
  --channel-picker-down-chevron-color: yellow;
  --channel-picker-up-chevron-color: yellow;
}

To learn more, see styling components.

Events

Event When is it emitted Custom data Cancelable Bubbles Works with custom template
selectionChanged Fires when the user makes a change in the selection of a channel The currently selected item as { channel: channel, team: team} No No Yes

For more information about handling events, see events.

Templates

mgt-teams-channel-picker supports several templates that you can use to replace certain parts of the component. To specify a template, include a