モデル駆動型アプリのカスタムページにコードコンポーネントを追加する

[アーティクル]
04/18/2023

この記事では、カスタムページ内の Power Apps component framework を使用するプロの開発者により構築されたコードコンポーネントの使用について概説します。ローコードカスタム UX 拡張性については、モデル駆動型アプリのカスタムページにキャンバスコンポーネントを追加するを参照してください

重要

カスタムページは製品が大幅に変更された新機能であり、現在、カスタムページの既知の問題に概説されているいくつかの既知の制限があります。

注意

カスタムページでは、キャンバスアプリで現在サポートされているすべてのコンポーネントフレームワーク API がサポートされます。
WebAPI やナビゲーションなどの特定のモデル駆動型アプリ固有の API では、カスタムページのアプリサポートが公開されました。これらの API は、カスタムページのコードコンポーネントで使用でき、最終的に公開されたアプリで機能します。
各プラットフォームでの個々の API サポートの状態については、Power Apps component framework API リファレンスを参照してください

コードコンポーネントは、プロの開発者がアプリ内で使用するカスタムコードコンポーネントを作成する機能を提供します。このプロコード拡張メカニズムでは、組織全体のすべてのアプリ作成者が利用できるコンポーネントをシームレスに拡張するためのファーストクラスのアプリケーションライフサイクル管理 (ALM) を提供します。コードコンポーネントは、カスタムページ、キャンバス、モデル駆動型アプリ全体で再利用できます。これらは、標準 Microsoft Dataverse ソリューションを使用して一元的に更新、パッケージ化、および移動できます。詳細: Power Apps Component Framework の概要

カスタムページの Power Apps component framework を有効化する

カスタムページ内でコードコンポーネントを使用するには、Power Apps component framework 機能を有効にする必要があります。詳細情報: Power Apps component framework 機能を有効にする

カスタムページで使用するコードコンポーネントを作成する

このセクションでは、コードコンポーネントを作成、インポート、およびテストする方法を概説します。

Dataverse でコードコンポーネントを作成しインポートする

カスタムページのコードコンポーネントは、キャンバスアプリの場合と同じパターンに従います。コードコンポーネントは、カスタムページに追加する前に、最初に実装する必要があります。コードコンポーネントを作成するには、最初のコンポーネントを作成するを参照してください。

また、OOB サンプルコンポーネントを試してジャンプスタートすることもできます。コードコンポーネントの実装が完了したら、ソリューションにパッケージ化して、Dataverse に追加できます。それによりモデル駆動型アプリおよびキャンバスアプリに沿ったすべてのカスタムページで使用できるようにします。詳細情報: コードコンポーネントアプリケーションのライフサイクル管理 (ALM)。

カスタムページでコードコンポーネントをインポートおよび使用する

環境では、カスタムページはソリューションを使用して Dataverse 以前にインポートされたすべてのコードコンポーネントを使用できます。左側ウィンドウで、追加 (+) を選択してから、ページの下部でその他のコンポーネントを入手するを選択します。 コンポーネントをインポートするウィンドウにコードタブが表示され、環境に存在するすべてのコードコンポーネントが表示されます。

注意

コンポーネントをインポートするウィンドウでコードタブが表示されない場合、キャンバスアプリの Power Apps component framework 機能設定が有効になっていることを確認してください。詳細情報: Power Apps component framework 機能を有効にする
また、最新のキャンバスアプリスタジオ作成バージョンで作業していることを確認してください。

新しく追加されたコードコンポーネントは、コードコンポーネント セクションで使用できるようになりました。カスタムページに追加できます。

スタジオと公開されたアプリ内のコードコンポーネントをテストする

キャンバスアプリと同様に、コードコンポーネントは対話型であり、カスタムページスタジオ作成環境でテストできます。ただし、Web APIs と Navigation のように、カスタムページの実行時にしかサポートされない特定の API が呼び出されると「メソッドが実装されていません」というエラーメッセージが表示されます。

このエラーを解除して、カスタムページを公開できます。次に、このカスタムページをモデル駆動型アプリに追加し、アプリを公開して、カスタムページの Web API の動作を確認します。

下の画像は、標準の Web API サンプルコントロールおよびナビゲーション API コントロールがカスタムページに追加され、公開されたモデル駆動型アプリ内で機能していることを示します。

追加のコードコンポーネントリソース

Microsoft からその他のサンプルコンポーネントも使用できます。

標準のサンプルコントロールをカスタムページに追加します。

または Power Apps コミュニティギャラリーからいくつか試してみることもできます。

コンポーネントギャラリー。

次の方法で共有

モデル駆動型アプリのカスタムページにコードコンポーネントを追加する

カスタムページの Power Apps component framework を有効化する