IFRAME コンポーネントの実装

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

以下に使用できます

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

コード

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

注意

Power Apps component framework はコンポジット列をまだサポートしていないため、このコンポーネントを既定の緯度と経度の住所列にバインドできません。 コード コンポーネントを別の浮動小数点フィールドにバインドする必要があります。

このサンプル コンポーネントは 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 の概要

注意

ドキュメントの言語設定についてお聞かせください。 簡単な調査を行います。 (この調査は英語です)

この調査には約 7 分かかります。 個人データは収集されません (プライバシー ステートメント)。