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

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

注意

このセクションでは、ローコード UI 拡張機能を含むキャンバスコンポーネントについて説明します。プロの開発者は、Power Apps component framework を使用してコードコンポーネントを構築することもできます。
キャンバスコンポーネントは、カスタムページおよびコンポーネントライブラリを使用するモデル駆動型アプリでも使用できます。詳細情報: モデル駆動型アプリのカスタムページにキャンバスコンポーネントを追加する

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

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

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

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

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

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

ツリービューを使用して新しいカスタムコンポーネントを作成する

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

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

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

アプリにコンポーネントを挿入する

注意

この記事で説明するコンポーネントは、開発者およびメーカーがモデル駆動型アプリおよびキャンバスアプリ用のコードコンポーネントを作成できるようにする Power Apps component framework とは異なります。詳細については、Power Apps component framework の概要。

カスタムプロパティ

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

注意

強化されたコンポーネントプロパティの実験的な機能では、関数や動作関数などのプロパティのオプションがさらに増えています。詳細については、キャンバスコンポーネントのプロパティ (試験版) を参照してください

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

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

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

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

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

注意

再利用するコンポーネントを作成するとき、コンポーネントライブラリを使用することをお勧めします。アプリ内でコンポーネントを更新した場合、コンポーネントの更新はアプリ内で利用できるだけです。コンポーネントライブラリを使用しているとき、ライブラリ内のコンポーネントの更新および公開を行うと、コンポーネントを更新するよう要求されます。

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

空白のキャンバスアプリを作成します。
ツリービュー で、コンポーネント を選択し、新規コンポーネント を作成します。
左側のペインで新しいコンポーネントを選択して、省略記号 (...) を選択し、次に名前の変更を選択します。 MenuComponent と名前を入力、または貼り付けます。
右側のウィンドウで、コンポーネントの幅を 150、高さを 250 に設定し、新しいカスタムプロパティを選択します。必要に応じて、高さと幅にその他の値を設定することもできます。
表示名、プロパティ名、および説明ボックスに、テキストをアイテムとして入力するか、または貼り付けます。

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

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

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

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

次の図が示すように、右側のウィンドウの詳細設定タブでプロパティの値を編集することもできます。
コンポーネントのアイテム プロパティを次の式に設定します。
```
Table({Item:"SampleText"})
```
コンポーネントで、空で垂直のギャラリー コントロールを挿入し、タイトルとしてプロパティウィンドウのレイアウトを選択します。
プロパティの一覧にアイテム プロパティが表示されていることを確認します (既定の動作)。その後、そのプロパティの値を次の式に設定します。
```
MenuComponent.Items
```
このように、ギャラリー コントロールのアイテム プロパティは、コンポーネントのアイテム入力プロパティを読み込み、それに依存します。
任意 - ギャラリー コントロールの BorderThickness プロパティを 1 に、その TemplateSize プロパティを 50 に設定します。必要に応じて、境界線の太さおよびテンプレートサイズの値をその他の値に更新することもできます。

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

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

左側のペインで画面のリストを選択して、次にデフォルトの画面を選択します。
挿入タブで、コンポーネント メニューを開いてから、MenuComponent を選択します。

既定で、新しいコンポーネントの名前は MenuComponent_1 になります。
MenuComponent_1 のアイテム プロパティを、この数式に設定します。
```
Table({Item:"Home"}, {Item:"Admin"}, {Item:"About"}, {Item:"Help"})
```
このインスタンスはこの図に似ていますが、各インスタンスのテキストおよびその他のプロパティをカスタマイズできます。

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

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

コンポーネントの一覧を開き、MenuComponent を選択します。
右側のウィンドウのプロパティ タブで、新しいカスタムプロパティを選択します。
表示名、プロパティ名、および説明ボックスに、選択済みを入力するか、または貼り付けます。
プロパティの型の下で、出力を選択し、次に作成を選択します。
詳細設定タブで、選択済みのプロパティの値をこの式に設定し、必要に応じてギャラリー名の数字を調整します。
```
Gallery1.Selected.Item
```
アプリの既定の画面でラベルを追加し、テキスト プロパティをこの式に追加し、必要に応じてコンポーネント名の数字を調整します。
```
MenuComponent_1.Selected
```
MenuComponent_1 は既定のインスタンス名であり、コンポーネント定義の名前ではありません。すべてのインスタンスの名前を変更できます。
Alt キーを押しながら、メニューの各項目を選択します。

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

Scope

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

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

コンポーネントプロパティペインのアクセスアプリスコープスイッチ

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

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

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

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

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

注意

コンポーネントのインスタンスをコンポーネントライブラリ内の画面に挿入し、テスト目的でその画面をプレビューできます。
Power Apps Mobile を使用すると、コンポーネントライブラリは表示されません。

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

注意

この機能は廃止されました。コンポーネントライブラリは、アプリ間でコンポーネントを再利用するのに推奨されている方法です。コンポーネントライブラリを使用する場合、アプリは使用するコンポーネントへの依存関係を保持します。依存コンポーネントの更新が利用可能になると、アプリメーカーに通知されます。したがって、新しい再利用可能なコンポーネントはすべて、その代わりにコンポーネントライブラリ内で作成する必要があります。

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

コンポーネントのエクスポートおよびインポートを有効にする

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

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

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

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

コンポーネントのインポートダイアログボックス

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

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

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

注意

他のアプリからインポートしたコンポーネントが元のアプリで変更された場合、最新のコンポーネントの変更を受け取るには、使用するアプリでコンポーネントを手動で再度インポートする必要があります。コンポーネントの更新をより効率的に行うには、代わりにコンポーネントライブラリを使用します。

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

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

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

コンポーネントツリービューのエクスポート

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

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

コンポーネントのダウンロード

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

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

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

コンポーネントファイルのインポート

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

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

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

アプリの保存

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

既知の制限

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

次の手順

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

参照

注意

ドキュメントの言語設定についてお聞かせください。簡単な調査を行います。 (この調査は英語です)

この調査には約 7 分かかります。個人データは収集されません (プライバシーステートメント)。

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

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

カスタムプロパティ