Power Apps コンポーネントでの React の使用について

  • 10 分

複雑なコード コンポーネントの作成が必要になった場合に、Power Apps Component Framework の機能を使用してロジックを作成することができます。 これらの機能を使用することで、コンポーネントをホスティングするクライアントや、コンポーネントを実行しているデバイスについて、また書式設定などのユーティリティ タイプ サービスについて学ぶことができます。 Dataverse テーブル データとの対話が必要なコンポーネントの場合は、WebAPI 機能を使用してそれを実装します。

シンプルなコンポーネントであれば、HTML を記述して作成するのが一般的ですが、要件が複雑な場合は UI フレームワーク ライブラリを使用した方が簡単です。 JavaScript UI フレームワークには多くの選択肢がありますが、Power Apps コード コンポーネントでは React ライブラリが多く使用されます。

このモジュールの残りの部分では、これらのトピックについて詳しく説明します。 実践的な例をいくつか利用し、フレームワークに含まれる複数の高度な機能を使用しながら、例示された手順に従ってコンポーネントを作成します。

コンポーネント コンテキストの使用

context オブジェクトには、マニフェストおよびユーティリティ関数に定義したプロパティ名にマッピングされる値が、カスタム担当者によって設定されます。 それをコンポーネント ロジックに使用することで、このモジュールでこれからコンポーネントを作成する際に使用する、多くの組み込み機能にアクセスできます。

コンポーネントに渡す context パラメータを、init メソッドと updateView メソッドで使用しますが、 多くの場合、コンポーネントの他のメソッドでもコンテキストに簡単にアクセスできるよう、init メソッドにクラス レベルで変数が入力されます。 次の例では、init メソッドで使用するためにコンテキストを保存しています。

export class ChoicesPicker implements ComponentFramework.StandardControl<IInputs, IOutputs> {
    
    private _context: ComponentFramework.Context<IInputs>;

    public init(
        context: ComponentFramework.Context<IInputs>,
        notifyOutputChanged: () => void,
        state: ComponentFramework.Dictionary,
        container: HTMLDivElement,
    ): void {
     
        this._context = context;

        /* other logic goes here */
    }
}

コンポーネントの context オブジェクトからは、コンポーネントを実行する環境に関して豊富な情報を得ることができます。 以下に、その主なプロパティについて概要を示します。

  • client - クライアント (Web、Outlook、モバイル) やフォーム ファクター (デスクトップ、タブレット、スマートフォン) に関する情報や、オフラインかどうか、ネットワークが使用可能かどうかの情報を含みます。

  • mode - コード コンポーネントの現在の状態に関する情報 (コンポーネントが表示されているか、無効かどうか、および現在の割り当てサイズの値) を含みます。

  • userSettings - 現在のユーザーに関する情報 (言語 ID、ユーザー ID、名前など) を含みます。 モデル駆動型アプリの場合は、現在のユーザーのロール情報を入手するために securityRoles プロパティを使用できます。

この context オブジェクトではさらに、便利な組み込みサービスをいくつも使用することができます。 主なものをいくつか紹介します。

  • device - このプロパティを使用して、デバイスのネイティブな機能を使用するためのメソッドにアクセスできます。 オーディオ、ビデオ、および画像の取り込みや、バー コード値の取得、デバイスの位置情報の特定、ファイルの選択を可能にするメソッドにアクセスできます。

  • factory - 現状ではポップアップ サービスを操作するメソッドのみが用意されていますが、他のサービスへの対応も計画されています。

  • formatting - 通貨や時刻などのデータの書式設定に使用するメソッドにアクセスできます。 ホスティング アプリケーションのユーザーに設定された内容に従って、書式設定を行うことができます。

  • navigation - フォームを開く、URL を開く、ダイアログ (アラート、確認、エラー他) などの、ナビゲーション関連のメソッドにアクセスできます。

  • resources - マニフェストに定義されたリソース ファイルに関するすべての情報を入手するためのメソッドにアクセスできます。 コンポーネントのすべてのコンテンツのローカライズに役立つ、非常に重要なメソッドを使用できます。

  • utils - テーブル メタデータにアクセスできます。また、特定のテーブルに対するユーザーのアクセス許可を確認できます。 lookupObjects メソッドを使用し、コンポーネントから標準の検索ダイアログにアクセスしたり、1 件または複数の行の選択をユーザーに許可したりできます。

  • webAPI - Dataverse テーブル データに対する基本のアクセス許可 (作成、読み取り、更新、削除) を提供します。

以下に、デバイスの pickFile 機能を使用する例を示します。

 private onUploadButtonClick(event: Event): void {
    this._context.device.pickFile().then(this.processFile.bind(this), this.showError.bind(this));
  }

これらのサービスのいくつかは、マニフェストの特定のセクションで、機能の使用をそれぞれ有効にしない限り使用できないことに注意してください。 また、ホスティング アプリの種類によっては使用できないサービスもあります。 たとえば、WebAPI はモデル駆動型アプリと Power Pages でのみ使用し、キャンバス アプリでは使用できません。 詳しくは、サービスごとの参照ページを確認してください。

React の使用

数ある UI フレームワークのなかでも、React は特にメリットの大きい選択肢です。 なぜなら、React の基盤となる Power Apps プラットフォームが、React を内部で使用しているからです。 Power Apps Component Framework でも、同じインフラストラクチャを使用することができます。 そのため、React と Fluent UI のライブラリを各コントロールに手動でパッケージ化する必要がありません。 すべてのコントロールが共通のライブラリ インスタンスとバージョンを共有するため、シームレスで一貫した操作性を得ることができます。

コンポーネントを初期化して React フレームワークを使用するには、次のようにコマンドを入力します。

pac pcf init -n ReactSample -ns SampleNamespace -t field -fw react -npm

このように、-fw (framework の略) を追加するだけで、React を有効にすることができます。 このオプションにより、React に必要な構成が定義された初期ファイルが自動で生成されます。

このモジュールの後半では、この React の機能を使用してコード コンポーネントの構築を行います。