次の方法で共有

Microsoft Graph Toolkit のチャネル ピッカー コンポーネントのMicrosoft Teams

注意

Microsoft Graph Toolkit は非推奨です。 2025 年 9 月 1 日から、2026 年 8 月 28 日に完全な退職が予定されています。 開発者は、Web エクスペリエンスを構築するために、Microsoft Graph SDK またはその他のサポートされている Microsoft Graph ツールを使用して移行する必要があります。 詳細については、 非推奨のお知らせを参照してください。

mgt-teams-channel-picker コンポーネントを使用して、ユーザーに関連付けられているMicrosoft Teamsチャネルの検索を有効にすることができます。 コンポーネントは、ユーザーが参加したすべてのチームと、それらのチームの各チャネルを検索できます。

例

次の使用例では mgt-teams-channel-picker コンポーネントを表示します。 チャネルまたはチームの検索を開始して、結果のレンダリングを確認します。

選択したチャネルの取得

selectedItem プロパティを使用して、現在選択されているチャネルと親チームを取得します。 チャネルが選択されていない場合、この値は null になります。 selectedItem には、 channel (MicrosoftGraph.Channel) と team (MicrosoftGraph.Team) の 2 つのプロパティが含まれています。

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

チャネルの選択

selectChannelById(channelId: string) メソッドを使用して、プログラムによってチャネルを選択します。

注: Teams チャネル ピッカーでは、単一チャネルの選択のみがサポートされます。

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

手記： 指定されたチャネル (およびそれ以降の ID) は、認証されたユーザーが参加したチームに属している必要があります。

CSS カスタム プロパティ

mgt-teams-channel-picker コンポーネントは、以下の CSS カスタム プロパティを定義します。

<mgt-teams-channel-picker
  class="teams-channel-picker"
  person-query="me"
></mgt-teams-channel-picker>

.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;
}

詳細については、「コンポーネントのスタイリング」を参照してください。

イベント

イベント いつ出力されるか カスタム データ キャンセル 泡 カスタム テンプレートを使用する
selectionChanged ユーザーがチャネルの選択に変更を加えたときに発生します { channel: channel, team: team として現在選択されている項目} 不要 不要 はい

イベントの処理の詳細については、「 イベント」を参照してください。

テンプレート

mgt-teams-channel-picker は、いくつかの テンプレート をサポートしており、コンポーネントの特定の部分を置き換えることができます。 テンプレートを指定するには、コンポーネント内に <template> 要素を含め、 data-type を次のいずれかの値に設定します。

データ型 データ コンテキスト 説明
読み込み中 null: データなし Microsoft Graph への要求の実行中にピッカーの状態をレンダリングするために使用されるテンプレートが作成されています。
エラー null: データなし ユーザー検索でユーザーが返されない場合に使用されるテンプレート。

次の例は、 error テンプレートを使用する方法を示しています。

<mgt-teams-channel-picker>
  <template data-type="error">
    <p>Sorry, no Teams or Channels were found</p>
  </template>
</mgt-teams-channel-picker>

Microsoft Graph のアクセス許可

このコンポーネントでは、既定で次の Microsoft Graph API とアクセス許可が使用されます。 呼び出される各 API に対して、ユーザーは、一覧表示されているアクセス許可の少なくとも 1 つを持っている必要があります。

構成 アクセス許可 API
default Team.ReadBasic.All、TeamSettings.Read.All、TeamSettings.ReadWrite.All、User.Read.All、User.ReadWrite.All /me/joinedTeams
default Team.ReadBasic.All TeamSettings.Read.All、TeamSettings.ReadWrite.All /teams/${teamId}/photo/$value
default Channel.ReadBasic.All、ChannelSettings.Read.All、ChannelSettings.ReadWrite.All /teams/${id}/channels

認証

この制御は、認証ドキュメント に記述されているグローバル認証プロバイダーを使用します。

キャッシュ

mgt-teams-channel-picker コンポーネントはデータをキャッシュしません。

より制御を行うために拡張する

より複雑なシナリオや真にカスタムの UX の場合、このコンポーネントでは、コンポーネント拡張機能でオーバーライドするためのいくつかの protected render* メソッドが公開されています。

メソッド 説明
renderSelected 選択したチームとチャネルを入力ボックスにレンダリングします。
renderInput 入力ボックスをレンダリングします。
renderDropdown ドロップダウンをレンダリングします。
renderDropdownList ドロップダウン内の項目を再帰的にレンダリングします。
renderItem ドロップダウン リストでチームまたはチャネルをレンダリングします。
renderHighlightedText 入力クエリを強調表示して、チャネル テキストをレンダリングします。
renderLoading 読み込みドロップダウンの状態をレンダリングします。
renderError ドロップダウン エラーの状態をレンダリングします。

ローカリゼーション

コントロールは、ローカライズできる次の変数を公開します。 ローカライズを設定する方法の詳細については、「 コンポーネントのローカライズ」を参照してください。

文字列名 既定値
closeButtonAriaLabel remove the selected channel
inputPlaceholderText Select a channel
loadingMessage Loading...
noResultsFound We didn't find any matches.
photoFor Teams photo for
teamsChannels Teams and channels results
  • Last updated on