Power Apps で誤操作を防ぐために「本当に送信しますか？」というようなホップアップを作ろうとすると、
以下のような様々な処理をする必要があり、とても面倒でした。
- ホップアップの表示/非表示を変数で制御する
- ホップアップに利用するコントロールをグループ化する
- レスポンシブルアプリの場合は幅や高さ、コントロールの位置などを動的に調整するロジックを組む
キャンバスアプリに Confirm 関数が来たので、以下のようなホップアップを1つの式で作れるようになりました。
事前準備
モダンコントロールをオンにする
設定 > 更新 から「モダンコントロールとモダンテーマ」を オン にする必要があります。
作成バージョンを 3.260022.5 以上にする
設定 > サポート で作成バージョンを確認します。
作成バージョンが 3.260022.5 よりも低い場合は 作成バージョンの編集をクリックして、作成バージョンの変更画面を開きます。
「作成バージョン」を 3.260022.5 以上にして、「再読み込みおよびバージョンの適用」を押下します。
これで Confirm 関数を使う準備が整いました。
作り方
パラメーターについて
Confirm 関数には必須のパラメーターが1つ、任意のパラメーターが4つあります。
Confirm(
//Messageは必須パラメーター
"Messageの文言",
//以下は任意パラメーター👇
{
ConfirmButton: "ConfirmButtonの文言",
CancelButton: "CancelButtonの文言",
Title: "Titleの文言",
Subtitle: "Subtitleの文言"
}
)
各パラメーターのホップアップ上の配置は以下のようになります。
以下のように必須パラメーターである Message だけを設定すると、
Confirm(
"送信確認"
)
ボタンの名称は Confirm 関数が持っている既定値になるようです。Title と Subtitle に関しては何も表示されません。
余白が多くて、かなり殺風景なので Title や Subtitle をちゃんと設定したいなと思いました（笑）
戻り値について
Confirm 関数の実行結果は True / False で返ってきます。
初期値は False のようです。
パラメーター名「Confirmbutton」を押すとTrue、
パラメーター名「Cancelbutton」を押すと False が返ってきます。
色の設定について
Confirmbutton・Cancelbutton の色はテーマによって自動設定されています。
Confirmbutton の色は Primary Color なので、ご自身でカスタムテーマを作成することで好きな色に変更できます。
カスタムテーマの作り方は以下で解説しておりますのでご参照ください👇
Cancelbutton の色はテーマの Secondary Color だと思われます。こちらは カスタムテーマの Primary Color を指定した時に自動で決定されます。したがって自分でカラーコードを指定して、決めることはできません。
動作確認について
関数の動作確認
ただ単に関数の動作を確認したいだけならば、編集画面のアプリのプレビューで確認できます。
以下の挙動が確認できました。
Confirmbutton をクリックする
- 実行結果（式の戻り値）が True になる
- ホップアップが閉じる
Cancelbutton をクリックする
- 実行結果（式の戻り値）が False になる
- ホップアップが閉じる
ホップアップのボタン以外の部分をクリックする
- ホップアップが表示されたままになる
- 実行結果は変わらない
ホップアップ表示中にホップアップの外をクリックする
- ホップアップが閉じる
- 実行結果（式の戻り値）は False になる
レスポンシブル確認について
タブレットサイズくらいまではアプリのプレビューで確認できます。
スマートフォンサイズだとアプリのプレビューでは「コレじゃないｗｗ」って感じになります(´・ω・｀)
アプリを公開したうえで
再生すると、スマートフォンサイズの動作も確認できます。
（まあだいぶミチミチで、もうちょっと余白がほしい気もしますが……）
現時点でできないコト
以下のようなカスタムはパラメーターがないので、できないと思われます。
- Message や Title の中にハイパーリンクを埋め込む
- ホップアップの中にアイコンを入れる
- ボタンの大きさをカスタムする（例 確認ボタンだけ大きくする）
- ボタンの色を好きな色に変更する
- テキストボックスやコンボボックスを置いて、簡易入力画面を作る
- ボタンを3つ以上設置する
- 画像を表示する
まとめ
私はシンプルなホップアップが好きなので、Confirm 関数のホップアップで十分と感じました。
しかし用途によっては Confirm 関数のホップアップでは要件を満たせないことがあるのも事実です。
- ボタンが3つ以上必要
→今までのコントロールをグループ化したホップアップ - メッセージの表示
→Confirm 関数を利用したホップアップ - 入力が必要
→別画面に遷移
というように用途によって様々な方法を取れると使いやすいアプリの作成が捗ると思います。それではごきげんよう💕