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

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

例

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

選択したチャネルの取得

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

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

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

イベント

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

テンプレート

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

次の例は、テンプレートの使用方法を 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 つを持っている必要があります。

認証

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

キャッシュ

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

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

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

ローカリゼーション

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