はじめに

Power Appsの作成に慣れてくると、自分の中でもお決まりのメソッドが確立されていきます。
そのような中で、「これ毎回作るのだるいなあ」 と思うものはありませんか？

今回は、メッセージボックスをコンポーネントとして作成し、使いまわしていこう！
という初心者向けの記事を書きます！

コンポーネントとは

ズバリ、Power Appsで再利用可能な部品です。

テキストボックス、ボタンといった複数のコントロールをまとめて、アプリの中で何度も使用可能
カスタムプロパティで入出力を制御可能、これによって一度作成したコンポーネントでも下記のようなことができる
- 値を入力してコンポーネント内部の値を変更する
- コンポーネントで値を処理をして出力
コンポーネントライブラリに登録することで、別のアプリケーション作成時にも再利用！

Power Appsでガンガン開発！内製化促進！ という状況にうってつけの機能です！

そもそも業務改善がしたくて始めたのに、開発がキツい・・・ となっては、元も子もないので、繰り返し同じものを作っている場合は、ぜひとも活用したいものです。

さっそくメッセージボックスを作ってみる

VBAを書きまくっていて、メッセージボックスは必ずユーザーに求められたこと、
鮮明に覚えています。

まずは、ファーストステップで簡単なメッセージボックスを作ります。

Notify があるのですが、デカデカとわかりやすいものが好まれますよね・・。

挙動は、こんな感じです。

今回の記事の中では、前述したコンポーネントライブラリには触れません。
ステップバイステップで記事を分けて、応用を考えていこうと思います！

1. お絵描き

ツリービューでコンポーネントを選択、+ 新しいコンポーネント

こちらから、のびのびとコンポーネントを構築します。
まずは、絵（メッセージボックス）から描いていきましょう。

コンポーネント自体の幅(Width)、高さ(Height)を、
App.ActiveScreenを参照して設定。

コンポーネントの幅

App.ActiveScreen.Width

コンポーネントの高さ

App.ActiveScreen.Height

アプリと同様に、どんどん要素を追加していきます。
階層構造は、このようになります。

MsgDialogContainer（メッセージボックスの箱）
- MsgBoxHeader（ヘッダー）
  - MsgBoxTitle（メッセージボックスのタイトル）
  - DialogCancelIcon（キャンセルボタン）
- MsgBoxBody（ボディ）
  - MsgBoxPrompt（メッセージ）
- MsgBoxFooter（フッター）
  - galButtons（ボタンをギャラリーで設定）
    - DialogButtons（ボタン）
ModalBackground（なんちゃってモーダルウィンドウ）

上から前に重なっていくレイヤーです

2. `カスタムプロパティ`を付与!!

コンポーネントの特徴で、入出力をコントロールすることができます。

メッセージボックスを、コンポーネントの外から制御するために、
下記のプロパティを追加してください。

入出力	プロパティ名	データ型	内容
入力	MsgTitle	テキスト	メッセージボックスのタイトル(今回の説明では割愛)
入力	MsgPrompt	テキスト	メッセージボックスのメッセージ
入力	ButtonsInfomation	テーブル	ボタンの文字をコントロール(今回の説明では割愛)
出力	DialogVisible	ブール値	メッセージボックスの表示・非表示を制御

メッセージボックスを、開いたり閉じたりするために、変数を使います。

コンポーネントであるメッセージボックスのOnResetに下記を設定。
OnReset
```
Set(cmpVisible,true);
```
ボタンDialogButtonsのOnSelectに下記を設定
OnSelect
```
Set(cmpVisible,!cmpVisible);
```
カスタムプロパティDialogVisibleを追加し、出力値にcmpVisibleを設定します。

3. `メッセージボックス`のテスト!!

作成したコンポーネントは、カスタムに追加されます。

試しに追加すると、コンポーネントのプロパティにより、Width、Heightが画面全体に拡張してしまいます。
そこで、変数を活用します。

画面上の表示ボタンに、一旦下記の変数の設定をさせます。

OnSelect

Reset(MsgBox1);
Set(varVisible,true);
Set(varMsgBody,TextInput1.Text);

まずは、カスタムコンポーネントのVisible を

And(varVisible,Self.DialogVisible)

これにより、出力されるSelf.DialogVisible(メッセージボックスの出力値 false)により
Visible = falseとなります！

4. 値をコンポーネントに渡す！

上記のOnSelectの中でSet(varMsgBody,TextInput1.Text);と書いています。
変数に、テキスト入力の値を格納しています。

メッセージボックスのカスタムプロパティにMsgPromptを入力で追加します。

これにより、メッセージボックスのコンポーネントの値を変更することができます！

おわりに

コンポーネント ファーストステップでQiitaに挙げてみました！

内容のレベルを上げていきましょう！

著者も現在進行形で作りながら記事を書いてみています🐟💦

それでは、良いPower Lifeを！

Power Apps コンポーネントを活用して、開発効率を上げよう！（自作メッセージボックス）基礎編