コンポーネントは以下4つのプロパティの型があります。
- データ
- 関数
- イベント
- アクション
これらの使い分けと、それぞれの活用方法を紹介します。
![](https://powerplatformnikki.com/wp-content/uploads/2024/02/92e8aa0b621ca7c33130e02f6b841ebe.png)
この記事はJPPGB #9での登壇内容を含んでいます。登壇資料↓
概要
Power Appsで再利用可能な共通部品を作成することのできる機能が、コンポーネントです。
コンポーネントには主に、
- コントロールの共通部品化
- 関数の汎用化・共通化
による再利用可能な部品の作成が目的となることが多いです。
コンポーネントを作成する判断基準
- アプリ内で複数回似たようなロジックを書いている箇所
- 複雑な数式
- 全社的に再利用する可能性が高いロジック
などに当てはまる場合はコンポーネント化した方がいいと考えています。
コンポーネントを作成する場合は初心者が簡単に導入できるように、手順書などを作成しましょう。
全てのプロパティの型を表示させる方法
データ以外はプレビュー機能であるため、何も設定していない状態では入力または出力しか選択することができません。
![](https://powerplatformnikki.com/wp-content/uploads/2024/02/463287924bbca42f00a4c56bc72b2ec3.png)
設定から拡張コンポーネントのプロパティをオンにすることで、全てのプロパティの型を表示させることができます。
![](https://powerplatformnikki.com/wp-content/uploads/2024/02/ef1e09ec8b29a1348bdc7f1d7cbe26d4.png)
プロパティの型を理解しましょう
コンポーネントを作成するには、プロパティの型を十分理解する必要があります。
データ
コンポーネントの基本的な使い方で、プレビュー機能を有効化していなくても使用することができます。
![](https://powerplatformnikki.com/wp-content/uploads/2024/02/c7fccef1b5b565cf673e881b084caa6a.png)
入力を設定することでアプリからデータを受け取りコンポーネントで計算、その結果を出力としてアプリに返すことができます。
コンポーネントには数式の他にコントロールを含めることができるので、以下のようなタブを作ることもできます。
関数
データのようにアプリとコンポーネントの間でデータをやり取りする点は同じですが、数式に通常の関数と同様にパラメーターを設定することができるのが関数です。
入力・出力の関数のみ設定可能で、動作関数を設定したい場合は後述のアクションから設定します。
![](https://powerplatformnikki.com/wp-content/uploads/2024/02/image-7.png)
例:切符の運賃と有効日数計算
JR各社ではご存じの通り距離に応じて運賃を変動させており、長距離になればなるほど1km当たりの運賃は下がっていきます。
コンポーネントの関数では、距離を入力すると運賃とその有効期限を出力するような関数を定義することができます。
![](https://powerplatformnikki.com/wp-content/uploads/2024/02/image-9.png)
このように入力されたn個の値からm個の値が出力されるようなケースでコンポーネントの関数を使用します。
アクション
画面に対して動作する関数を設定します。
2048では5つの動作関数を設定しており、コレクションに対して行う複雑な操作をコンポーネントのイベントによって定義しています。
![](https://powerplatformnikki.com/wp-content/uploads/2024/02/image-10.png)
それぞれの中身はとても長い数式ですが、画面上から呼び出す際には簡単に呼び出すことができ、とても短い数式となります。
![](https://powerplatformnikki.com/wp-content/uploads/2024/02/image-11.png)
イベント
コンポーネント内で動作する数式を呼び出します。
アクションは画面に対して何らかのアクションをするものでしたが、イベントはコンポーネント内のコントロールや変数に対してアクションをします。
例:コンポーネント内のコントロールをリセットする
コンポーネント内のコントロールに対してReset関数で初期状態に戻すことができます。
アクセスアプリスコープについて
作成するコンポーネントの性質に応じて、アクセスアプリスコープのオン/オフを使い分けましょう。
参考
2021年, 2022年に発表されたものですので、実際の画面と異なる箇所があります。
コメント