Power Apps 专业开发者 3：导出 Teams 应用

这是三篇文章中探索在 Teams 环境中构建的 PowerApps 的最后一篇，指导开发人员完成创建简单业务应用程序的过程。在这最后一篇文章中，我们将通过添加菜单/门户页面、一个使用相同数据来批准请求的附加应用程序、利用 Teams 影响设计，以及在我们自己的环境中打包和部署我们的应用程序来完成 PowerApps 中的应用程序构建。

添加菜单

在直接在用户界面中添加菜单之前，让我们设置另一个数据表来保存我们的菜单结构，以便尽可能动态地构建它。单击左侧菜单上的数据，然后单击添加数据源并创建一个名为“HRMenuOptions”的新表。

此表将包含三个元素：菜单项的名称、菜单选项编号以及指向我们将显示的图像的链接。我们将使用这些元素通过名称、图像以及基于屏幕编号的 switch 语句自动生成菜单。由于我们只有一个表单，我还添加了一些占位符项目来扩展菜单。

设置好数据元素后，我们现在可以为我们的菜单添加一个新屏幕到应用程序中。打开树视图并添加一个具有标题、主区域和页脚布局的新屏幕。

在标题部分，插入一个名为“Human Resources Request Forms”的新标签，用于我们的菜单。

接下来，选择主区域（我已将其重命名为 HR Menus）并插入一个新的垂直库。库对象允许您使用数据源向其中添加组件。在我们的案例中，我们将使用 HRMenuOptions 表来构建我们的库对象。

当您单击库对象时，您可以修改整体的外观和感觉，以获得更传统的菜单。例如，您可以切换到只有图像和标题的库布局。要修改图像，请展开右侧的库对象，然后单击其下方的图像项。然后，在等号左侧的下拉菜单中，选择图像。在右侧的函数框中，输入命令 ThisItem.IconImage。这将图像设置为数据源中 IconImage 列中的 URL。

接下来，右键单击库下方的矩形对象，然后选择重新排序 > 置于顶层。我们使用此对象来捕获所有点击并将用户重定向到正确的表单。为此，我们使用 switch 语句根据 ScreenNumber 列中的数字重定向用户。该语句如下所示：

Switch(ThisItem.ScreenNumber, 
          "1", Navigate('HR Forms', Fade),
          "2", Navigate('HR Forms', Fade),
          "3", Navigate('WFH Form', Fade),
          Navigate('HR Forms', Fade));

switch 语句有三个测试（对应我们的每个菜单项）以及一个默认重定向回 HR Forms 页面的选项。

现在，我们需要对我们的应用程序进行一些小的修改。如果我们单击树视图中的应用项，然后从下拉菜单中选择OnStart，我们可以使用相同的 Navigate 函数 Navigate(‘HR Forms’, Fade) 来指定应用程序启动的页面。

我们还需要在表单的 OnSuccess 函数中设置此项，以便用户在填写完表单后被重定向回主页面。我们表单的完整 OnSuccess 函数现在应如下所示：

NewForm('New Request Form');
Notify("Work from home request submitted", NotificationType.Success);
Navigate('HR Forms', ScreenTransition.Fade)

部署应用程序

现在我们的应用程序已基本完成，让我们将其部署到我们的 Teams 环境中。在屏幕的右上角，在保存和预览按钮旁边，是发布到 Teams。当您单击此按钮时，您可以指定应用程序的常规详细信息，并选择哪些频道将包含此应用程序。

您还可以通过在团队内单击添加选项卡按钮，选择 PowerApps，然后搜索我们创建的应用程序来将应用程序添加到选项卡。完成此操作后，您可以直接在 Teams 中打开您的应用程序，它将成为您团队无缝的一部分。

使用 Teams 设置的主题

随着我们的应用程序部署到 Teams，我们还可以利用客户的一些设置来影响我们应用程序的设计。Teams 有三种基本的主题设置：深色、对比色和浅色（默认）。让我们看看如何根据 Teams 主题和使用全局变量来更改应用程序的启动方式。全局变量是应用程序内的信息容器，可以在任何地方访问。

单击树视图中的应用图标以加载应用程序设置。确保选择了左上角的 OnStart 属性，并在我们之前添加的 Navigate 函数之前添加以下代码：

Switch(Teams.Theme.Name, 
        Dark, Set(varBackgroundColor, RGBA(240,255,255,1)),
        Contrast, Set(varBackgroundColor, RGBA(255,240,255,1)),
        TeamsTheme.Default, Set(varBackgroundColor, RGBA(255,255,240,1))
    );

此代码块开头的 switch 语句将根据变量的状态执行另一个函数。在这种情况下，我们正在检查变量 Teams.Theme.Name，该变量当前设置为主题设置。然后，我们根据主题将变量 varBackgroundColor 设置为不同的颜色：深色为浅红色，对比色为浅绿色，浅色为浅绿色。

您可以构建完全自定义的主题，但出于我们的目的，我们仅使用此变量来演示其功能。

现在我们已经设置了此变量，我们可以将其应用于我们应用程序中的一些组件设置。单击菜单屏幕并选择填充属性。对于此函数，我们只需引用应用程序启动时设置的 varBackgoundColor。

您会注意到，设置此项后，屏幕不会立即更改。这是因为 OnStart 函数尚未运行，因为我们的应用程序仍然打开。您可以部署应用程序并进行测试，或者右键单击树视图中的应用项，然后选择运行 OnStart。

导出您的应用程序

现在我们的应用程序已基本完成，让我们将其导出，以便其他组织可以在其 Teams 环境中使用它。在顶部栏上，单击构建。然后，单击此列表底部的查看所有，以查看您使用 Power Apps 为此 Teams 环境构建的所有组件。从左侧菜单中选择应用项，勾选我们刚刚构建的应用程序旁边的复选框，然后单击导出。

这将显示导出屏幕，允许您将应用程序的所有组件打包成 ZIP 文件。您可以将此文件提供给其他组织，它们可以使用相同的过程将应用程序导入到其 Teams 环境中。

后续步骤

Power Apps 和 Teams 的集成在低代码环境中提供了强大的功能，可用于解决常见的业务问题。这些应用程序直接内置在 Teams 中，无需配置平台或基础设施，因此开发人员（以及其他用户）可以快速解决这些问题。

随着应用程序的增长或变得更加复杂，您还可以将应用程序升级到 Dataverse 数据库环境，该环境提供了对您可以利用的各种功能和连接器的访问。查看 Microsoft Power Apps 和 Teams，了解它的便捷程度。

查看我们的低代码应用开发 7 步指南，即可立即开始使用 Power Apps。