实现 IFRAME 组件

此示例演示如何 IFRAME 组件将纬度列和经度列绑定为输入属性。 使用它可在 Power Apps 中显示和更新必应地图。

显示 Bing 地图的 IFRAME 组件的屏幕截图。

适用于

模型驱动型应用和画布应用

IFRAME 组件代码

可以从此GitHub存储库下载完整的示例组件。

Note

Power Apps组件框架尚不支持复合列，因此无法将此组件绑定到默认纬度和经度地址列。 需要将代码组件绑定到不同的浮点字段。

此示例组件渲染一个 IFRAME，用于显示 必应地图 URL。 该组件绑定到表单上的两个浮点数列。 该组件将这些列作为参数接收，并将其注入到 IFRAME URL 中，以将 Bing 地图更新为所提供输入对应的纬度和经度。

更新 Manifest 文件，使其包含对窗体上另外两列的绑定。
此更改通知Power Apps组件框架，在初始化期间，每当其中一个值更新时，都需要将这些绑定列传递给组件。

<property name="latitudeValue"
   display-name-key="Bing_Maps_Latitude_Value"
   description-key="latitude"
   of-type="FP"
   usage="bound"
   required="true" />
<property name="longitudeValue"
   display-name-key="Bing_Maps_Longitude_Value"
   description-key="longitude"
   of-type="FP"
   usage="bound"
   required="true" />

可能需要添加更多绑定属性。 将组件绑定到窗体时，组件配置会强制实施此要求。 可以通过在组件清单中设置属性节点的 required 属性来配置此项要求。 如果不想要求将组件属性绑定到字段，请将该值 false 设置为。

更新 ComponentFramework.d.ts，以在 IInputs 界面中添加两列。 这是Power Apps组件框架用于传递字段值的格式。 通过将这些值添加到 IInputs 接口，TypeScript 文件可以引用这些值并成功编译。

    export interface IInputs 
    { latitudeValue: ComponentFramework.PropertyTypes.NumberProperty;  
        longitudeValue: ComponentFramework.PropertyTypes.NumberProperty;  
    }

初始呈现将生成一个 IFRAME 元素并将其追加到控件容器。 此 IFRAME 显示 Bing Map。 IFRAME 的 URL 被设置为 Bing Map URL，并在 URL 中包含绑定的列（latitudeValue 和 longitudeValue），以使地图在提供的位置居中。

每当其中一列更新窗体时，就会调用 updateView 方法。 此方法更新 必应地图 IFRAME 的 URL，以使用传递给组件的新纬度和经度值。 若要在运行时查看此组件，请像任何其他代码组件一样将组件绑定到窗体上的字段。

下载示例组件
如何使用示例组件
Power Apps 组件框架清单架构参考
Power Apps组件框架 API 参考
Power Apps组件框架概述

  • Last updated on