次の方法で共有

IFRAME コンポーネントの実装

  • [アーティクル]

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

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 分かかります。 個人データは収集されません (プライバシー ステートメント)。