代码组件的 Liquid 模板标记

备注

从 2022 年 10 月 12 日起,Power Apps 门户更名为 Power Pages。 详细信息请参阅:Microsoft Power Pages 现已正式发布(博客)
不久后我们将迁移 Power Apps 门户文档并将其与 Power Pages 文档合并在一起。

Power Apps component framework 使专业开发人员和应用制作者能够为模型驱动和画布应用创建代码组件。 这些代码组件可以为处理窗体、视图和仪表板上的数据的用户提供增强的体验。 详细信息:在门户中使用代码组件

重要

代码组件的 Liquid 模板标记需要门户版本 9.3.10.x 或更高版本

在此版本中,我们引入了在网页上使用 Liquid 模板标记添加代码组件的功能,并为门户中窗体上的字段级组件启用了使用 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>%}

提示

此示例使用名为 controlvaluecontrolApiKey 的参数,但您使用的组件可能需要不同的参数名称。

您可以使用示例地图控件将代码组件打包为解决方案在门户中使用。

备注

Microsoft 不支持社区创建的资源。 如果对社区资源有任何疑问或问题,请联系资源的发布者。 在使用这些资源之前,您必须确保它们符合 Power Apps component framework 指南,并且只应用于参考。

教程:在页面上使用带有 Liquid 模板标记的代码组件

在本教程中,您将 Power Apps 门户配置为将组件添加到网页。 然后,您将访问门户网页并与组件交互。

准备工作

如果您使用本教程中使用的示例代码组件,请确保在开始之前先将示例解决方案导入环境。 要了解解决方案导入,请转到导入解决方案

先决条件

要了解先决条件以及门户中支持/不支持的代码组件,请转到在门户中使用代码组件

备注

本教程使用通过 Power Apps component framework 创建的示例代码组件演示网页上的地图控件。 您还可以使用您自己的任何现有或新组件,以及本教程的任何其他网页。 在这种情况下,请确保在按照本教程中的步骤操作时使用您的组件和网页。 有关如何创建代码组件的详细信息,请转到创建您的第一个组件

第 1 步。 将代码组件从工作室添加到网页

  1. 在  Power Apps 门户工作室中打开您的门户。

  2. 在左上角,选择 新建页面

  3. 选择 空白

  4. 在右侧的属性窗格中,更新网页名称。 例如,“Map Viewer”。

  5. 更新部分 URL。 例如,“mapviewer”。

  6. 展开权限

  7. 禁用可供所有人访问的页面

  8. 选择应被允许访问此页面的 Web 角色。

  9. 选择页面上的可编辑区域编辑 Liquid 源代码。

  10. 打开工作室代码编辑器

  11. 使用以下语法添加带有 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

  12. 保存并关闭代码编辑器。

  13. 在右上角,选择 浏览网站

  14. 网页现在将显示所添加的控件。

后续步骤

概述:在门户中使用代码组件

另请参见

Codecomponent Dataverse 实体标记
Codecomponent 模板标记
Power Apps component framework 概述
创建您的第一个组件
将代码组件添加到模型驱动应用中的列或表中
实现示例门户 Web API 组件

备注

您能告诉我们您的文档语言首选项吗? 进行简短调查。(请注意,此调查是英文版调查)

此调查大约需要七分钟。 不会收集个人数据(隐私声明)。