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

项目
11/07/2024

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

示例

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

HTML
React

获取所选频道

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`

通过