コード コンポーネントの Liquid テンプレート タグ
注意
2022 年 10 月 12 日より、Power Apps ポータルは Power Pages となります。 詳細: Microsoft Power Pages の一般提供が開始されました (ブログ)
Power Apps ポータルのドキュメントは、近日中に Power Pages ドキュメントに移行、統合されます。
Power Apps Component Framework により、プロの開発者やアプリメーカーは、モデル駆動型アプリやキャンバス アプリのコード コンポーネントを作成できます。 これらのコード コンポーネントを使用して、フォーム、ビュー、ダッシュボードでデータを操作するユーザーの体験を向上させることができます。 詳細: ポータルでコード コンポーネントを使用する
重要
コード・コンポーネント用の Liquid テンプレート タグには、ポータルのバージョン 9.3.10.x またはそれ以降 が必要です。
このリリースでは、ウェブページに Liquid テンプレート タグを使用してコード コンポーネントを追加する機能を導入しており、ポータルのフォーム上のフィールドレベルのコンポーネントに有効な Web API を使用したコンポーネントを追加できるようになりました。
コード コンポーネントは、codecomponent Liquid テンプレート タグを使用して追加できます。 読み込む必要のあるコード コンポーネントを示すキーは、name 属性を使用して渡されます。 キーには GUID (コードコンポーネントの ID)、または Microsoft Dataverse でインポートされたコード コンポーネントの名前を指定します。
コードコンポーネントが求めるするプロパティの値は、キーと値のペアを ":" (コロン記号) で区切って渡す必要があります。ここでキーはプロパティ名、値は JSON 文字列の値です。
{% codecomponent name: <ID or name> <property1:value> <property2:value> %}
たとえば、controlValue という名前の入力パラメータを求めるコードコンポーネントを追加するには、以下の Liquid テンプレートタグを使用します。
{% codecomponent name:abc_SampleNamespace.MapControl controlValue:'Space Needle' controlApiKey:<API Key Value>%}
ヒント
この例では、パラメーターに controlvalue と controlApiKey を使用していますが、使用するコンポーネントによっては、異なるパラメータ名が必要になる場合があります。
サンプルのマッピング コントロールを使用し、コードコンポーネントをポータルで使用するためのソリューションとしてパッケージ化することができます。
注意
コミュニティ が 作成した リソースについては Microsoft ではサポートすることができません。 コミュニティ リソースに関するご質問または問題については、リソースの発行元にお問い合わせください。 これらのリソースを使用する前に、Power Apps component framework のガイドラインを満たしていることを確認し、参照目的でのみ使用するようにしてください。
チュートリアル: Liquid テンプレート タグを使用したページでコード コンポーネントを使用する
このチュートリアルでは、Power Apps ポータルを構成して、コンポーネントをWebページに追加します。 続いて、ポータルの Web ページにアクセスして、コンポーネントを操作します。
開始する前に
このチュートリアルで使用しているサンプル コード コンポーネントを使用している場合は、まずサンプル ソリューションを環境にインポートする必要があります。 ソリューションのインポートについては、ソリューションのインポートにアクセスしてください。
前提条件
前提条件や、ポータルでサポートしている/していないコード コンポーネントについては、ポータルでコードコンポーネントを使用する を参照してください。
注意
このチュートリアルでは、Power Apps Component Framework を使用して作成したサンプル コード コンポーネントを使用し、Web ページ上のマップ コントロールを実行します。 また、既存または新規のコンポーネントを使用して、このチュートリアルの他の Web ページを使用することもできます。 この場合、このチュートリアルのステップを実行する際には、必ずご利用のコンポーネントと Web ページを使用してください。 コード コンポーネントの作成方法の詳細については、最初のコンポーネントを作成するにアクセスしてください。
ステップ 1: スタジオから Web ページにコード コンポーネントを追加する
ポータルを Power Apps ポータル Studio で開きます。
左上隅で 新規ページ を選択します。
空白 を選択します。
右側のプロパティ ウィンドウで、Web ページ名を更新します。 たとえば、「マップビューア」を更新します。
部分 URL を更新します。 たとえば、「mapviewer」を更新します。
アクセス許可を展開します。
全員が利用可能なページを無効にします。
このページへのアクセスを許可する必要がある Web ロールを選択します。
liquid ソースコードを編集するには、ページの編集可能領域を選択します。
studio のコード エディターを開きます。
次の構文を使用して、Liquid テンプレート タグを使用してコントロールを追加します:
{% codecomponent name:abc\_SampleNamespace.MapControl controlValue:'Space Needle' controlApiKey:<API Key Value> %}ヒント
インポートしたすべてのコンポーネントの詳細の検索や、コンポーネント名を検索するには、CustomControl Web APIを参照します。
例:
コンポーネントの検索方法:
https://contoso.api.crm10.dynamics.com/api/data/v9.2/customcontrols?$select=ContosoCustomControlNameコンポーネントの入力パラメータを取得する方法:
https://contoso.api.crm10.dynamics.com/api/data/v9.2/customcontrols?$filter=name eq 'ContosoCustomControlName' &$select=manifest
コード エディターを保存して閉じます。
右上隅で、 ブラウザーの Web サイト を選択します。
Web ページに、追加されたコントロールが表示されます。
次の手順
参照
Codecomponent Dataverse エンティティ タグ
Codecomponent テンプレート タグ
Power Apps Component Framework の概要
最初のコンポーネントを作成する
モデル駆動型アプリの列またはテーブルにコードコンポーネントを追加する
サンプルのポータル Web API コンポーネントを実装する
注意
ドキュメントの言語設定についてお聞かせください。 簡単な調査を行います。 (この調査は英語です)
この調査には約 7 分かかります。 個人データは収集されません (プライバシー ステートメント)。