欲しいアプリは自分で作る!

Power Platform や Azure などを利用して作成した業務アプリや趣味アプリなどをご紹介します。

Power Apps のスクロールの位置をリセットする(一番上に戻す)方法

どうも、じゅんじゅんです。


Power Apps には、スクロールできるコントロールが2種類あると思います。


Gallery コントロール

皆さんおなじみのコントロールですね。
何かしらのデータソースを指定し、データソースのレコードの一覧を表示するために利用することが多いです。

f:id:jn-kodama:20200816100156p:plain


スクロール可能画面のスクロール

スクロール可能画面のスクロールとは、Power Apps 作成画面左上の「新しい画面」にある「スクロール可能」画面のことで、自由にスクロール可能な画面を作成できるものです。
コントロールの実体は、画面内にある "Canvas1" という名前の「流体グリッド」と呼ばれるコントロールです。
データソースに縛られずに好きなコントロールを配置できます。

f:id:jn-kodama:20200815161813g:plain


今日の内容は、これらのスクロールの位置を、例えば一旦別の画面に移動し、また元の画面に戻ってきた時に、スクロールの位置を常に1番上に戻すにはどうしたら良いか?というものです。


Gallery コントロールのスクロールをリセットする方法

Power Apps には Reset 関数というものが用意されており、コントロールを Default プロパティの値にリセットすることができます。 例えばテキスト入力やスライダーなどを、適切なタイミングでリセットしたい時に利用できます。

docs.microsoft.com


Gallery コントロールも Reset をかけることができるので、Gallery コントロールが配置されている画面の OnVisible などに

Reset(Galleryコントロール名)

と記載するだけで、その画面が表示される度にスクロールを一番上(または Default で定義された箇所)に戻すことができます。


ちなみに、ボタン押下時にリセットすることもできます。

f:id:jn-kodama:20200815154533g:plain


スクロール可能画面のスクロールをリセットする方法

この方法を用いれば、Gallery と同じようにスクロール可能画面のコントロール、すなわち流体グリッド コントロールもリセットできるのでは?と思い試してみましたが、残念ながらこの流体グリッドはリセットができませんでした。
どうやら、リセット可能なコントロールではないようです(下図)。

f:id:jn-kodama:20200815180750p:plain

ということで、何かいい方法がないかと探していたところ、解決手法を発見!

powerusers.microsoft.com


スクロール可能画面から別の画面に遷移する際に流体グリッド内にあるデータカードの表示を OFF にし、再び本画面に戻ってきた際にデータカードの表示を ON にしています。
どうやら、流体グリッドの表示を OFF -> ON すると、スクロール位置がリセットされるようです。

上記の解決方法を見て理解された方はそのまま実装いただければよいのですが、表示とリセットの true / false や Visible に設定する数式の意味が分かりづらいかもしれませんので、考え方はそのままに、よりシンプルに解釈してみた方法をご紹介します。


スクロール可能画面のスクロールをリセットする方法

流体グリッドの表示を on / off する変数 varVisibleGrid を定義し、表示を制御します。

1. スクロール可能画面の OnVisible で変数 varVisibleGrid の値を true にする

UpdateContext({varVisibleGrid: true})

f:id:jn-kodama:20200816101402p:plain

2. スクロール可能画面の OnHidden で変数 varVisibleGrid の値を false にする

UpdateContext({varVisibleGrid: false})

f:id:jn-kodama:20200816101438p:plain

3. 変数 varVisibleGrid を流体グリッド コントロールの Visible に設定する

f:id:jn-kodama:20200816101924p:plain

以上です。
こんな感じで動きます。

f:id:jn-kodama:20200816102305g:plain


おわりに

Gallery コントロールと流体グリッド コントロールの2種類について、スクロール位置をリセットする方法をご紹介しました。

Gallery は Reset という分かりやすい処理でスクロール位置をリセットできるのに対して、流体グリッドはコントロールの表示を OFF -> ON することでスクロール位置をリセットするという、若干分かりづらい方法を採用しています。
ノーコード / ローコードでちょっと複雑なことをやろうとすると、どうしてもこのようなパッと見分かりづらい制御が生まれがちな気がしますので、可能であれば流体グリッドも Gallery のように Reset できるといいですよね。

ということで、標準の Reset 機能が欲しいという方は以下で要望を募っていますので、是非 Vote しましょう!
powerusers.microsoft.com


欲しいアプリは欲しい人が作る時代へ。

何かのヒントになれば幸いです。


参考文献

powerusers.microsoft.com