创建删除页面

  • 项目

可以通过在应用中支持删除和修改选项来扩展和增强用户体验。 Teams 使用户能够重命名或删除频道或群组选项卡，并且你可以允许用户在安装后重新配置选项卡。 此外，选项卡删除体验为用户提供了删除后选项以删除或存档内容。

注意

本主题反映 Microsoft Teams JavaScript 客户端库版本 2.0.x (TeamsJS) 。 如果使用的是早期版本，请参阅 TeamsJS 库概述 ，获取有关最新 TeamsJS 与早期版本之间的差异的指导。

使选项卡可在安装后重新配置

manifest.json 定义选项卡的特性和功能。 选项卡实例 canUpdateConfiguration 属性采用布尔值，该值指示用户是否可以在创建选项卡后修改或重新配置选项卡。 下表提供了属性详细信息：

名称 类型 最大大小 必需 说明
canUpdateConfiguration Boolean 一个值，该值指示创建后用户是否可以更新选项卡配置的实例。 默认值为“true”。

将选项卡上传到频道或群组聊天时，Teams 会为选项卡添加右键单击下拉菜单。可用选项由 canUpdateConfiguration 设置确定。 下表提供了设置详细信息：

canUpdateConfiguration true false 说明
设置 √ 页面 configurationUrl 在 iFrame 中重新加载，允许用户重新配置选项卡。
重命名 √ √ 用户可以更改选项卡名称，因为它显示在选项卡栏中。
删除 √ √ removeURL如果属性和值包含在配置页中，则删除页将加载到 iFrame 中并显示给用户。 如果未包含删除页，则会向用户显示确认对话框。

为应用程序创建选项卡删除页

可选删除页是你托管的 HTML 页面，在删除选项卡时显示。 删除页 URL 由 setConfig() 方法指定 (或 setSettings() 之前，在配置页中) TeamsJS v.2.0.0 之前。 与应用中的所有页面一样，删除页必须符合 Teams 选项卡先决条件。

注册删除处理程序

（可选）在删除页逻辑中，可以在用户删除现有选项卡配置时调用 registerOnRemoveHandler((RemoveEvent) => {} 事件处理程序。 当用户尝试删除内容时，该方法将采用 RemoveEvent 接口，并在处理程序中执行代码。 该方法用于执行清理操作，例如删除支持选项卡内容的基础资源。 一次只能注册一个删除处理程序。

RemoveEvent 接口用两种方法描述对象：

  • notifySuccess() 函数是必需的。 它指示基础资源删除成功，并且可以删除其内容。

  • notifyFailure(string) 函数是可选的。 它指示删除基础资源失败，并且无法删除其内容。 可选字符串参数指定失败的原因。 如果提供，则会向用户显示此字符串；否则会显示一般性错误。

使用 getConfig() 函数

可以使用 getConfig() 以前 getSettings()) (来分配要删除的选项卡内容。 函数 getConfig() 返回一个 promise，该承诺使用 Config 对象进行解析，并提供可检索的有效设置属性值。

使用 getContext() 函数

可以使用 getContext() 获取运行帧的当前上下文。 函数 getContext() 返回使用 Context 对象解析的 promise。 Context 对象提供可在删除页逻辑中使用的有效 Context 属性值，以确定要显示在删除页中的内容。

包括身份验证

在允许用户删除选项卡内容之前，需要进行身份验证。 上下文信息可用于帮助构造身份验证请求和授权页面 URL。 请参阅选项卡的 Microsoft Teams 身份验证流程。 确保选项卡页中使用的所有域都列在应用清单的数组中 validDomains 。

以下示例是选项卡删除代码块的示例：

<body>
  <button onclick="onClick()">Delete this tab and all underlying data?</button>
  <script>
    await microsoftTeams.app.initialize();
    pages.config.registerOnRemoveHandler((removeEvent) => {
      // Here you can designate the tab content to be removed and/or archived.
        const configPromise = pages.getConfig();
        configPromise.
            then((configuration) => {
                configuration.contentUrl = "...";
                removeEvent.notifySuccess()}).
            catch((error) => {removeEvent.notifyFailure("failure message")});
    });

    const onClick() => {
        pages.config.setValidityState(true);
    }
  </script>
</body>

当用户从选项卡的下拉菜单中选择“删除”时，Teams 会将配置页中分配的可选removeUrl页面加载到 iFrame 中。 向用户显示一个加载了函数的 onClick() 按钮，该函数调用 pages.config.setValidityState(true) 并启用删除页面 iFrame 底部显示的“ 删除 ”按钮。

执行删除处理程序后，removeEvent.notifySuccess() 或 removeEvent.notifyFailure() 将通知 Teams 内容删除结果。

注意

  • 为了确保授权用户对选项卡的控制不会受到禁止，Teams 在成功和失败的情况下都删除了该选项卡。
  • 调用 registerOnRemoveHandler 事件处理程序后，在 15 秒内响应 方法。 应用必须调用 setValidityState(true) 才能启用 “删除 ”按钮，并调用删除处理程序。
  • 当用户选择“删除”时，无论操作是否已完成，Teams 都会在 30 秒后删除该选项卡。

后续步骤

移动设备上的选项卡

另请参阅