知識ゼロからはじめるローコーディング開発

Power Platformでのアプリ開発について、いろいろと書きたいと思います。

Power Apps のフォームでアコーディオンメニューを作成する

アコーディオンメニューとは、見出しをタップすることで、その下に隠れている詳細情報を表示したり隠したりすることが出来るメニュー機能で、開閉する動きが、まるでアコーディオンの蛇腹のように見えることから、アコーディオンメニューと呼ばれています。

 

スマートフォンの画面で一度に表示出来る情報量は意外と少ないので、より多くの情報をコンパクトに見せるためには工夫が必要です。そこで、詳細情報は最初は隠しておいて、見出しのついたボタン等をタップした時だけ詳細を広げて見せるというような作りにしておくと、ページ全体で何が書かれているのかを素早く確認することが出来ますので、情報量が多くても閲覧しやすくなるはずです。

 

アコーディオンメニューを作成するには、詳細部分の表示/非表示の状態を保存する
変数を設定しておきます。変数名は任意でOKですが、初期値には閉じた状態を表す”false”をセットしておきます。今回の解説では、「概要」が書かれているデータカードを使って解説しますので、変数名は Flg_Overview としました。この変数は、メニューの見出しの数だけ用意します。

 

今回のアコーディオンメニューはフォームを使用して作成します。

フォームのデータカードの内容は、このように設定してみました。見出しと詳細はラベルで作成。詳細の「閉じた状態」と「開いた状態」を表すため、アイコンを使い、「∨」と「∧」で表現しています。

 

見出しをタップしたときのアクションを設定します。概要のラベルをタップすると、変数Flg_Overviewの値が true と false で交互に切り替わるようIf文を設定します。

 

詳細の表示/非表示の設定をします。詳細のプロパティ「Visible」にIf文を入れ、変数 Flg_Overview の値が true のときのみ表示するようにします。

 

アイコンの向きの設定をします。ここにもIf文を入れて、変数 Flg_Overview の値が true のときは0、falseのときは180にすることで、詳細の表示/非表示でアイコンの表示も変わるよう設定しています。

 

最期に詳細ラベルの高さですが、ラベルのプロパティ「高さの自動調節」をオンにすることで、文字数に合わせて高さが自動調整されます。

 

これで「概要」の設定は完了です。プレビュー画面で、見出しラベルをタップして、詳細が表示/非表示となるかを確認してみてください。正しく動いたら、フォームにある他のデータカードも同じように設定をしてみてください。

 

Twitterではアコーディオンメニューが実際に動くところを公開していますので、試される際の参考にしてみてください。

それではまたー。