コード コンポーネントの Liquid テンプレート タグ

Power Apps Component Framework により、プロの開発者やアプリメーカーは、モデル駆動型アプリやキャンバス アプリのコード コンポーネントを作成できます。 これらのコード コンポーネントを使用して、フォーム、ビュー、ダッシュボードでデータを操作するユーザーの体験を向上させることができます。 詳細: ポータルでコード コンポーネントを使用する

このリリースでは、ウェブページに 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>%}

サンプルのマッピング コントロールを使用し、コードコンポーネントをポータルで使用するためのソリューションとしてパッケージ化することができます。

チュートリアル: Liquid テンプレート タグを使用したページでコード コンポーネントを使用する

このチュートリアルでは、Power Apps ポータルを構成して、コンポーネントをWebページに追加します。 続いて、ポータルの Web ページにアクセスして、コンポーネントを操作します。

開始する前に

このチュートリアルで使用しているサンプル コード コンポーネントを使用している場合は、まずサンプル ソリューションを環境にインポートする必要があります。 ソリューションのインポートについては、ソリューションのインポートにアクセスしてください。

前提条件

前提条件や、ポータルでサポートしている/していないコード コンポーネントについては、ポータルでコードコンポーネントを使用する を参照してください。

ステップ 1: スタジオから Web ページにコード コンポーネントを追加する

1. ポータルを  Power Apps ポータル Studio で開きます。

2. 左上隅で  新規ページ を選択します。

3.  空白 を選択します。

4. 右側のプロパティ ウィンドウで、Web ページ名を更新します。 たとえば、「マップビューア」を更新します。

5. 部分 URL を更新します。 たとえば、「mapviewer」を更新します。

6. アクセス許可を展開します。

7. 全員が利用可能なページを無効にします。

8. このページへのアクセスを許可する必要がある Web ロールを選択します。

9. liquid ソースコードを編集するには、ページの編集可能領域を選択します。

10. studio のコード エディターを開きます。

11. 次の構文を使用して、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

12. コード エディターを保存して閉じます。

13. 右上隅で、 ブラウザーの Web サイト を選択します。

14. Web ページに、追加されたコントロールが表示されます。

次の手順

概要: ポータルのコード コンポーネントを使用する

参照

Codecomponent Dataverse エンティティ タグ
Codecomponent テンプレート タグ
Power Apps Component Framework の概要
最初のコンポーネントを作成する
モデル駆動型アプリの列またはテーブルにコードコンポーネントを追加する
サンプルのポータル Web API コンポーネントを実装する