使用自然语言生成页面

使用自然语言生成使用 AI 创建的 生成页面 。 生成式页面是一种 AI 驱动的体验，旨在简化、加速和改进模型驱动应用中的应用设计过程。 通过与应用代理交互，可以在模型驱动应用中创建功能齐全的页面，方法是描述自然语言中所需的内容，并指定要引用哪些Microsoft Dataverse表、Power Platform 连接器（预览版）或 Dataverse 自定义 API（预览版）。 甚至可以附加想要页面外观的图像。

在你描述页面之后，系统会处理你的要求和规范，并智能地生成 React 代码，通过选择正确的组件和确定最佳布局来涵盖前端用户体验，以及相应的业务逻辑。 通过交互式对话体验，您可以实时完善页面设计，调整元素、布局和功能以完全符合您的愿景。

选择如何构建生成式页面

生成页面支持两种创作体验。 两者都生成相同的页面类型。 区别在于你创作的位置以及哪个 AI 模型为生成提供支持。

使用 AI 代码生成工具（如 GitHub Copilot CLI）从本地开发环境创建和编辑生成页面。 建议使用此方法，因为具有以下优势：

  • 访问最新的 AI 模型。 由于 AI 由你安装的工具提供，因此始终可以访问最新且最有能力的前沿模型。
  • 公有云在全球可用 - 不限于特定区域。
  • 代码优先的工作流。 在您首选的 IDE 中直接使用 TypeScript 和 React，并支持 npm install 以及生成的代码的 IntelliSense。
  • 一次运行即可构建更多内容。 一个自然语言请求可以生成多个页面，创建支持的 Dataverse 表，并将所有内容放在正确的应用和解决方案中。

详细信息： 使用 AI 代码生成工具创建和编辑生成页面

在 Power Apps 中进行浏览器内编写

使用对话式用户界面体验，直接在浏览器中的 make.powerapps.com 上创建生成式页面。 此体验最适合喜欢留在Power Apps设计器中且不需要本地开发设置的制造商。 它可在美国、英国、澳大利亚和新加坡使用。

本文的其余部分介绍了浏览器内体验。

先决条件

重要

对连接器的支持、对自定义 API 的支持，以及针对生成式页面的 Application Insights 遥测功能均为预览功能。 预览功能不适用于生产环境，并且可能具有受限的功能。 自定义 API 在已登录用户的上下文中运行，并受 Dataverse 安全性的约束。

在模型驱动应用中创建生成式页面

  1. 登录到 Power Apps。

  2. 打开一个模型驱动应用程序进行编辑。

  3. 在应用设计器中，选择“ 添加页面>生成”页。

    将打开一个对话框。 若要创建新页面，请选择“ 描述页面”。 将打开整页生成式页面体验。

    注释

    同一对话框还会列出环境中可以添加到此应用的现有生成页面。 默认情况下，列表筛选为 “已发布 ”页面;如果未看到要查找的页面，请将筛选器切换为 “全部 ”。

  4. 在文本框中，键入要创建的页面类型的说明。 包括功能要求和任何 UX 规范（ 可选）。 例如，您可以输入创建一个页面，以现代风格展示账户记录的卡片库。包含名称、顶部实体图像，以及网站、电子邮件和电话号码。通过使用账户表中的数据使卡片库可滚动。 如果希望页面支持多种语言，请按照 本地化生成页中的指南进行操作。

    Tip

    不确定从何处开始？ 智能应用目录包括一个提示目录，其中包含预生成的提示模板和常见页面模式（库、看板、仪表板等）的参考图像，你可以将其用作起点。

  5. 根据需要添加数据源、自定义 API 和映像：

    • 若要使用 Dataverse 数据，请选择“ 添加数据>添加表”。 您可以链接最多六个 Dataverse 表。 在以下屏幕截图中，已添加账户表。
    • 若要使用 Power Platform 连接器中的数据（预览版），请选择 “添加数据>连接器”，选择准备的连接引用，然后选择页面应使用的连接器数据。 在提示符中，描述希望页面如何使用所选数据。
    • 若要运行使用 Dataverse 插件实现的服务器端业务逻辑，请选择 “添加>自定义 API ”（预览），然后选择想要页面调用的已准备好的自定义 API。 在提示符中，描述页面何时应调用自定义 API、应提供哪些值以及它应如何使用响应。 例如， 添加“批准”按钮。选中此项后，请为当前订单调用 ApproveOrder 自定义 API，并传递审阅者的注释。然后显示返回的状态。将表添加到生成页

  6. （可选）上传一个或多个图像，通过选择 “添加数据>附加图像”来指导生成的页面的 UI。 这可以是粗糙的餐巾纸草图或更高分辨率的图像。 图像可以表示要创建的整个页面的结构或布局，也可以是要模拟的特定部分或组件的视觉对象。

    注释

    如果希望生成的页面显示特定图像，而不是将图像附加到提示符，则可以（1）将图像包含在引用的数据表中，并让代理从该表中检索图像，（2）公开托管图像，并向代理提供 URL，或者（3）将图像添加为 Web 资源，并为代理提供 Web 资源的 URL。

  7. （可选）启用或禁用 包含图像 （预览版）工具，以允许代理利用 25,000 个库存图像的特选安全库中的图像，以支持诸如默认/占位符图像、装饰背景、静态内容块以及更丰富的空或错误状态等用例。 包括图像工具，用于从库存图像库添加图像

  8. （可选）选择要用于生成页面的 AI 模型。 选择要用于生成页面的 AI 模型

    注释

    GPT-4.1 目前是 Power Apps 生成式页面创作体验中唯一可用的模型。

    Tip

    想要使用最新的 AI 模型？ 为此，可以使用 AI 代码生成工具创建和编辑生成页面，从而访问较新的前沿模型。

  9. 完成页面描述后，选择生成页面。

代理开始一个多步骤生成过程，你可以实时观察：

  • 实时思维流：智能体首先阐述对提示的理解，列出需求、假设及执行方案。
  • 代码生成：接下来，它会根据计划为页面编写基础代码。
  • 转译：然后转译生成的代码，以确保兼容性和正确呈现。
  • 最终呈现：最后显示已完成的用户体验。

如果在此过程结束时未显示用户体验，可以通过选择 “预览 ”选项卡来查看它。

生成的页面用户体验

查看生成的代码、迭代和发布

生成页面后，有多个选项可以优化和完成该页面：

  1. 查看和编辑生成的代码 选择“ 代码 ”选项卡以查看应用代理生成的代码。 查看生成式页面代码并迭代设计

    可以通过两种方式优化输出：

    • 以迭代方式与应用代理聊天，以修复错误、调整布局或添加功能。
    • 通过选择“代码”选项卡上的 “编辑” 手动编辑代码。进行一些编辑后，可以选择“ 保存 ”以将更改提交为新迭代，也可以 选择“取消” 以放弃更改。

    了解用于数据操作的 dataApi 对象方法

  2. 比较迭代 使用代理完成两次或更多次迭代后，可以在“代码”选项卡上选择“ 比较 ”以查看当前迭代和上一次迭代之间的代码差异。

    注释

    此功能目前仅在当前会话中的第二次迭代开始可用。

  3. 附加屏幕截图以供快速参考 在聊天体验中，选择“ 附加>添加”屏幕截图 ，以包含当前预览版的屏幕截图，与应用代理的下一次交互。 屏幕截图有助于调整页面的视觉对象。 也可以附加其他图像，以帮助优化整个页面或页面的特定部分的视觉对象。

  4. 检查辅助功能问题（新） 每次迭代代码生成后，屏幕底部的 辅助功能助手 会扫描生成的代码，以评估它是否具有辅助功能。 可以直接在屏幕上看到高级状态更新，并且可以选择在面板中打开详细结果。 选择 “自动修复 ”，将任何冲突直接传递给代理，以便尝试自动解决。

  5. 保存和发布 在命令栏中，选择“ 保存 ”以避免在页面上丢失进度。 如果对页面感到满意，请选择“ 保存并发布 ”以发布应用的所有挂起更改，包括任何生成页面。

重要

尽管代理尽最大努力尝试生成完整且生产可用的代码，包括对可访问性和安全最佳实践的考虑，但您最终负有验证这些代码的责任。 确保生成的代码满足组织的标准和合规性要求。

生成页面的常见操作

本部分介绍在模型驱动应用中使用生成页面时的常见方案和任务。

使用自定义 API 运行服务器端业务逻辑（预览版）

当页面需要显式运行服务器端业务逻辑（例如批准订单、重新计算价格或验证交易）时，请使用 Dataverse 自定义 API。 自定义 API 通常使用 Dataverse 插件来实现该操作。

此功能不同于在创建、更新或删除 Dataverse 行时自动运行的插件。 当生成页执行相应的数据操作且无需添加到页面时，这些插件已运行。 当页面在特定时间需要调用命名操作时添加自定义 API。

若要使用自定义 API：

  1. 在生成页设计器中，选择“ 添加>自定义 API”。

  2. 从当前环境中选择自定义 API。 生成页支持全局操作和表绑定操作和函数。

  3. 在提示符中，描述应触发操作的内容、要传递的输入值以及页面应如何使用响应。 例如：

    Add an Approve button to the order details. When the user selects it, call `ApproveOrder` for the current order, pass the text from the reviewer comment field, and display the returned order status.

在模型驱动应用窗体上嵌入生成页时，可以要求代理使用当前记录作为表绑定自定义 API 的输入。

有关创建自定义 API 并使用插件实现其逻辑的信息，请转到 “创建和使用自定义 API”。

使用 Application Insights 监视生成页面（预览版）

在 Power Platform 管理中心为环境配置 Application Insights 数据导出时，Power Apps会自动导出已发布生成页面的遥测数据。 无需添加遥测代码、安装 Application Insights JavaScript SDK 或为页面提供连接字符串。

以下遥测数据可用：

Activity Application Insights 表 详细信息
页面加载 pageViews 使用页面 ID、页面名称、应用、主机类型、加载持续时间和导航源记录已完成的生成页面加载。
未经处理的错误 exceptions 记录未处理的页面渲染错误以及由生成式页面引起的未处理 Promise 拒绝。
数据 API 操作 dependencies 记录支持的 dataApi 操作的持续时间和结果，包括创建、更新、删除、检索和查询操作。
Navigation pageViews 记录从生成页面启动的导航，包括源页面和目标页面信息。

用于生成式页面的 Application Insights 遥测是一项预览功能。 在推出该功能时，可用性可能因环境而异。

有关配置导出的信息，请参阅 将数据导出到 Application Insights。 若要了解如何表示和查询模型驱动应用遥测，请参阅 模型驱动应用的遥测事件。

设置页面以接受输入参数

生成页可以接受输入参数 recordId、entityName 和 data，从而在导航到这些页面时接收上下文数据。 若要配置页面以接受参数，请描述页面在提示中应接受的内容，代理会自动连接初始化代码。 例如：

Set up the page to accept an account recordId. When the page loads, use these to fetch and display the corresponding account details.

Configure this page to accept a data parameter containing a custom filter object. Use it to filter the displayed records when the page loads.

在表单中嵌入生成式页面

可以将生成页添加到模型驱动应用窗体，使其显示在分区或选项卡中。首先，创建并发布专为表单设计的生成页面，并将其 设置为接受 recordId 输入参数。

若要将页面添加到表单，请执行以下操作：

  1. 在窗体设计器中打开窗体。
  2. 在左窗格中，选择“ 组件”，然后展开“ 显示”。
  3. 选择生成页。
  4. 选择要嵌入的生成页面。
  5. （可选）为页面接受的任何其他静态输入提供值。
  6. 保存并发布表单。

当用户打开记录时，表单会自动将当前记录 ID 作为 recordId 输入传递到生成页。 无需为 recordId. 配置静态值。

转到生成式页面

可以通过编程方式使用Xrm.Navigation.navigateTo跳转到生成页面，如果目标页面设置为接收输入参数，则可以传递这些参数。 有关示例和完整的 API 详细信息，请参阅 使用客户端 API 在生成页面之间进行导航。

在页面中使用特定图像

使用这三种方法之一在生成页面中使用特定图像。

在 Dataverse 表中存储图像

将图像包含在生成页面所引用的 Dataverse 表中，并指示代理从中检索该图像。 创建页面时，请告知代理如何从表中获取正确的图像。

Build a product catalog page showing products from the Product table. Display the product image from the ProductImage column, along with the name, description, and price.

在外部托管图片，并通过 URL 引用

在外部服务器或内容分发网络（CDN）上托管映像，并向代理提供映像的 URL：

Display the company logo using this URL: https://example.com/images/logo.png at the top of the page.

将图像添加为 Web 资源

将图像作为 Web 资源上传到解决方案中，并按其 Web 资源 URL 引用它：

  1. 将映像添加为解决方案中的 Web 资源。
  2. 记下 Web 资源名称（例如 new_/images/banner.png， ）。
  3. 使用此处所述的 Web 资源 URL 格式在提示或代码中引用它：
Use the banner image from web resource new_/images/banner.png as the page header background.

将生成式页面添加到解决方案

生成页面具有对解决方案的感知能力，并可以通过应用添加到解决方案中，以便在不同环境之间方便地移动。 若要将生成页添加到解决方案，请执行以下步骤：

重要

如果在预览阶段创建了生成页面，则必须在模型应用设计器中加载生成页，以启动一次性迁移到新的解决方案感知数据模型。 当页面在设计器中加载时，会看到“升级页面”进度消息。 在迁移完成之前不要关闭窗口。

  1. 将包含生成式页面的应用添加到解决方案
    • 在Power Apps中，选择左侧导航窗格中的 Solutions，然后打开所需的解决方案。
    • 选择 “添加现有的 > 应用 > 模型驱动应用”。
    • 选择包含生成页面的应用。
  2. 将该解决方案作为托管或非托管解决方案导出
    • 确保解决方案中包含应用站点地图。 若未存在，应在依赖性检查期间请求创建。
    • 生成式页面（显示为 UX 智能体项目行）也将根据其对站点地图的依赖项进行请求。

注释

如果在依赖项检查期间未请求生成页，请检查这些项目：

  • 仅在预览期间创建的页面已迁移时才会显示。 在设计器中加载它们以触发迁移。
  • 如果解决方案中包含站点地图并且已迁移生成页面，请尝试对站点地图进行轻微更改，例如重新排序或重命名页面、重新发布应用，然后再次尝试导出。

导出后，可以将应用和生成页面导入到另一个环境中。 在目标环境中的设计器中打开时，只有第一个提示和已发布的代码可用。 完整的代理对话不会随页面一起传输。

本地化生成页面

若要本地化生成页面，请确保提示涵盖以下项目：

  • 指定语言。 告知代理希望页面支持的语言，理想情况下是语言名称和 LCID。
  • 请求翻译的文本。 要求代理为每个语言的页面上的所有用户可见标签和文本创建翻译词典。
  • 启用 RTL 支持。 如果环境包含 RTL 语言（如阿拉伯语或希伯来语），请让代理实现适当的从右向左布局支持。
  • 使用区域格式。 要求代理从其 Dataverse 用户设置中使用每个用户的首选项来设置日期、数字和货币的格式，而不是使用硬编码格式或区域设置代码。

有关详细的实现指南和代码模式，请转到 Power Platform Skills 存储库中的 本地化说明 。

注释

默认情况下，生成页的站点地图条目未本地化。 需要在应用设计器中单独处理 Sitemap 本地化。

局限性

以下是生成式页面的当前限制：

  • 最多可以将六个 Dataverse 表链接到一个页面。
  • 支持的数据源是 Dataverse 表和 Power Platform 连接器（预览版）。
  • 预览版支持自定义 API 操作和函数。 不支持使用 EntityCollection 绑定类型或 实体 参数的自定义 API。
  • 提示符最多可以包含 50,000 个字符。
  • 在Power Apps（make.powerapps.com）中创建生成页面时，仅支持美国英语提示语言。
  • 不支持协作功能。 确保一次只有一个制作者在处理生成式页面，以避免意外冲突。
  • 仅支持以下数据类型：
    • 选择
    • 货币
    • 客户
    • 日期和时间
    • 仅日期
    • 小数
    • 浮点数
    • 图像
    • 查找
    • 多行文本
    • 地位
    • 状态描述
    • 文本
    • 整数
    • 是/否
    • 唯一标识符

常见问题解答

是否可以在计划设计器中开始设计应用，然后使用生成式页面？

是的，虽然目前计划和生成页面之间没有直接集成，但你可以使用计划来定义表和应用，然后切换到模型驱动的应用设计器来创建任何所需的生成页面。

使用生成式页面是否需要任何额外的费用或积分？

否，生成式页面（和计划）的制作者体验不需要任何额外的 AI 或消息积分。

什么样的图像最适合指导 UI 生成？

这取决于你的目标。 如果你确切地知道希望最终页面的外观、清晰和详细的草图或线框（无论是手绘还是数字）最有效。 如果你只有一个大致的概念，并希望助手完善详细信息，那么快速的白板草图，甚至餐巾纸上的绘图也可以发挥很好的作用。

我可以将生成式页面与画布应用或其他应用类型一起使用吗？

否，生成式页面目前仅在模型驱动应用中受支持。

有没有办法跨环境重用或克隆生成式页面？

是的，生成页面是具有解决方案感知能力的元素，可以跨环境移动。 只有最后发布的代码版本和第一个提示与解决方案一起维护;完整修订历史记录保留在原始环境中。

我可以手动编辑生成的代码吗？

是的。 可以通过选择“代码”选项卡上的“编辑”手动编辑生成的代码。更改将保存为新的迭代。 如果选择不保留编辑，请选择 “取消 ”以取消编辑。

生成页面生成的代码是否保证达到生产就绪状态并符合我组织的标准？

否。 尽管该智能体会尽力生成符合无障碍及安全最佳实践的高质量生产就绪代码，但您仍需自行验证输出结果。 请始终查看生成的代码，以确保它符合组织的标准、策略和合规性要求。

如何提供有关该功能的反馈？

反馈生成式页面的最佳方式是使用聊天体验中每次迭代后提供的“点赞/点踩”按钮。 我们强烈建议您在分享相关内容示例和额外日志文件选项中选择是，以便我们调试或尝试重现您在使用该功能时遇到的任何问题。

如果我的环境中未启用生成式页面，该怎么办？

确保您的环境位于 Power Apps 制作工作室体验支持的区域之一：美国、英国、澳大利亚或新加坡。 如果未列出你的区域，你仍然可以使用 AI 代码生成工具创建和编辑生成页面，这些工具在全球公有云中可用。 详细信息： 使用 AI 代码生成工具创建和编辑生成页面

  • Last updated on