はじめに
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（ボタン）
- galButtons（ボタンを
- MsgBoxHeader（ヘッダー）
- ModalBackground（なんちゃってモーダルウィンドウ）
上から前に重なっていくレイヤーです
2. カスタムプロパティを付与!!
コンポーネントの特徴で、入出力をコントロールすることができます。
メッセージボックスを、コンポーネントの外から制御するために、
下記のプロパティを追加してください。
| 入出力 | プロパティ名 | データ型 | 内容 |
|---|---|---|---|
| 入力 | MsgTitle | テキスト | メッセージボックスのタイトル(今回の説明では割愛) |
| 入力 | MsgPrompt | テキスト | メッセージボックスのメッセージ |
| 入力 | ButtonsInfomation | テーブル | ボタンの文字をコントロール(今回の説明では割愛) |
| 出力 | DialogVisible | ブール値 | メッセージボックスの表示・非表示を制御 |
メッセージボックスを、開いたり閉じたりするために、変数を使います。
-
コンポーネントであるメッセージボックスの
OnResetに下記を設定。OnResetSet(cmpVisible,true); -
ボタン
DialogButtonsのOnSelectに下記を設定OnSelectSet(cmpVisible,!cmpVisible); -
カスタムプロパティ
DialogVisibleを追加し、出力値にcmpVisibleを設定します。
3. メッセージボックスのテスト!!
作成したコンポーネントは、カスタムに追加されます。
試しに追加すると、コンポーネントのプロパティにより、Width、Heightが画面全体に拡張してしまいます。
そこで、変数を活用します。
画面上の表示ボタンに、一旦下記の変数の設定をさせます。
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を！