最近、のり弁にハマっております。

センターを飾る磯辺揚げや白身フライ、脇に控える漬物と小鉢、下に構える海苔・おかか・ご飯。
あの「変わらない良さ」に惹かれています。

それに比べて、キャンバスアプリの実装たるや。玉石混交ったりゃないですよね。
ポップアップ１つ取り上げても、人によってデザインも実装方法も全然違います。

というわけで、キャンバスアプリの開発ものり弁みたいに「いつも通りの形」を作っていきたいと思いますよね。
というわけで、今回のお題はこちら。

コンポーネントのカスタムプロパティを使いこなそう！

目次

1. コンポーネントとは
2. カスタムプロパティの種類と使い方
3. その先へ......

1. コンポーネントとは

というわけで、まずは公式の記述を読みます。

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

(～中略～)

コンポーネントは、コントロールのコピーや貼り付けの必要性を排除し、パフォーマンスを改善することにより、工数の重複を減らします。

要約しますと、『いろんな所で同じものを使うのに毎回作ってたら時間ががもったいないから、部品として切り出して使いまわせるようにしよう！』というのがコンポーネントです。

注意点としては、
・コンポーネント内でAutomateの実行はできない点
・フォームやギャラリーには追加できない点
などがあります。

Learnの後半にも出てくるようなメニューバーだったり、ヘッダーだったり、もしくは半角と全角の変換をする関数だったり、、、、色々な機能を使いまわせる状態にできます。

そして、それらの実装を行うために理解しなければならない重要な機能が

「カスタムプロパティ」

になります。

2. カスタムプロパティの種類と使い方

カスタムプロパティには4つの種類がありますが、

「全然違いがわからん！」

と最初は思ってしまうことでしょう。
かく言う私も、最近まで「イベント」と「アクション」の違いがあまりわかっておりませんでした。

なので、それぞれ実例付きで解説していこうと思います！

①データ

これが一番わかりやすいですね。
事前に決めたデータ型の値をコンポーネント側とアプリ側で受け渡すものになります。

プロパティ定義を「入力」にするとアプリ -> コンポーネント に値を渡し、「出力」にするとコンポーネント -> アプリ に値を渡せます。

例：ポップアップのコンポーネントを作成するときに、ポップアップに表示するメッセージを指定する

まずカスタムプロパティを次のように定義して、

それを使いたいコンポーネント内のコントロール・プロパティに設定して、
（下記のように、[コンポーネント名].[カスタムプロパティ名]で使用できます）

アプリ上に配置して次のように設定します。

文字列や数値のほかに、Screenを渡すということもできます。
これが意外と重宝しまして、コンポーネント側でNavigete関数を使用したりするときによく使います。

②関数

これも比較的わかりやすい部類だと思います。
パラメータを受け取って、事前に作成しておいた関数を実行します。
こちらは、コンポーネント内で使うこともできますし、アプリ側で使用することもできます。

今回は、コンポーネントで作成した関数をアプリ上のラベルで使用するような例を紹介します。

例：文字列を渡して、数字に変換可能であれば数字を返し変換できなければ0か空を返すような、コンポーネントを作成する。

カスタムプロパティを下記のように定義します。

パラメータは、このプロパティに渡す値になります。
inputTextが、変換する文字列。
isReturnBlankが、空を返すかどうかです。

isReturnBlankは、オプションのため入力しなくても動作するように設計する必要があります。
今回の場合は、isReturnBlankが空で数字に変換できない場合、Blankが返るようにします。

さて、少し話がそれてしまいますが、ここで注目していただきたいのが、ビックリマークの部分です。
コンポーネント、実はコントロールを一つも置かなくてもいいんです。

コンポーネント自体はこれで完成なので、画面側に行きまして、下記のように実装します。
こちらは関数なので、[コンポーネント名].[カスタムプロパティ名](引数) という順番で書きます。

まずは、Blankを返す方。（ラベルの「Blankを返す」と「0を返す」が逆になっているのは許してください。）
今回は、オプションの引数を渡していませんが、もちろん明示的にtrueを渡すこともできます。

そして、0を返す方。こちらは明示的にfalseを渡す必要があります。

③イベント

これは公式の説明だけ見ると少しわかりにくいですが、コンポーネント内に置かれたボタンなどにあるのOn～～～というプロパティの処理を、コンポーネントを置いた後に指定するのに使います。
例えば、ヘッダーのコンポーネントを作成する際に戻るボタンを作っておいたとします。でも、戻るボタンでやりたい処理は各画面ごとに違うはずなので、後から書き換えることができないと不便ですよね。
そんなときのために使うものになります。

また、イベントの特徴として、コンポーネントの内部のコントロールで使用するもののため、外側から呼ぶことはできなくなっています。

例：ポップアップのコンポーネントを作成するときに、OKボタンの処理を後から指定できるようにする

カスタムプロパティを下記のように定義します。

そして、OKボタンのOnSelectでこのカスタムプロパティを呼びます。

これだけで、コンポーネント側の設定は終わりです。
では、アプリ側から呼んでみましょう。

画面上にコンポーネントを配置すると、プロパティに先ほど指定したカスタムプロパティが出てくるので、ここにOKボタンを押したときの処理を書きます。

今回は例の都合上レコード削除のポップアップのため、それっぽいレコード削除の処理を書いていますが、ポップアップの目的ごとに処理を書き替えることができます。

また前述のとおり、「イベント」のカスタムプロパティはコンポーネント内でしか呼べないため、コンポーネント外のボタンから呼ぼうとしてもエラーになります。

④アクション

これも公式の記述だけ見ると、ちょっと難しそうな気がしてしまいますよね。

イベントは「コンポーネントの内部で使用するものを後で指定する」カスタムプロパティだったのに対して、
アクションは「事前に定義しておいた動きを、後で呼び出せるようにする」カスタムプロパティです。

たとえば、コンポーネントはOnResetのプロパティがないので自分で作ったり、外側からコンポーネントの中の値を上書きするのに使ったりすることができます。

例：色を選択するコンポーネントを作成するにあたり、外部から選択されている値を変更してリセットをかけられるようにする

ちょっとわかりにくいですが、こんな感じでアプリ上でテーマカラーを変更できるような設定をするためのコンポーネントを作りたいとします。

カスタムプロパティを下記のように定義します。
SetColorは選択されている状態にしたい色を置きます。

そして、Initプロパティの中身をこんな感じにして、渡された値を変数に設定しつつギャラリーにリセットをかけるような処理を書きます。
（「_componentSetColor」はギャラリーのDefaultに設定して、リセットがかけられたときに渡された値が選択されている状態になるようにしておきます。）

ここまででコンポーネント側は完成です。

アプリ側では下のように実装します。
こうすることで、Aquaのボタンを押すと空色が自動的に選択され、Azureを押すと薄い藤色みたいなのが自動的に選択されるようになります。

この使い方だと、関数との違いが分かりにくいですね。
アクションはいわゆる『動作関数』という分類になるため、ラベルのTextなどに設定することはできないというのが大きな違いです。

3. その先へ......

ここまで理解できれば、コンポーネントのカスタムプロパティは怖くありません。
お好きなパーツを自作していきましょう！......と言いたいところなのですが、、、

この機能、まだプレビュー扱いでGAされていません！

『データ』だけは使用可能なのですが、他の3つはまだプレビューなのです......。
なので、本番環境などでは使用しないようにご注意くださいませ！

さらに、本業の開発者の場合、Power Apps Component Framework なんて選択肢もあったりいたします。
HTML + TypeScript でコントロールの開発ができちゃいますので、さらにコンポーネントの沼にハマりたい方はこちらもオススメいたします。

まとめ

今回はコンポーネントのカスタムプロパティについてまとめてまいりました。

弊社では、このような機能を使用して一部の開発負荷を軽減したり、知見を共有したりしながら開発を進めております。

Power Platformでの開発を支援して欲しい方や、こんな弊社で一緒に働きたいという方がいらっしゃいましたら、ぜひぜひお声がけいただけたらと思います！