次の方法で共有

チュートリアル: データセット コード コンポーネントを使用する

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

注意

  • このチュートリアルでは、既存の Power Apps Component Framework チュートリアルに基づき、リストの Power Apps グリッド コントロール (プレビュー) コンポーネントと空白ページのサブ グリッドを順に説明します。 また、既存や新規のコンポーネントを使用して、このチュートリアルで扱う他の Web ページに追加できます。 その場合、このチュートリアルの手順に従う際は、コンポーネントと Web ページに注意してください。 ポータルが対応しているコード コンポーネントの詳細については ポータルでコード コンポーネントを使用する を参照してください。 

このチュートリアルで学習する内容は次のとおりです。

  • Power Apps Component Framework を使用してサンプル コンポーネントを作成する
  • Microsoft Dataverse 環境に対してコンポーネントをパッケージ化する
  • Power Pages を構成してコンポーネントを Web ページに追加する
  • Power Pages の Web ページにアクセスして、コンポーネントを操作する

前提条件

  • ポータルのバージョン 9.4.9.xx 以上。 
  • Dataverse 基本ポータル パッケージ9.3.2209.x 以上。 

ステップ 1 - 初めてコンポーネントを作成する

最初のコンポーネントを作成する チュートリアルを完了します。

注意

最初のコンポーネントを作成する の最後に、TSLinearInputComponent という名前のコンポーネントをパッケージ化し、Dataverse 環境にアップロードします。

ステップ 2 - モデル駆動型アプリが含むビューやサブグリッドにコード コンポーネントを追加する

コンポーネントを アカウント テーブル、ビュー、サブグリッドに追加する場合は、こちらの手順に従います: ビューとサブグリッドを編集可能なグリッドに変換する (プレビュー) 

ステップ 3 - ポータルが含むリストとサブグリッドにコード コンポーネントを追加する

この手順では、ポータル管理アプリで新しいリストを作成してから、作成したリストにコンポーネントを追加していきます。 代わりに、既存のリストを使用することもできます。 

ステップ 3.1 - コード コンポーネントをリストに追加する

次の手順では、コントロールをリスト コンポーネントに追加する方法の概要を示します。

  1. ポータル管理アプリ を開きます。

  2. 左側のペインで、コンテンツ の下にある、リスト を選択します。 

  3. 新規 を選択します。 

  4. 名前 を入力します。 例えば コード コンポーネントを含むアカウント リスト。 

  5. テーブル名 に対して、このチュートリアルの前半でコード コンポーネントを追加したテーブルを選択します。 

  6. ポータル Web サイトを選択します。 

  7. 詳細設定グリッドの配下にビューを追加します。 

    詳細設定グリッド内にビューを追加する。

  8. 構成したコード コンポーネントを使用する で はい を選択します 

    コード コンポーネントを使用します。

これで、リスト コンポーネントをページに追加できるようになりました。 Web ページにリストを追加する方法の詳細については、リストを追加する を参照してください。

ステップ 3.2 - コード コンポーネントをサブグリッドに追加する

コントロールはサブグリッドでも有効にすることができます。

  1. ポータル管理アプリ を開きます。

  2. 左側のペインのコンテンツから、基本フォームを選択します。 

  3. 前述の手順で作成した基本フォームを選択します。 

  4. 関連を選択します。 

  5. 基本フォーム メタデータ を選択します。 

  6. 新しい基本フォーム メタデータを選択します。 

  7. 種類として サブグリッド を選択します。 

  8. サブグリッド名 を選択します。 

    コード コンポーネントをサブグリッドに追加する。

  9. コントロール スタイル には、コード コンポーネント を選択します。 

    コントロール スタイルを選択する。

フォームは Web ページに追加する必要があります。 Web ページにフォーム コンポーネントを追加する方法の詳細については、フォームを追加する を参照してください。

Liquid タグを使用してデータセットに基づくコード コンポーネントを追加する

データセットに基づくコード コンポーネントは、codecomponentLiquid テンプレート タグを使用して追加できます。 読み込む必要のあるコード コンポーネントを示すキーは、名前属性を使用して渡します。 キーには GUID (コードコンポーネントの ID)、または Microsoft Dataverse でインポートされたコード コンポーネントの名前を指定します。 

Power Pages での Liquid の使用の詳細については、Liquid の概要 を参照してください。

コードコンポーネントが求めるするプロパティの値は、キーと値のペアを ":" (コロン記号) で区切って渡す必要があります。ここでキーはプロパティ名、値は 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 グリッド コントロールではサポートされていません。

参照

Power Pages でコード コンポーネントを使用する