IFRAME コンポーネントを実装する

このサンプルでは、IFRAME コンポーネントが緯度と経度の列を入力プロパティとしてバインドする方法を示します。 これを使用して、Power AppsでBing マップを表示および更新します。

Bing マップを表示する IFRAME コンポーネントのスクリーンショット。

利用可能対象

モデル駆動型アプリとキャンバス アプリ

IFRAME コンポーネント コード

このGitHub リポジトリから完全なサンプル コンポーネントをダウンロードできます。

注

コンポーネント フレームワークPower Appsはまだ複合列をサポートしていないため、このコンポーネントを既定の緯度と経度のアドレス列にバインドすることはできません。 コード コンポーネントを別の浮動小数点フィールドにバインドする必要があります。

このサンプル コンポーネントは、Bing地図 URLを表示するIFRAMEをレンダリングします。 コンポーネントは、フォーム上の 2 つの浮動小数点列にバインドされます。 コンポーネントは、これらの列をパラメーターとして受け取り、 IFRAME URL に挿入して、Bing Map を指定された入力の緯度と経度に更新します。

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 インターフェイスに 2 つの列を追加します。 これは、Power Apps コンポーネント フレームワークがフィールド値を渡すために使用する形式です。 これらの値を IInputs インターフェイスに追加することで、TypeScript ファイルで値を参照し、正常にコンパイルできます。

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

最初の表示では IFRAME 要素を生成しそれをコントロール コンテナに追加します。 この IFRAME では、 Bing マップが表示されます。 IFRAMEの URL はBing Map URLに設定され、URL にバインドされた列 (latitudeValueとlongitudeValue) が含まれており、指定された場所にマップが中央揃えされます。

updateView メソッドは、これらの列のいずれかがフォームで更新されるたびに呼び出されます。 このメソッドは、コンポーネントに渡された新しい緯度と経度の値を使用するように 、Bing Map IFRAME の URL を更新します。 実行時にこのコンポーネントを表示するには、他のコード コンポーネントと同様に、フォーム上のフィールドにコンポーネントをバインドします。

サンプル コンポーネントをダウンロード
サンプルコンポーネントの使用方法
Power Apps component framework のマニフェスト スキーマ リファレンス
Power Apps Component Framework API リファレンス
Power Apps Component Framework の概要

  • Last updated on