次の方法で共有

フェイスパイル コンポーネントの実装

  • [アーティクル]

このサンプルは、Power Apps component framework を利用してコンポーネントを作成するリアクトの使用方法を示します。 フェイスパイル サンプルコンポーネントは、リアクトと Office UI Fabric リアクト コンポーネントに基づいて実装されます。 このコードは、言及したサードパーティ製ライブラリのベスト プラクティスを明らかにしない場合があります。

応答 Facepile。

以下に使用できます

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

コード

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

重要

Power Apps ホスト アプリケーションは、リアクト上で機能しますが、バンドルするリアクトのバージョンはホストバージョンとは通信せず、そのバージョンにも依存しません。 リアクトの新規コピー (または自分のコンポーネントでバンドルしたサードパーティ ライブラリ) は、そのコントロールのすべてのインスタンスのホストページに読み込まれます。そのため、コンポーネントを追加する際に、どの程度の大きさのページを作成するかに注意してください。 この問題に対するソリューションは将来のリリースに含まれます。

このサンプルは、サードパーティ製ライブラリに依存関係を追加する方法の例を示し、リアクトのために Office UI Fabric コンポーネントを活用する方法と Power Apps component framework とリアクト状態モデル間で双方向のデータ バインディングを実行する方法を紹介します。

コンポーネントサンプルは 3 つの Office UI Fabric コンポーネントから構成されます: フェイスパイル、スライダー、チェックボックスとドロップダウンメニューです。 スライダーを移動すると、フェイスパイルのフェイスの数が変わります。 チェックボックス コンポーネントは、フェイスのフェードインやアウト、あるいは単に表示や非表示をコントロールし、ドロップダウンリストのオプションはフェイスのサイズをコントロールします。 値が設定されていない場合、フェイス番号は 3 に既定で設定されます。

  • コンポーネントが読み込まれると、スライダーはバインド属性値に設定されます。 context.parameters.[property_name].attributes プロパティは関連するメタデータを含みます。
  • イベント ハンドラーは、リアクト コンポーネントのプロップ内を通過されます。これにより、リアクト コンポーネントは値が変更されたホスト Power Apps component framework コントロールを通知できます。 イベント ハンドラーは、 notifyOutputEvents メソッドへの呼び出しが必要かどうかを判断します。
  • スライダーをスライドさせると、リアクトはバインド値を更新し、イベントハンドラーに応答しますバインド値を更新して、渡されたイベントハンドラーを呼び出します。 このハンドラー内では、呼び出しが notifyOutputEvents メソッドに実行されると、コントロールの getOutputs メソッドが非同期的に呼び出され、 Power Apps component framework に流れます。
  • フレームワーク ホストはバインド属性値を更新し、更新された値はコンポーネントに渡され、updateView メソッドがトリガーされます。 その後コントロールは新しい値を持つリアクト コンポーネントを再表示します。

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

注意

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

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