备注
从 2022 年 10 月 12 日起，Power Apps 门户更名为 Power Pages。 详细信息请参阅：Microsoft Power Pages 现已正式发布（博客）
不久后我们将迁移 Power Apps 门户文档并将其与 Power Pages 文档合并在一起。
在本教程中，您将使用 Power Apps component framework 创建示例组件。 Power Apps component framework 使专业开发人员和应用制作者能够为模型驱动和画布应用创建代码组件。 这些代码组件可以为处理窗体、视图和仪表板上的数据的用户提供增强的体验。 详细信息：在门户中使用代码组件
备注
- 本教程基于现有的 Power Apps component framework 教程，后者向您逐步介绍列表上的 Power Apps 网格控件（预览版）组件和空白页面上的子网格。 您还可以使用任何现有或新组件，将其添加到本教程的任何其他网页。 在这种情况下，请确保在按照本教程中的步骤操作时使用您的组件和网页。要了解门户中支持哪些代码组件，请参阅在门户中使用代码组件。
在本教程中，将了解如何：
- 使用 Power Apps component framework 创建示例组件
- 将组件打包到 Microsoft Dataverse 环境
- 将 Power Pages 配置为向网页中添加组件
- 访问 Power Pages 网页以与组件交互
先决条件
- 门户版本 9.4.9.xx 或更高版本。
- Dataverse 基本门户程序包 9.3.2209.x 或更高版本。
步骤 1 - 创建您的第一个组件
完成创建您的第一个组件教程。
备注
在创建您的第一个组件结束时，您将打包名为 TSLinearInputComponent 的组件并将其上传到 Dataverse 环境。
步骤 2 - 将代码组件添加到模型驱动应用中的视图或子网格
要将组件添加到 客户表、视图和子网格，请按照将视图和子网格转换为可编辑网格（预览版）中的步骤进行操作
步骤 3 - 将代码组件添加到门户中的列表和子网格
在此步骤中，您将在门户中创建一个新的基本窗体，然后将组件添加到创建的基本窗体中。 您还可以改为使用现有的基本窗体。
步骤 3.1 - 将代码组件添加到列表
打开“门户管理”应用。
在左侧窗格上的 内容下，选择 列表。
选择 新建。
输入 名称。 例如， 包含代码组件的客户列表。
对于 表名称，选择在本教程前面将代码组件添加到的表。
选择您的门户 网站。
将使用已配置的代码组件选择为是
步骤 3.2 - 将代码组件添加到列表上的视图
按照以下步骤在 Dataverse 中的实体视图上启用控件。
打开“门户管理”应用。
输入 名称。 例如， 包含代码组件的客户列表。
对于 表名称，选择在本教程前面将代码组件添加到的表。
选择您的门户 网站。
在高级设置网格下添加视图。
将使用已配置的代码组件选择为是
步骤 3.3 - 将代码组件添加到子网格
打开“门户管理”应用。
在左侧窗格上的内容下，选择基本窗体。
选择上一步中创建的基本窗体。
选择相关。
选择基本窗体元数据。
选择新建基本窗体元数据。
将“类型”选择为子网格。
选择子网格名称。
对于 控件样式，选择 代码组件。
使用 Liquid 标记添加基于数据集的代码组件
基于数据集的代码组件可以使用 codecomponent 模板标记来添加。 表示需要加载的代码组件的键使用 name 属性传入。 此键可以是 GUID（即代码组件 ID），也可以是在 Microsoft Dataverse 中导入的代码组件的名称。
代码组件期望的属性值需要作为键/值对传入，以“:”（冒号）分隔，其中键是属性名称，值是 JSON 字符串值。
{% codecomponent name: <ID or name> <property1:value> <property2:value> %}
有关详细信息，请参阅将 Liquid 模板标记用于代码组件。
限制
Power Apps grid 控件不支持列表和子网格上的操作和元数据筛选器配置。