代码组件的 Liquid 模板标记
Power Apps component framework 使专业开发人员和应用制作者能够为模型驱动和画布应用创建代码组件。 这些代码组件可以为处理窗体、视图和仪表板上的数据的用户提供增强的体验。 详细信息：在 Power Pages 中使用代码组件
重要提示
代码组件的 Liquid 模板标记需要门户版本 9.3.10.x 或更高版本。
在此版本中，我们引入了在网页上使用 Liquid 模板标记添加代码组件的功能，并为 Power Pages 中窗体上的字段级组件启用了使用 Web API 的组件。
代码组件可以使用 codecomponent Liquid 模板标记添加。 表示需要加载的代码组件的键使用 name 属性传入。 此键可以是 GUID（即代码组件 ID），也可以是在 Microsoft Dataverse 中导入的代码组件的名称。
代码组件期望的属性值需要作为键/值对传入，以“:”（冒号）分隔，其中键是属性名称，值是 JSON 字符串值。
{% codecomponent name: <ID or name> <property1:value> <property2:value> %}
例如，要添加需要名为 controlValue 的输入参数的代码组件，使用以下 Liquid 模板标记：
{% codecomponent name:abc_SampleNamespace.MapControl controlValue:'Space Needle' controlApiKey:<API Key Value>%}
提示
此示例使用名为 controlvalue 和 controlApiKey 的参数，但您使用的组件可能需要不同的参数名称。
您可以使用示例地图控件并将代码组件打包为解决方案，以便与 Power Pages 结合使用。
备注
Microsoft 不支持社区创建的资源。 如果对社区资源有任何疑问或问题，请联系资源的发布者。 在使用这些资源之前，您必须确保它们符合 Power Apps component framework 指南，并且只应用于参考。
教程：在页面上使用带有 Liquid 模板标记的代码组件
在本教程中，您将配置 Power Pages 以将组件添加到网页。 然后，您将访问站点网页并与组件交互。
准备工作
如果您使用本教程中使用的示例代码组件，请确保在开始之前先将示例解决方案导入环境。 要了解解决方案导入，请转到导入解决方案。
先决条件
要了解先决条件以及 Power Pages 中支持/不支持的代码组件，请转到在 Power Pages 中使用代码组件。
备注
本教程使用通过 Power Apps component framework 创建的示例代码组件演示网页上的地图控件。 您还可以使用您自己的任何现有或新组件，以及本教程的任何其他网页。 在这种情况下，请确保在按照本教程中的步骤操作时使用您的组件和网页。 有关如何创建代码组件的详细信息，请转到创建您的第一个组件。
步骤 1. 将代码组件从工作室添加到网页
在 Power Pages 设计工作室中打开您的站点。
选择页面工作区，然后选择 + 页面。
为页面提供名称。 例如，Map Viewer。
选择从空白开始页面布局。
选择编辑代码 按钮打开 Web 的 Visual Studio Code
使用以下语法在
<div></div>之间添加带有 Liquid 模板标记的控件：{% codecomponent name:abc\_SampleNamespace.MapControl controlValue:'Space Needle' controlApiKey:'<API Key Value>' %}
提示
要检索所有导入组件的详细信息或搜索组件名称，请参阅 CustomControl Web API。
例如:
要搜索组件：
https://contoso.api.crm10.dynamics.com/api/data/v9.2/customcontrols?$select=ContosoCustomControlName要检索组件的输入参数：
https://contoso.api.crm10.dynamics.com/api/data/v9.2/customcontrols?$filter=name eq 'ContosoCustomControlName' &$select=manifest
在键盘上选择 CTRL-S 保存更新代码。
导航回设计工作室，然后选择同步以使用 Visual Studio Code 中的编辑更新网页。
在右上角选择预览和桌面以预览站点。
网页现在将显示所添加的控件。
