キャンバス コンポーネントの概要

コンポーネントはキャンバス アプリの再利用可能なビルディング ブロックであるため、アプリ メーカーは コンポーネント ライブラリ を使用してアプリ内でまたはアプリ間で使用するカスタム コントロールを作成できます。 コンポーネントは、カスタム プロパティなどの高度な機能を使用して、複雑な機能を有効にすることができます。 この記事では、コンポーネントの概念およびサンプルを紹介します。

コンポーネントは、類似したコントロール パターンを持つ大きなアプリを作成するのに役立ちます。 アプリ内のコンポーネント定義を更新すると、アプリ内のすべてのインスタンスに変更が反映されます。 コンポーネントは、コントロールのコピーや貼り付けの必要性を排除し、パフォーマンスを改善することにより、工数の重複を減らします。 また、コンポーネントは コンポーネント ライブラリ の使用時に共同開発を作成し、組織内でのルック アンド フィールを標準化するのに役立ちます。

このビデオでは、キャンバス アプリでコンポーネントを使用する方法について説明します。

キャンバス アプリのコンポーネント

この記事で説明するようにアプリ内から、また コンポーネント ライブラリ 内で新しいコンポーネントを作成することにより、コンポーネントを作成することができます。 コンポーネント ライブラリは、複数のアプリ画面間でコンポーネントを使用する要件のために使用する必要があります。 また、既存のコンポーネントを既存の、または新しいコンポーネント ライブラリにコピーすることもできます。

アプリ内でコンポーネントを作成するには、ツリー表示に移動し、コンポーネント タブを選択し、次に新しいコンポーネントを選択します。

新しいコンポーネントを選択して空のキャンバスを開きます。 キャンバスのコンポーネント定義の一部としてコントロールを追加できます。 キャンバスでコンポーネントを編集する場合、他のアプリ画面の同じコンポーネントのインスタンスが更新されます。 すでに作成されたコンポーネントを再利用するアプリは、コンポーネントの変更を公開した後にコンポーネントの更新を受け取ることもできます。

画面を選択した後で、左側のペインにある既存のコンポーネントのリストからコンポーネントを選択できます。 コンポーネントを選択すると、コントロールを挿入するように、そのコンポーネントのインスタンスが画面に挿入されます。

アプリ内で利用可能なコンポーネントは、ツリー ビュー内のコンポーネント リストのカスタム カテゴリの下に一覧表示されます。 コンポーネント ライブラリからインポートされたコンポーネントは、ライブラリ コンポーネント カテゴリーの下に一覧表示されます。

カスタム プロパティ

1 つ以上のカスタム プロパティを作成すると、コンポーネントは入力値を受け取り、データを発行できます。 これらのシナリオは高度であり、式 およびコントラクトのバインドについて理解している必要があります。

Input プロパティは、コンポーネントで使用するデータをコンポーネントが受け取る方法です。 Input プロパティは、コンポーネントのインスタンスが選択されている場合、右側のウィンドウのプロパティ タブに表示されます。 他のコントロールの標準プロパティを構成する場合と同様に、式または計算式を使用して入力プロパティを構成できます。 その他のコントロールには、テキスト入力コントロールの既定プロパティなど、入力プロパティがあります。

Output プロパティはデータまたはコンポーネントの状態を発行するために使用されます。 たとえば、ギャラリー コントロールの選択済み上のプロパティは出力プロパティです。 出力プロパティを作成するとき、その他のどのコントロールがコンポーネントの状態を参照できるか確認できます。

次に、これらの概念についてさらに説明します。

コンポーネントの例の作成

この例では、次の図に似たメニュー コンポーネントを作成します。 後でテキストを変更して、複数の画面、アプリ、またはその両方で使用することもできます。

新しいコンポーネントの作成

1. 空白のキャンバス アプリ を作成します。

2. ツリー ビュー で、コンポーネント を選択し、新規コンポーネント を作成します。

   

3. 左側のペインで新しいコンポーネントを選択して、省略記号 (...) を選択し、次に名前の変更を選択します。 MenuComponent と名前を入力、または貼り付けます。

4. 右側のウィンドウで、コンポーネントの幅を 150、高さを 250 に設定し、新しいカスタム プロパティを選択します。 必要に応じて、高さと幅にその他の値を設定することもできます。

   

5. 表示名、プロパティ名、および説明ボックスに、テキストをアイテムとして入力するか、または貼り付けます。

   

   計算式を記述するとき、この名前でコンポーネントを参照するので、プロパティ名にスペースを含めないでください。 たとえば、ComponentName.PropertyName です。

   コンポーネントを選択するとき、右側のウィンドウのプロパティ タブに表示名が表示されます。 内容を示す表示名は、ユーザーおよびその他のメーカーがこのプロパティの目的を理解するのに役立ちます。 説明は、プロパティ タブのこのプロパティの表示名にカーソルを置いたとき、ツールヒントに表示されます。

6. データ型リストから新規を選択して、そして作成を選択します。

   

   アイテム プロパティは、指定したデータ型に基づいて規定値に設定されます。 ニーズに合わせた値に設定できます。 テーブルまたはレコードのデータ型を指定した場合、コンポーネントに入力するデータ スキーマに一致するようにアイテム プロパティの値を変更することがあります。 この場合、文字列のリストに変更します。

   右側のウィンドウのプロパティ タブのプロパティの名前を選択すると、数式バーでプロパティの値を設定できます。

   

   次の図が示すように、右側のウィンドウの詳細設定タブでプロパティの値を編集することもできます。

7. コンポーネントのアイテム プロパティを次の式に設定します。

   Table({Item:"SampleText"})
   

   

8. コンポーネントで、空で垂直のギャラリー コントロールを挿入し、タイトルとしてプロパティ ウィンドウのレイアウトを選択します。

9. プロパティの一覧にアイテム プロパティが表示されていることを確認します (既定の動作)。 その後、そのプロパティの値を次の式に設定します。

   MenuComponent.Items
   

   このように、ギャラリー コントロールのアイテム プロパティは、コンポーネントのアイテム入力プロパティを読み込み、それに依存します。

10. 任意 - ギャラリー コントロールの BorderThickness プロパティを 1 に、その TemplateSize プロパティを 50 に設定します。 必要に応じて、境界線の太さおよびテンプレート サイズの値をその他の値に更新することもできます。

コンポーネントを画面に追加する

次に、コンポーネントを画面に追加し、コンポーネントが表示する文字列のテーブルを指定します。

1. 左側のペインで画面のリストを選択して、次にデフォルトの画面を選択します。

   

2. 挿入タブで、コンポーネント メニューを開いてから、MenuComponent を選択します。

   

   既定で、新しいコンポーネントの名前は MenuComponent_1 になります。

3. MenuComponent_1 のアイテム プロパティを、この数式に設定します。

   Table({Item:"Home"}, {Item:"Admin"}, {Item:"About"}, {Item:"Help"})
   

   このインスタンスはこの図に似ていますが、各インスタンスのテキストおよびその他のプロパティをカスタマイズできます。

   

出力プロパティの作成および使用

ここまでで、コンポーネントを作成し、アプリに追加しました。 次に、ユーザーがメニューで選択したアイテムを反映する出力プロパティを作成します。

1. コンポーネントの一覧を開き、MenuComponent を選択します。

2. 右側のウィンドウのプロパティ タブで、新しいカスタム プロパティを選択します。

3. 表示名、プロパティ名、および説明ボックスに、選択済みを入力するか、または貼り付けます。

4. プロパティの型の下で、出力を選択し、次に作成を選択します。

   

5. 詳細設定タブで、選択済みのプロパティの値をこの式に設定し、必要に応じてギャラリー名の数字を調整します。

   Gallery1.Selected.Item
   

   

6. アプリの既定の画面でラベルを追加し、テキスト プロパティをこの式に追加し、必要に応じてコンポーネント名の数字を調整します。

   MenuComponent_1.Selected
   

   MenuComponent_1 は既定のインスタンス名であり、コンポーネント定義の名前ではありません。 すべてのインスタンスの名前を変更できます。

7. Alt キーを押しながら、メニューの各項目を選択します。

   ラベル コントロールには、最近選択したメニュー項目が反映されます。

Scope

入力および出力のプロパティは、コンポーネントとそのホスト アプリとの間のインターフェイスを明確に定義します。 既定では、コンポーネントはカプセル化されているため、アプリ間でコンポーネントを再利用しやすく、プロパティを使用してコンポーネントの内外に情報を渡す必要があります。 スコープ制限により、コンポーネントのデータ コントラクトは単純でまとまりがあるものになり、コンポーネント定義の更新を—特に、コンポーネント ライブラリのあるアプリ間で、可能にします。

ただし、コンポーネントがデータ ソースまたは変数をそのホストと共有する場合があります。 特に、コンポーネントがある特定のアプリでの使用のみを目的としている場合です。 このような場合は、コンポーネントのプロパティ ペインで アクセス アプリ スコープ スイッチをオンにすることで、アプリ レベルの情報に直接アクセスできます:

アクセス アプリ スコープ がオンの場合、コンポーネント内から以下にアクセスできます:

• グローバル変数
• コレクション
• 画面上のコントロールとコンポーネント (テキスト入力 コントロールなど)
• 表形式のデータ ソース (Dataverse テーブルなど)

この設定をオフにすると、コンポーネントでは上記のいずれも使用できなくなります。 Set と Collect 関数は引き続き使用できますが、結果の変数とコレクションはコンポーネント インスタンスにスコープされ、アプリと共有されません。

この設定がオンかオフかに関係なく、Azure Blob Storage やカスタム コネクタなどの表形式ではないデータ ソースを使用できます。これらのデータ ソースは、アプリ リソースではなく、環境リソースを参照するようなものだと考えてください。コンポーネントがコンポーネント ライブラリからアプリに取り込まれると、環境からのこれらのデータ ソースも取り込まれます。

参照する単一のアプリ スコープがないため、コンポーネント ライブラリ内のコンポーネントはアプリ スコープにアクセスすることはできません。 したがって、この設定はこのコンテキストでは使用できず、事実上オフになっています。アプリにインポートして、コンポーネント メーカーがカスタマイズを許可した場合、スイッチを有効にして、アプリ スコープを使用するようにコンポーネントを変更できます。

コンポーネントをインポートおよびエクスポートする (廃止)

この機能は廃止されたため、コンポーネントのインポートおよびエクスポート機能はデフォルトで無効になっています。 コンポーネントを操作するためにお勧めする方法として、コンポーネント ライブラリ を使用すると、機能が削除されるまで例外としてアプリごとにこの機能を有効にすることができます。 これをするには、Power Apps Studio のアプリを編集する に続いて、設定 > 今後の機能 > リタイア に移動し、 コンポーネントのエクスポートとインポート をオンに設定します。

この機能を有効にすると、次の機能を使用してコンポーネントをインポートおよびエクスポートできます。

その他のアプリからコンポーネントをインポートする

アプリから別のアプリに 1 つ以上のコンポーネントをインポートするには、挿入メニューからコンポーネントのインポートを選択し、カスタム ドロップダウン メニューを使用します。 または、左側のペインのツリービューでコンポーネントを使用します。

ダイアログ ボックスには、編集するためのアクセス許可があるコンポーネントを含む、すべてのアプリが一覧表示されます。 アプリを選択し、インポートを選択して、そのアプリ内にある最新公開バージョンのコンポーネントすべてをインポートします。 少なくとも 1 つのコンポーネントをインポートした後、コピーを編集して、不要なものをすべて削除できます。

アプリと既存のコンポーネントをローカルのファイルに保存し、インポートすることによりファイルを再利用できます。 ファイルを使用して、コンポーネントを別のアプリにインポートできます。

アプリに同じコンポーネントの変更したバージョンが含まれている場合、変更したバージョンを置き換えるか、インポートをキャンセルするか決定するように求められます。

アプリでコンポーネントを作成した後、その他のアプリはインポートすることにより、このアプリからコンポーネントを使用できます。

アプリからコンポーネントをエクスポートする

コンポーネントをファイルにエクスポートし、別のアプリにインポートするためにダウンロードできます。

左側のペインのツリー ビューのコンポーネント セクションからコンポーネントのエクスポートオプションを選択します。

代わりに、挿入メニューを使用し、カスタム ドロップダウン メニューを選択することもできます。

コンポーネントのエクスポートを選択して、コンポーネントをファイルにダウンロードします。

ダウンロードしたコンポーネント ファイルは、ファイル名の拡張子として .msapp を使用します。

エクスポートされたコンポーネント ファイルからコンポーネントをインポートする

エクスポートされたコンポーネント ファイルからコンポーネントをインポートするには、挿入メニューでカスタムドロップダウン メニューからか、左側のペインのツリービューのコンポーネントからのいずれかを使用して、コンポーネントのインポートを選択します。 コンポーネント ダイアログ ボックスから、その他のコンポーネントまたはアプリを選択する代わりにファイルのアップロードを選択します。

開くダイアログ ボックスからコンポーネント ファイルの場所を参照し、開くを選択してアプリ内のコンポーネントをインポートします。

エクスポートされたアプリからコンポーネントをインポートする

ファイル > 名前を付けて保存オプションを使用して、アプリをローカルに保存することができます。

アプリを保存すると、ファイルからコンポーネントをインポートするのと同じ方法を使用して、このアプリのコンポーネントを再利用できます。 エクスポートされたコンポーネント ファイルからコンポーネントをインポートするの前のセクションの手順に従います。

既知の制限

• アプリ内に同じコンポーネントのインスタンスが 2 つ以上ある場合、custom input プロパティを同じインスタンスまたは異なるインスタンス間で custom output プロパティ値に構成することはできません。 このアクションにより、循環参照警告メッセージが表示されます。 この制限を回避するために、アプリ内にコンポーネントのコピーを作成できます。
• コンポーネント ライブラリに Power Automate フローを追加して実行することはサポートされていません。
• コンポーネントを使用して、それらのデータソース (フォーム、流体グリッド、データテーブルなど) からのデータを含むデータソースまたはコントロールを保存することはできません。
• ギャラリーやフォーム (SharePoint フォームを含む) にコンポーネントを挿入することはできません。
• コンポーネントは、UpdateContext 関数はサポートしていませんが、Set 関数を使用してコンポーネントの変数の作成および更新を行うことができます。 これらの変数のスコープはコンポーネントに制限されていますが、カスタム出力プロパティを通じてコンポーネントの外部から変数にアクセスすることができます。

次の手順

再利用可能なコンポーネントのリポジトリを作成するために、コンポーネント ライブラリ を使用する方法を学びます。

参照

• コンポーネント ライブラリ
• コンポーネント ライブラリ アプリケーション ライフサイクル管理 (ALM)
• コンポーネントの入力フィールドをマップする
• マルチメディアをコンポーネントに追加する
• コンポーネントの動作の数式
• Power Apps component framework
• モデル駆動型アプリのカスタム ページにキャンバス コンポーネントを追加する