代码组件

代码组件是解决方案组件,可以在解决方案文件中打包并导入到不同的环境中。 使用它们在各环境中分发增强型应用体验。 了解如何使用解决方案打包和分发扩展

允许用户查看和使用应用数据的代码组件的屏幕截图。

可以在解决方案中包含代码组件,然后将解决方案导入到Microsoft Dataverse环境中。 导入包含代码组件的解决方案后,系统管理员和系统定制器可以配置列、子网格、视图和仪表板子网格,以使用而不是默认组件。 可以将这些代码组件添加到 模型驱动应用和画布应用

代码组件由三个元素组成:

Note

使用 Power Apps 组件框架的代码组件的定义和实现对于模型驱动和画布应用都是相同的。 这两个应用之间的唯一区别是配置部件。

清单

清单是 ControlManifest.Input.xml 定义组件的元数据文件。 它是一个描述以下内容的 XML 文档:

  • 组件的名称。
  • 你可以配置的数据类型,可以是 fielddataset
  • 添加组件时,可以在应用程序中配置的任何属性。
  • 组件所需的资源文件列表。

当用户配置代码组件时,清单文件中的数据会筛选可用组件,以便只有上下文的有效组件可用于配置。 组件清单文件中定义的属性呈现为配置列,以便配置组件的用户可以指定值。 然后,这些属性值在运行时可供组件使用。 有关详细信息,请参阅 清单架构参考

组件实现

使用 TypeScript 实现代码组件。 每个代码组件都必须包含一个对象,该对象实现代码组件接口中所述的方法。 Power Platform CLI 自动生成一个index.ts文件,其中包含这些方法的存根实现。 使用 pac pcf init 命令生成此文件,其中包括主存根方法。

该对象实现以下方法:

这些方法控制代码组件的生命周期。

页面加载

加载页面时,应用程序需要一个对象来处理。 使用清单文件中的数据,代码通过调用获取对象:

var obj =  new <"namespace on manifest">.<"constructor on manifest">();

如果清单 SampleNameSpace 中的命名空间和构造函数值分别为和 LinearInputComponent 分别,则实例化对象的代码如下所示:

var controlObj = new SampleNameSpace.LinearInputComponent();

页面准备就绪后,它通过使用一组参数调用 init 方法来初始化组件。

controlObj.init(context,notifyOutputChanged,state,container);
Parameter Description
上下文 包含有关组件配置方式以及可在组件中使用的所有参数以及Power Apps组件框架 API 的所有信息。 例如,使用 context.parameters.<"property name from manifest"> 来访问 input 属性。
notifyOutputChanged 每当代码组件准备好异步检索新输出时,都会提醒框架。
状态 如果组件先前通过 setControlState 方法显式存储了这些数据,则当前会话中会包含上一次页面加载时的组件数据。
容器 一个 HTML div 元素,开发人员和应用开发者可以将用于定义该组件 UI 的 HTML 元素添加到其中。

用户更改数据

当用户与组件交互以更改数据时,组件必须调用在 init 方法中作为 notifyOutputChanged 参数传入的方法。 使用此方法时,平台会通过调用 getOutputs 方法进行响应。 getOutputs 方法返回包含用户所做的更改的值。 field对于组件,此值通常是组件的新值。

应用更改数据

如果平台更改了数据,它将调用组件的 updateView 方法,并将新的上下文对象作为参数传递。 实现此方法以更新组件中显示的值。

页面关闭

当用户离开页面时,代码组件会丢失范围,并清除在该页中为对象分配的所有内存。 但是,某些方法可能会根据浏览器实现机制保留和使用内存。 通常,这些方法是事件处理程序。 如果用户想要存储此信息,则应实现 setControlState 方法,以便下一次在同一会话中提供该信息。

开发人员应实现在页面关闭时调用的 destroy 方法,以删除任何清理代码(如事件处理程序)。

Resources

清单文件中的资源节点是指组件实现其可视化所需的资源。 每个代码组件都必须有一个资源文件才能构造其可视化效果。 工具会将 index.ts 文件生成作为 code 资源。 必须至少有一个代码资源。

定义清单中的其他资源文件以包括:

  • CSS 文件
  • 图像网络资源
  • 用于本地化的 resx Web 资源

更多信息:资源元素

创建和生成代码组件