内容
PowerAppsアプリでローディング画像を表示し、処理中の表示を豪華にする。
LoadingSpinnerプロパティはスクリーンに存在しますが、まだ実装されていない為(2018/9/12)実装された場合はそちらを利用するほうが良いでしょう。
必要なもの
- 365アカウント
- ローディングgif画像
こちらのサイトからgif画像は取得できます。
loading.io
適当なメールアドレスでサインアップを行いお好きなgif画像を作成しdownloadを行ってください。
実装方法
1.画像の登録
PowerAppsアプリに取得したgif画像を登録します
ビュー→メディア→参照から画像を登録しましょう
2.画像とラベルを配置する
gifを表示したい画面にラベルと画像を追加します
挿入→メディア→画像から追加します。
Labelのパラメータは以下の設定です
| name | value |
|---|---|
| Width | Parent.Width |
| Height | Parent.Height |
| Text | |
| x | 0 |
| y | 0 |
追加したラベルと画像はわかりやすい名前に変更しておきましょう
今回は「Load_Cover」と「Load_Gif」という名前にしました
※同じ名前が既アプリ内に設定されている場合は設定できませんのでご注意ください
2-1.Labelの色を変更する
お好みで構いませんのでラベルの色を変更します。
今回はFillの値をRGBA(0,0,0,0.7)で設定しました。
2-2.画像のパスを設定する
2で設定した画像に対して1で登録したgif画像を設定します
Load_GifのImageに対して登録したファイル名を入力します。
今回追加したgifのファイル名は「'Spinner-1s-200px'」なのでこれを入力します。
| name | value |
|---|---|
| Image | 'Spinner-1s-200px' |
2-3.Visibleのグローバル変数を設定する
今回は全ての画面で使用できるようグローバル変数に対してVisibleの設定を行います。
もし、スクリーン(ページ)内だけで利用したい場合はコンテキスト変数(UpdateContext)を利用してください。
スクリーン(ページ)のOnStartでグローバル変数の作成を行います
| name | value |
|---|---|
| OnStart | Set(IsLoading,0) |
2-4.各Visibleを設定する
ここまで来たらあと少しです。
Load_CoverとLoad_GifのVisibleに対して先ほど設定したIsLoadingを設定します。
こちらですべての設定は終了です
使用方法
各処理の開始、終了時にIsLoading変数に対して0,1をsetするだけです。
IsLoadingが1の場合は表示され、0の場合は表示されなくなります。
まとめ
以上でローディングの実装は完了です。
簡単に実装でき、アプリが豪華になりますので実装することをお勧めします。
ただ、この方法はあくまでLoadingSpinnerが実装されていない為の代替案です。また、独自のローディング画像を使用したい場合などはこの方法を利用してもよいかもしれません。
最終的な設定値は以下になります
Load_Cover
| name | value |
|---|---|
| Width | Parent.Width |
| Height | Parent.Height |
| Text | |
| x | 0 |
| y | 0 |
| Visible | IsLoading |
Load_Gif
| name | value |
|---|---|
| Image | 'Spinner-1s-200px' |
| Visible | IsLoading |
スクリーン
| name | value |
|---|---|
| OnStart | Set(IsLoading,0) |