【PowerApps Tip's】Loading画面を作る(応用可)

PowerApps にはメッセージボックス（「●●しますか？」/はい・いいえ）みたいな機能が、記事投稿時点では標準で装備されていません。また、同様に子画面を表示する、といった標準機能も存在しません。

PowerApps アプリから、直接Microsoft Flowを呼び出したりすると、Flowの処理中は画面操作をさせたくない等の状況になります。そのような処理に時間を要する場合に、意図しないボタン操作などをガードするためにLoading画面を表示して画面をガードする等の対策が必要になります。今回は、そんな機能の現方法メモです。なお、子画面、メッセージボックスも殆ど同じ手順で実現が可能です。

作るモノ

#PowerApps スキーな方々は息をするように実施しているであろうLoadingとか子画面とか、メッセージボックスなどのテクニックは、基本的に前面にグループ化したコントロールを表示しているだけです。 pic.twitter.com/T6xK15302r

— やま (@yamad365) March 30, 2019

すでに上記で答えが出ちゃってますけど、続けますｗ

作り方

キャンパスアプリを新規作成して、ボタンを１つ置いたところから解説を始めます。

1. 画面に四角形アイコンを追加
   「挿入」タブ → [アイコン] → [四角形]を選択して画面へ追加します。
   

2. 追加した四角形をLoading画面の土台ぽくする
   四角形を画面の全体にかかるよう拡大 → Fill（塗りつぶし）で土台の色を決めます。なお、この際、透明度を調整すると良い感じになります。
   ■参考URL
   PowerApps の Color 列挙型と ColorFade、ColorValue、および RGBA 関数

3. 四角形の上にラベルなどを配置する
Loading画面によくあるメッセージ表示や、ぐるぐるするアニメーションなどを配置して”それっぽく”します。
今回のローディングアイコンは https://icons8.com/preloaders/ より入手しました。ありがとうございます。なお”Loading アイコン”等で検索すると、様々な画像ジェネレーターがみつかりますので、作成したい画面にあわせた画像を探してください。

4. コントロールのグループ化
Loading画面は、処理中しか表示したくありません。そのため、表示・非表示をこの後で制御するように設定します。表示・非表示を、四角形、ラベル、画像の3つに対して毎度実施するのはメンドクサイですよね？それを回避するため、各コントロールをグループ化してしまいます。
グループ化したいコントロールを左ペインのツリーで”Ctrlキー”を押下しながら選択 → 「ホーム」タブ → [グループ] → [グループ]を押下です。

グループ化されたコトがわかります。[Group1]を操作することで複数のコントロールをまとめて制御できるようになります。なお、この状態ですと、画面の背面になってしまいっているボタン等が操作できません。ですので、デザイン等の実施が完了したらGroupは非表示（[Visible]をFalse）にしておきましょう。

5. 表示・非表示を制御する変数を組み込む
Loading画面の表示・非表示を制御する変数を決定し、時間のかかる処理の前後でTrue／Falseを設定します。下記の画面はコメントになっている箇所に時間のかかる処理がはいるイメージです。※ここはロジックや画面の処理内容によって記載するタイミングや場所が異なります。実際に作成するアプリにあわせて適宜判断ください。

6. グループ化コントロールへ変数を設定
仕上げにグループ化したコントロールへ表示・非表示を制御する変数を設定すれば完了です。

とても参考になる動画

Microsoftの TaikiYoshidaJP さんがとても分かりやすい手順を動画で公開されいます。そちらもあわせて確認いただくと、より理解が深まるかと思います。

吉田のPowerApps - ポップアップを作ってみる

作成する際のポイント

Loading画面のような子画面系を作成する際、当方が注意しているポイントです。

1. 表示・非表示を制御する前に、子画面系は全て実装してしまう
   グループ化する前に処理をある程度のレイアウト設定と処理を実装してしまいましょう。とくに子画面やメッセージボックスとして利用したいコントロールを全て配置した後でグループ化しないと、追加したり移動したりが非常にメンドクサイです。

2. グループ化したら「最前面へ移動」
   土台となる四角形を全画面まで拡大しているのは、背面にまわるボタンなどを操作されないようにガードする意味もあります。その為、かならず画面の最前面で表示されていないと意味をなしません。配置については こちらの記事 を参照ください。

まとめ

• PowerAppsにはメッセージボックスや子画面は標準で搭載されていない
• 基本的には四角形アイコン＋ラベルなどで自作する
  • Gif画像などを利用すると”うごき”がある画面が手軽に作成可能
• 子画面となるコントロールをグループ化すると便利
• グループ化する前に子画面として、ある程度まで設定済みにしておく
  • グループ化した後にコントロールを追加・変更などするのはメンドクサイ
• Loading画面、子画面、メッセージボックスは基本的にこの手順で作成可能

あまりに凝り過ぎると、1週間後にアプリの編集画面を確認した際に「この処理ってどうなってるの？」と作った自分自身が混乱すると思います。ですので、なるべくシンプルにわかりやすさと使いやすさを優先した設計を実施されると良いかと思います。

最後に

実は、先ほど紹介したYoutubeが公開されていたので、このネタは書かなくてもいいかなーと思ってたんですよ。でも、先日お仕事でお邪魔したお客さんから「こういう細かなテクニック知りたいです」というご意見を賜りまして、本日のネタとなった次第です。背中を押してくださって、ありがとうございます。

それでは、皆さま。素晴らしい Power Platform Life を！