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

若要了解详细信息，请参阅 设置组件样式。

事件

事件 何时发出 自定义数据 可取消 泡沫 使用自定义模板
selectionChanged 当用户对频道选择进行更改时触发 当前选择的项目作为 { channel: 频道, team: 团队} 否 否 是

有关处理事件的详细信息，请参阅 事件。

模板

mgt-teams-channel-picker 支持多个 模板 ，可用于替换组件的某些部分。 若要指定模板，请在组件中包含元素 <template> ，并将 设置为 data-type 以下值之一。

数据类型 数据上下文 说明
加载 null：无数据 正在向 Microsoft Graph 发出请求时用于呈现选取器状态的模板。
error 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，用户必须至少具有列出的权限之一。

配置 权限 API
默认 Team.ReadBasic.All、TeamSettings.Read.All、TeamSettings.ReadWrite.All、User.Read.All、User.ReadWrite.All /me/joinedTeams
默认 Team.ReadBasic.All TeamSettings.Read.All、TeamSettings.ReadWrite.All /teams/${teamId}/photo/$value
默认 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