练习 - 使用 Power Apps CLI

已完成

在本练习中,您将安装 Power Platform CLI,创建您的第一个 Power Apps Component Framework (PCF) 组件。

任务 1:安装 CLI

  1. 安装 Npm(Node.js 随附)或 Node.js(npm 随附)。 我们推荐您使用 LTS(长期支持)10.15.3 版本或更高版本。

  2. 安装Visual Studio Code

  3. 安装Power Platform Tools 扩展

  4. 启动 Visual Studio Code。

  5. 选择终端并选择新建终端

    显示‘新建终端’按钮的屏幕截图。

  6. 运行 pac 命令以查看哪些命令可用:

    pac

    显示命令列表的屏幕截图。

  7. 您可以依次输入 pac 和命令查看提供的选项,例如尝试以下操作:

    pac admin

  8. 导航到 Power Apps Maker Portal 并确保处于正确的环境中。

  9. 在屏幕右上角,选择设置图标并选择会话详细信息

    显示‘会话详细信息’按钮的屏幕截图。

  10. 在 Power Apps 会话详细信息对话框中选择并复制实例 url 值以便稍后在练习中使用。

    显示会话详细信息以及实例 URL 位置的屏幕截图。

  11. 返回到 Visual Studio Code 终端,键入以下命令以从 CLI 建立连接并在系统提示时登录到测试环境。

    pac auth create --name Lab --url <Your Instance URL>

  12. 键入以下 who 命令,以显示环境和用户信息。 这有助于确保您处于正确的环境中。

    pac org who

任务 2:创建 PCF 组件

  1. 运行下面的命令,以在用户的文件夹中创建名为 labPCF 的新文件夹。

    md labPCF

  2. 将目录更改为您创建的文件夹。

    cd labPCF

  3. 运行下面的命令以初始化组件项目。

    pac pcf init --namespace lab --name FirstControl --template field

  4. 键入以下命令,然后按 Enter。 这将从 npm 存储库中向下拉取所有依赖项。

    npm install

  5. 在 Visual Studio Code 中打开文件夹。

    code -a .

  6. 浏览已创建的文件。

  7. FirstControl 文件夹中打开 Index.ts

  8. 将以下两个变量粘贴到导出中。

    private label: HTMLInputElement;

    private _container: HTMLDivElement;

    显示两个变量在组件代码中的位置的屏幕截图。

  9. 将以下内容粘贴到 init() 函数中,创建 HTML 控件并设置标签值。

    this.label = document.createElement("input");
    this.label.setAttribute("type", "label");
    this.label.value = "My First PCF";
    this._container = document.createElement("div");
    this._container.appendChild(this.label);
    container.appendChild(this._container);
    
  10. 保存文件。

  11. 转到终端,使用以下命令,然后按 Enter。 这将使用最新代码启动测试工具。

    npm start

  12. 在项目早期可以有效地使用测试工具,以直观地查看控件的外观,而无需将其部署到环境中。 您可以设置属性值,更改控件区域的大小。 探索测试工具后,请切换回终端,然后按 Ctrl-C 以终止执行测试工具。

  13. 键入 Y,然后按 [ENTER]。

  14. 运行以下命令以列出环境中的解决方案。

    pac solution list

  15. 这些是环境中的现有解决方案。 下一步将为组件添加一个解决方案。

  16. 键入以下 push 命令以将控件推送到环境。

    pac pcf push --publisher-prefix lab

  17. 再次运行 pac 解决方案列表命令。 您应看到已经列出 PowerAppsTools_lab 解决方案。 这是在打包进行用户测试或投入生产或作为其他解决方案的一部分之前在开发环境中安装组件进行单元测试的方式。

任务 3:在应用中使用组件(可选)

  1. 导航到 Microsoft Power Platform 管理中心

  2. 选择要用于实验室的环境。

  3. 选择设置

  4. 展开产品区域,然后选择功能

  5. 在右侧,启用允许发布包含代码组件的画布应用功能。

    显示区域组件启用位置的屏幕截图。

  6. 导航到 Power Apps Maker Portal 并确保处于正确的环境中。

  7. 选择解决方案

  8. 选择以打开 PowerAppsTools_lab 解决方案。

  9. 您应看到您的组件已经列出。

  10. 选择 + 新建 | 应用 | 画布应用

  11. 为“格式”选择手机,为“应用名称”输入第一个 PCF,然后选择创建

  12. 在左侧窗格中选择添加 (+),然后选择获取更多组件

  13. 选择代码选项卡。

  14. 选择您的组件。

    显示正在导入刚构建的组件的屏幕截图。

  15. 选择导入

  16. 在左侧工具栏上,选择 + 并展开代码组件

  17. 选择 FirstControl。 您现在应看到画布带有我的第一个 PCF 字样的控件。

    显示将组件拖至画布上的屏幕截图。

  18. 选择文件,然后保存应用程序。

您现在已经构建了第一个 PCF 组件并在画布应用中使用该组件。