IFRAME コンポーネントの実装

このサンプルでは、コード コンポーネントをフォーム上のいろいろな列にバインドし、それらの列の値をコンポーネントの入力プロパティとして使用する方法を説明します。

使用可能な対象

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

コード

完全なサンプル コンポーネントは、こちら からダウンロードできます。

このサンプル コンポーネントは Bing Maps URL を表示する IFRAME を表示します。 このコンポーネントはフォームのふたつの浮動小数点列にバインドされています。これらはパラメータとしてコンポーネントに渡され IFRAME URL に挿入されて Bing Map を提供された緯度と経度の入力に更新します。

Manifest ファイルを更新して、フォーム上のふたつの追加列にバインドを含めます。
この変更は、初期化中および値のどれかひとつが更新されるたびに、これらのバインド列をコンポーネントに渡す必要があることを Power Apps component framework に通知します。

<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 に設定します。

IInputs インターフェイスにふたつの列を追加するために ComponentFramework.d.ts を更新する必要があります。 これは Power Apps Component Framework がフィールド値を渡す形式です。 これらの値を IInputs インタフェースに追加することで、TypeScript ファイルがその値を参照して正常にコンパイルできます。

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

最初の表示では IFRAME 要素を生成しそれをコントロール コンテナに追加します。 この IFRAME は Bing Map の表示に使用されます。 IFRAME の URL は Bing Map URL に設定され、提供された位置をマップを中央にするために URL のバインド列 (緯度値と経度値) を含みます。

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

関連記事

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