2024.01.22
降りてきた！！
Toggleで、不安定性を解決したバージョン！
はじめに
今回はこちらの記事の続きで、コンポーネントでメッセージボックスを作っていきます。
VBAのMsgBox 関数の機能を再現してみます。
VBAのMsgBox 関数
まずは、VBAのMsgBox 関数をおさらいしましょう。
このような時は公式のlearnが一番ですね！
MsgBox (prompt, [ buttons, ] [ title, ] [ helpfile, context ])
prompt は前回の記事で紹介した通りですが、buttons そして、Msgboxの戻り値に焦点を当てて作っていきたいと思います。
[ helpfile, context ] は割愛します。
buttons引数
公式を参照します。
- ボタンの種類
- メッセージボックスのアイコン
- システム モーダル
- ヘルプ
- 文字の右揃えの設定
上記が設定で入り混じっているように感じます。（個人の感想です）
このうち、ボタンの種類とメッセージボックスのアイコンを下記のようにして再現します。
ほかのところはごめんなさい🙇
| 再現方法 | データ型 | 説明 |
|---|---|---|
| ボタン | テーブル型 | Lookupで配列を表示 |
| アイコン | テーブル型 | 指定したアイコンをそのままコンポーネントに渡す、かつ色も指定 |
| デフォルト | 整数 | 列挙型が好きな場合は、カスタマイズしてください |
| 定数 | 説明 |
|---|---|
| pwOKOnly | OK のみ |
| pwOKCancel | OK、キャンセル |
| pwAbortRetryIgnore | 中止、再試行、無視 |
| pwYesNoCancel | はい、いいえ、キャンセル |
| pwYesNo | はい、いいえ |
| pwRetryCancel | 再試行、キャンセル |
アイコンの設定
関数に着眼すると、
- vbCritical
- vbQuestion
- vbExclamation
- vbInformation
四つの種類のアイコンが存在します。
今回は、値の部分を割愛し、文字列からアイコンを設定するようにします。
なお、画像を追加する意味も特にないと思っているので、Power Appsの組み込みのアイコンで対処します。
| 定数 | 値 | 説明 |
|---|---|---|
| pwCritical | 16 | 重大なメッセージ アイコン |
| pwQuestion | 32 | 警告クエリ アイコン |
| pwExclamation | 48 | 警告メッセージ アイコン |
| pwInformation | 64 | 情報メッセージ アイコン |
戻り値
クリックしたボタンに応じて、戻り値を設定します。
こちらはレコード型で、テキストも定数も値も返す形にしましょう。
| テキスト | 定数 | 値 |
|---|---|---|
| OK | pwOK | 1 |
| キャンセル | pwCancel | 2 |
| 中止 | pwAbort | 3 |
| 再試行 | pwRetry | 4 |
| 無視 | pwIgnore | 5 |
| はい | pwYes | 6 |
| いいえ | pwNo | 7 |
Table(
{ Text:"OK", Enum:"pwOK", Value:1},
{ Text:"キャンセル", Enum:"pwCancel", Value:2},
{ Text:"中止", Enum:"pwAbort", Value:3},
{ Text:"再試行", Enum:"pwRetry", Value:4},
{ Text:"無視", Enum:"pwIgnore", Value:5},
{ Text:"はい", Enum:"pwYes", Value:6},
{ Text:"いいえ", Enum:"pwNo", Value:7}
)
上記の中からLookupでデータを抜き出して取得します。
別にいらないな、と思う部分は、ガンガン削ってください。
コンポーネントをカスタマイズする
文字を出す前に、完成系のYouTubeと、Power Appsを載せておきます。
入出力
まずはコンポーネントに渡すカスタム プロパティを下記のとおり、設定しました。
■ 入力
| Name | データ型 | 値の説明 |
|---|---|---|
| MsgBoxTitle | テキスト | メッセージボックスのタイトル |
| MsgBoxPrompt | テキスト | メッセージボックスの文章 |
| pwMsgBoxStyle | テキスト |
MsgBoxButtonsのキー値 |
| pwIconStyle | テキスト |
MsgBoxIconStyleのキー値 |
- 下記は削除！ 2024.01.22
| Name | データ型 | 値の説明 |
|---|---|---|
カスタム プロパティは表示名、名前が存在しますが、
作者は英語で、かつ内容も全て統一しています。
■ 出力
| Name | データ型 | 値の説明 |
|---|---|---|
| DialogVisible | ブール値 | メッセージボックスの表示・非表示を制御 |
| MsgBoxResult | レコード | クリックしたボタンから値を出力 |
1. トグル ボタンの追加
課題であった入力変数から計算した値によるコントロールの設定を解決するため、
トグル ボタン を採用します。
MsgBoxのVisibleがtrueになったときに動作する、
疑似的なOnVisibleにします。
| 項目 | 値 | 説明 |
|---|---|---|
| コントロール名 | tgVisible | ダジャレ |
| Default | MsgBox.Visible | コンポーネントのVisibleと連動させます。これでOnChangeが発火します |
| Visible | false | 非表示にしましょう |
// MsgBoxコンポーネントが表示されたときに
If(MsgBox.Visible,
// ボタンのレコードを取得
Set(varButtons,
LookUp(
Table(
{
Constant: "pwOKOnly",
Buttons: [
"OK"
],
Description: "OKボタンのみ"
},
{
Constant: "pwOKCancel",
Buttons: [
"OK",
"キャンセル"
],
Description: "OK、キャンセル"
},
{
Constant: "pwAbortRetryIgnore",
Buttons: [
"中止",
"再試行",
"無視"
],
Description:"中止、再試行、無視"
},
{
Constant: "pwYesNoCancel",
Buttons: [
"はい",
"いいえ",
"キャンセル"
],
Description: "はい、いいえ、キャンセル"
},
{
Constant: "pwYesNo",
Buttons: [
"はい",
"いいえ"
], Description: "はい、いいえ"
},
{
Constant: "pwRetryCancel",
Buttons: [
"再試行",
"キャンセル"
],
Description: "再試行、キャンセル"
}
),
// キー値は入力されたpwMsgBoxStyleから
Constant = MsgBox.pwMsgBoxStyle
)
);
// アイコンのレコードを取得
Set(varIconStyle,
LookUp(
Table(
{ pwIconStyle:"pwCritical", Icon:Icon.CancelBadge, Color:RGBA(255,0,0,1), Visible: true, Description:"重大なメッセージ"},
{ pwIconStyle:"pwQuestion", Icon:Icon.Help, Color:RGBA(0,134,208,1), Visible: true, Description:"警告クエリ"},
{ pwIconStyle:"pwExclamation", Icon:Icon.Warning, Color:RGBA(255,191,0,1), Visible: true, Description:"警告メッセージ"},
{ pwIconStyle:"pwInformation", Icon:Icon.Information, Color:RGBA(0,134,208,1), Visible: true, Description:"情報メッセージ"}
),
// キー値は入力されたpwIconStyleから
pwIconStyle = MsgBox.pwIconStyle
)
)
)
疑似的 OnVisibleで変数を更新！
動的なメッセージボックスを再現できます！
2. アイコンの追加
前回の記事との差分はアイコンの存在です。
メッセージが表示される赤線の枠に、設定がされた場合、アイコンが出るように、
Icon コントロールを追加します。
便利なことにIconはプロパティで表示を制御できます。合わせてColorも渡し、表示を似せていきましょう。
| 項目 | 値 | 説明 |
|---|---|---|
| Color | varIconStyle.Color | アイコンの色 |
| DisabledColor | varIconStyle.Color | アイコンの色 - 無効にする場合 |
| DisplayMode | DisplayMode.Disabled | 見る専のものは無効に私はします |
| Icon | varIconStyle.Icon | レコードから組み込みのアイコンを取得 |
| Visible | varIconStyle.Visible | アイコンなし用 |
3. ボタン コントロール
コンテナにボタンを3つ設置し、配列の要素数でボタンの数、テキストをコントロールします。
ギャラリー コントロールを用意します！
中にはボタン コントロールを入れます。
配列からボタン数が決定します！
ギャラリー コントロール galButtons
| 項目 | 値 | 説明 |
|---|---|---|
| Items | varButtons.Buttons | 配列で要素を決定 |
| TemplateSize | IfError(Self.Width / CountRows(varButtons.Buttons),96) | テンプレートのサイズ |
| Width | Parent.Width * 0.95 | 好みで |
ボタン コントロール MsgBoxButton
| 項目 | 値 | 説明 |
|---|---|---|
| Text | ThisItem.Value | テキストの値 |
| Width | Parent.Width * 0.28 | 好みで幅を決める |
| X | (Parent.TemplateWidth / 2) - (Self.Width / 2) | 縦方向に中央揃え |
| Y | (Parent.TemplateHeight / 2) - (Self.Height / 2) | 垂直方向に中央揃え |
ボタンのOnSelectで出力値を制御します。
こちらのSet関数で定義した値が、出力値として返されます。
Set(Return,
LookUp(
Table(
{ Text:"OK", Enum:"pwOK", Value:1},
{ Text:"キャンセル", Enum:"pwCancel", Value:2},
{ Text:"中止", Enum:"pwAbort", Value:3},
{ Text:"再試行", Enum:"pwRetry", Value:4},
{ Text:"無視", Enum:"pwIgnore", Value:5},
{ Text:"はい", Enum:"pwYes", Value:6},
{ Text:"いいえ", Enum:"pwNo", Value:7}
),Text = Self.Text
)
);
Set(MsgBoxVisible,!MsgBoxVisible);
既知の課題
-
コンポーネント内のコントロールに、入力値から狙った値が反映されないテーブル、レコードに基づく、コントロールの設定が間に合わないケースが多くあります・・・
- Notレスポンシブ対応
- 横長の画面対応想定
おわりに
使いまわしによって開発が加速できると、本当に素晴らしいですね！
Power Apps全然ﾜｶﾗﾝ・・・
天啓が下りると、超気持ちがいいですね！！
良いPower Lifeを！