Microsoft Graph 工具包中的Microsoft Teams 通道选取器组件

可以使用 mgt-teams-channel-picker 组件来启用与用户关联的Microsoft Teams 频道搜索。 该组件可以搜索用户已加入的所有团队，以及这些团队中的每个频道。

示例

以下示例显示了 组件 mgt-teams-channel-picker 。 开始搜索频道或团队以查看结果呈现。

获取所选频道

selectedItem使用 属性检索当前选定的通道和父团队。 如果未选择通道，此值将为 null。 selectedItem 包含两个属性： channel (MicrosoftGraph.Channel) 和 team (MicrosoftGraph.Team) 。

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，用户必须至少具有列出的权限之一。

身份验证

控件使用身份验证文档中所述的全局 身份验证提供程序。

缓存

组件 mgt-teams-channel-picker 不缓存任何数据。

扩展以获得更多控制

对于更复杂的方案或真正自定义的 UX，此组件在组件扩展中公开了几种 protected render* 替代方法：

本地化

控件公开以下可本地化的变量。 有关如何设置本地化的详细信息，请参阅 本地化组件。