将通知替换为自适应卡以提高协作

在本文中，我们会将来自“员工想法”应用的通知从 Teams 中基于 HTML 的消息更改为 Teams 中的自适应卡片。 目前，Teams 通知从应用内部启动，并以发布到 Teams 渠道的消息形式发送。 我们将用自适应卡片通知替换此 Teams 渠道通知，该通知将使用 Power Automate 流启动。

观看此视频，了解如何使用自适应卡片替换通知：

先决条件

为了完成本课，我们需要能够登录到 Microsoft Teams，该功能将作为精选 Microsoft 365 订阅的一部分提供，并且还需要具有“员工想法”示例应用。

创建 Power Automate 流以生成自适应卡片

首先，我们来创建一个流，以用自适应卡片替换当前通知。

1. 打开 Power Apps for Teams 个人应用并找到“员工想法”应用。 为了便于使用，您可以右键单击 Teams 中的 Power Apps 徽标，并选择弹出应用以在其自己的窗口中使用 Power Apps Studio。

2. 选择“想法”应用，以在 Teams 中打开 Power Apps Studio 并开始编辑该应用。

3. 在顶部菜单中，选择设置选项右侧的垂直省略号。 您将看到以下三个选项 - Power Automate、集合和变量。

4. 选择 Power Automate 以打开右侧的数据边栏菜单。 您将看到所有可用的流。

5. 选择创建新流。 您将在单独的浏览器窗口中看到 Power Automate Studio。 在继续之前，请检查以确保您处于正确的团队环境中，其中包含您要尝试更改的应用。

6. 在左上角区域中，您会看到流的名称为无标题。 选择该文本以将名称更改为员工想法自适应卡片到 Teams。

7. 添加 Power Apps 触发器以允许我们从 Power Apps 触发流，并添加要从 Power Apps 传递到 Power Automate 的值。

8. 选择 +新建步骤以添加新步骤 > 选择“按 ID 获取行”操作，并针对“行 ID”> 选择“值”字段区域以显示“动态内容”菜单 > 选择在 Power Apps 中询问。 此操作将在 Power Apps 触发器中创建变量，以允许将数据从应用传递到 Power Automate。

   

9. 接下来，添加两个初始化变量操作。 这些操作将用于存储来自 Power Apps 的信息，并存储指向“想法”应用的链接，该链接将在自适应卡片中用于直接链接到记录。 按如下所示重命名每项操作：

• 初始化变量 - 卡标题

  • 名称 = varCardTitle

  • 类型 = 字符串

• 初始化变量 - 市场活动

  • 名称 = varCampaign

  • 类型 = 字符串

1. 将每个“类型”值都设置为“字符串”，并为每个值添加一个名称：分别为 varCardTitle、varCampaign 和 varReviewIdeasLink。

2. 对于“卡标题”和“市场活动”操作，选择“值”字段区域以显示“动态内容”菜单，然后选择在 Power Apps 中询问。 此配置将在 Power Apps 触发器中创建变量，以允许将数据从应用传递到 Power Automate。

   

3. 对于“查看想法链接”操作，我们将使用指向该应用的链接。 要找到此链接，转到“想法”应用所在的团队，复制在其中安装应用的选项卡的链接。 您可以通过打开选项卡，然后选择右上角的省略号 (…) 来复制指向选项卡的链接。

   

   您的 URL 看起来类似于以下示例：

   https://teams.microsoft.com/l/entity/GUID/_djb2_msteams_prefix_1434832750?context=%7B%22subEntityId%22%3Anull%2C%22channelIdGUIDthread.tacv2%22%7D&groupId=GUID&tenantId=GUID

4. 要继续，复制 context= 之后的 URL 部分，使用诸如 https://www.urldecoder.org/ 等 URL 解码器对文本进行解码。

   

5. 复制解码后的文本并返回到 Power Automate 流。

6. 向流添加新步骤来初始化变量。

   • 将此步骤重命名为“初始化变量 - 查看想法链接”

   • 设置名称 = varReviewIdeasLink

   • 选择类型 = 字符串

   • 输入值 = {粘贴从上面的 url 复制的文本}

   

7. 添加带有“撰写”操作的新步骤，在“输入”字段中粘贴以下代码：

   replace(replace(replace(variables('varReviewIdeasLink'),'{','%7B'),'"','%22'),'}','%7D')
   

   

8. 添加在聊天或渠道中发布自适应卡片操作。 将发布身份值设置为用户，将发布位置值设置为渠道。 在团队和渠道字段中，选择要将自适应卡片发布到的团队和渠道。

9. 以下示例代码只是一个示例，您可以设计自己的卡片。

   小费

   您可以在 https://adaptivecards.io/ 中了解有关自适应卡片的更多信息，并在 https://adaptivecards.io/designer/ 内的可视化编辑器中设计自己的卡片。

   在自适应卡片字段中，复制并粘贴以下内容：

   {
   
   "type": "AdaptiveCard",
   
   "body": [
   
   {
   
   "type": "TextBlock",
   
   "size": "large",
   
   "weight": "Bolder",
   
   "text": "@{variables('varCardTitle')}",
   
   "wrap": true
   
   },
   
   {
   
   "type": "TextBlock",
   
   "text": "A new idea has been submitted!",
   
   "wrap": true
   
   },
   
   {
   
   "type": "TextBlock",
   
   "text": "For the campaign: @{variables('varCampaign')}",
   
   "wrap": true
   
   }
   
   ],
   
   "actions": [
   
   {
   
   "type": "Action.OpenUrl",
   
   "title": "View @{variables('varCardTitle')}",
   
   "url":
   "https://teams.microsoft.com/l/entity/b7fad6ce-2e23-4aba-b209-859a59ca230e/_djb2_msteams_prefix_1434832750?context=@{outputs('Compose')}"
   
   }
   
   ],
   
   "\$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
   
   "version": "1.2"
   
   }
   

10. 在“主题”字段中，复制并粘贴以下代码：

    New idea submitted for @{variables('varCampaign')} Campaign
    

    

此操作将设置自适应卡片的特性并在自适应卡片中使用 Power Apps 中的变量。

保存并测试流，以确保其正常工作。 通过从测试流边栏中进行手动选择，您可以输入“卡片标题”、“市场活动”和“查看想法链接”变量。

将流添加到“想法”应用

确认流正常工作后，您可以将其添加到“想法”应用中。

1. 返回到编辑“想法”应用所在的 Power Apps Studio。

2. 在左侧的树视图中，选择市场活动详细信息屏幕。

3. 接下来，选择“提交想法”按钮（在树视图中名为 btnCampaignIdeaControls_Submit）。 我们会将创建的 Power Automate 流添加到此按钮。

   

4. 首先，我们将复制当前在按钮的 OnSelect 属性中的代码。 将 Power Automate 流添加到 Power Apps 内的控件中所面临的一个问题是控件上的任何现有代码都将被删除。 要解决此问题，请将复制的代码粘贴到文本编辑器（如记事本）中，然后编辑代码以在完成后粘贴回到 OnSelect 属性中。 粘贴代码后，请确保添加了所有代码。

5. 在按钮仍处于选中状态的情况下，选择上方菜单栏中“设置”右侧的垂直省略号。 选择 Power Automate，它将显示数据边栏。 您现在应该会在“可用的流”部分中看到员工想法自适应卡片到 Teams 流。 选择它以将它添加到按钮中。

   现在，您需要编辑粘贴的代码。 查找并删除以下文本：

   Notify(
   
   If(tglIdeaDetailControls_PostToTeams.Value,
   
   If(
   
   IsError(
   
   MicrosoftTeams.PostMessageToChannelV3(
   
   gblSettingTeamId,
   
   gblSettingNotificationChannelId,
   
   {
   
   content: Concatenate(
   
   "A new employee idea has been created!",
   
   "\<br\>\<br\>",
   
   "\<b\>Description\</b\>",
   
   "\<br\>",
   
   locFormRecordIdea.Description
   
   ),
   
   contentType: "html"
   
   },
   
   {subject: locFormRecordIdea.Title}
   
   )
   
   ),
   
   "Message was not posted. You may not have access to the Team and/or Channel.
   Contact the app administrator.",
   
   NotificationType.Warning
   
   )
   
   )
   
   );
   

6. 在删除的文本所在的位置，粘贴以下代码：

   If(tglIdeaDetailControls_PostToTeams.Value,
   EmployeeIdeasAdaptiveCardToTeams.Run(locFormRecordIdea.Title,gblSelectedRecordCampaign.Title,locFormRecordIdea.'Employee
   Idea',locFormRecordIdea.'Employee Idea'));
   

   此代码包含对我们刚才添加的流的引用以及要传递给 Power Automate 的变量。

7. 复制整个已编辑的文本并将其粘贴回到“提交检查”按钮的 OnSelect 属性中。 确认按钮上没有错误。

更新应用以使用“自适应卡片”链接打开实际记录

现在，我们将更新应用以接受超链接参数并支持到记录的深度链接。

自适应卡片有一个链接，可以将我们带回到创建的想法记录。 我们需要对应用的加载页面进行一些更改以加载适当的数据。

1. 在树视图中，选择“加载屏幕”。 然后选择容器 conLoading_HiddenHelper 并在其下选择 tmrLoadingDelay。

2. 选择计时器控件的 OnTimerEnd 属性，注意有一个名为 If(gblAppLoaded,----------) 的 IF 条件。

3. 将整个 IF 条件替换为以下 IF 条件（在原始检查的基础上添加了更多检查）。

   备注

   此代码经过了编辑以包含到特定想法记录的深度链接，以防从自适应卡片打开应用。 如果我们希望它直接深度链接到特定的想法记录，则需要在屏幕加载之前定义一些集合/值

   If(
   
   gblAppLoaded,
   
   If(
   
   !IsBlank(Param("subEntityId")), //check if the parameter is blank or not, if
   not, populate the relevant variables and collections to make deep linking work
   
   Set(
   
   gblRecordCampaignIdea,
   
   LookUp(
   
   'Employee Ideas',
   
   'Employee Idea' = GUID(Param("subEntityId"))
   
   )
   
   );
   
   ClearCollect(
   
   colResponses,
   
   Filter(
   
   'Employee Idea Responses',
   
   Idea.msft_employeeideaid = gblRecordCampaignIdea.msft_employeeideaid
   
   )
   
   );
   
   ClearCollect(
   
   colFiles,
   
   Filter(
   
   'Employee Idea Files',
   
   'Employee Idea Files'[@Idea].'Employee Idea' = gblRecordCampaignIdea.'Employee
   Idea'
   
   )
   
   );
   
   Set(
   
   gblSelectedRecordCampaign,
   
   LookUp(
   
   'Employee Idea Campaigns',
   
   'Employee Idea Campaign' = gblRecordCampaignIdea.Campaign.'Employee Idea
   Campaign'
   
   )
   
   );
   
   ClearCollect(
   
   colIdeas,
   
   Filter(
   
   'Employee Ideas',
   
   'Employee Ideas'[@Campaign].'Employee Idea Campaign' =
   gblSelectedRecordCampaign.'Employee Idea Campaign'
   
   )
   
   );
   
   If( //check if the user is on a mobile device or desktop/web and redirect the
   user accordingly to deep link into the specific idea
   
   Or(
   
   Param("hostClientType") = "android",
   
   (Param("hostClientType") = "ios" And Parent.Width \< 800)
   
   ),
   
   Navigate(
   
   'Campaign Detail Screen',
   
   ScreenTransition.None,
   
   {
   
   locVisibleCampaignIdea: true,
   
   locVisibleCampaignView: false,
   
   locCreateNewIdea: false
   
   }
   
   ),
   
   Navigate(
   
   'Mobile Idea Screen',
   
   ScreenTransition.None,
   
   {
   
   locVisibleCampaignIdea: true,
   
   locVisibleCampaignView: false,
   
   locCreateNewIdea: false
   
   }
   
   )
   
   ),
   
   If( //if the parameter is blank, check if the user is on a mobile device or
   desktop/web and redirect the user accordingly
   
   Or(
   
   Param("hostClientType") = "android",
   
   (Param("hostClientType") = "ios" And Parent.Width \< 800),
   
   tglAdmin_Mobile.Value// Studio Testing
   
   ),
   
   Navigate(
   
   'Mobile Landing Screen',
   
   ScreenTransition.None,
   
   {locShowSetup: false}
   
   ),
   
   Navigate(
   
   'Campaign Summary Screen',
   
   ScreenTransition.None,
   
   {
   
   locShowModal: (gblRecordUserSettings.'Display Splash (Power Apps)?' = 'Display
   Splash (Power Apps)? (Employee Ideas User Settings)'.Yes),
   
   locShowPowerAppsPrompt: gblRecordUserSettings.'Display Splash (Power Apps)?' =
   'Display Splash (Power Apps)? (Employee Ideas User Settings)'.Yes
   
   }
   
   )
   
   )
   
   )
   
   )
   
   
   

此操作应在应用打开后适当地加载所有必需的数据。 选择自适应卡片中的记录的用户将转到适当的想法。

发布想法应用

1. 对“想法”应用的所有更改都已完成。

2. 现在可通过选择右上方的“发布到 Teams”按钮来发布该应用。

测试应用

1. 登录到 Teams，然后导航到安装了“想法”应用的团队。

2. 选择顶部的“想法”选项卡。

3. “想法”应用随即打开。

4. 选择其中一个市场活动 - 例如“工作区安全性”。

   

5. 选择“提交想法”按钮。

   

6. 输入标题和描述。

7. 为列出的问题选择等级。

8. 添加所需的任何其他信息。

9. 填充所有详细信息后，点击“提交想法”按钮。

10. 此想法会被提交。

11. 通知会发送给安装该应用的团队。

12. 选择通知中的链接并验证想法记录是否打开。

    

另请参见

• 了解“员工想法”应用体系结构
• 自定义示例应用模板
• 示例应用模板常见问题解答
• 在 Microsoft Teams 中使用示例应用模板