PowerApps│開閉するアコーディオンメニューの作り方

こんにちは、あんこ先生です。

なにかと場所をとるアプリのメニュー、小さくまとめてみたくありませんか？

項目数に比例してボタンやアイコンが増えるし、ドロップダウンだと味気ないですよね。

これを解決するのがアコーディオンメニューです。

親項目をクリックするたびに、それに従じた子項目が開閉するメニューです。

そそこで、今回はPowerAppsでアコーディオンメニューを作る方法を紹介します。

動作にこだわらなければかんたんに作成できますよ。

Contents

1 開閉するアコーディオンメニューの作り方
2 親が単体のアコーディオンメニュー
3 親が複数のアコーディオンメニュー
4 選択したすべてを展開するアコーディオンメニュー
5 連結して展開するアコーディオンメニュー
6 開閉するアコーディオンメニューの作り方のまとめ

開閉するアコーディオンメニューの作り方

アコーディオンメニューとは、WEBサイトでよく見かけるナビゲーションメニューのひとつです。

最初に表示されている親項目をクリックすることで、非表示だった子項目を表示します。

もう一度親項目をクリックすると、表示されていた子項目は非表示に戻ります。

多くの情報をコンパクトに設置できるため、特にスマホ用アプリの領域節約に役立ちます。

アコーディオンメニューの仕組み

作り方はたくさんあると思いますが、今回は高さ（または幅）が0だとコントロールは表示されない特性を使って作成します。

高さ0と表示falseは一見おなじようですが、別物です。

アコーディオンメニューは、親ボタンの直下に複数項目を格納した子ギャラリーを配置します。

親ボタンを押すたびに、変数の値をtrueとfalseで切り替えます。

この変数がfalseの間は子ギャラリーの高さを0とし、trueなら項目数×指定した高さにします。

展開する仕組みは下記の通りです。

親ボタンを押すと、変数の値がtrueになる。
変数がtrueのため、子ギャラリーの高さを項目数×指定した高さにする。

閉塞する仕組みは下記の通りです。

親ボタンを押すと、変数の値がfalseになる。
変数がfalseのため、子ギャラリーの高さが0になり表示されない。

種を明かせばすぐ作れそうですよね。

次からケース別の作成方法をコード付きで紹介します。

以下、都道府県情報を格納したコレクションを使用します。

作業しながら進める方は、コチラから_AreaCollectionのコードをコピペしてお使いください。

親が単体のアコーディオンメニュー

まずは、単体で動くアコーディオンメニューの作り方です。

都道府県という親ボタンの直下に、都道府県名を格納した子ギャラリーを設置しています。

件数が47と多いため、図のように突き抜けてしまいます。

実際に使う場合は、10件程度が表示されるレベルの高さに制限してください。

事前準備│単体アコーディオンメニュー

使用するコントロールは5個です。

そのうち、ボタンbtnCreateCollectionはコレクションを作成するために使用してください。

図形shpSBackGroundは背景です。なくても問題ありません。

つまり、実質3個ですね。

親ボタンbtnSParentとその直下に子ギャラリーgalSChildを設置します。

子ギャラリーのテンプレートにはボタンbtnSChildを設置します。

デザインは適当で構いませんが、各ボタンの高さは40で統一してください。

コードの転記│単体アコーディオンメニュー

親ボタンbtnSParent

クリックするたびに変数の値を切り替えます。

!は否定notなので、値がtrueならfalse、falseならtrueになります。

//Text
"都道府県"

//OnSelect
Set(valSOpen,!valSOpen)

子ギャラリーgalSChild

変数の値に応じて高さを切り替えます。

格納している項目数はCountRows関数で算出できます。

//Items
_AreaCollection

//Height
If(valSOpen,
    CountRows(Self.AllItems)*40,
    0
)

子ボタンbtnSChild

都道府県名を表示させます。

//Text
ThisItem.Area

以上で設定は終わりです。

親ボタンを押せば、子ギャラリーが表示されるはずです。

展開時の子ギャラリーの高さを固定したい場合は、固定したい値を指定すればできるよ。例：10行なら400

親が複数のアコーディオンメニュー

次に親が複数ある場合のアコーディオンメニューです。

親を地方で分割し、それに属する子ギャラリーのみ展開します。

準備│複数アコーディオンメニュー

コレクションは作成済み、背景は省略して使用するコントロールは4個です。

今回は親も複数あるため、親ギャラリーgalParentに親ボタンbtnParentとその直下に子ギャラリーgalChildを設置します。

子ギャラリーのテンプレートには先ほどと同様にボタンbtnChildを設置します。

デザインは適当で構いませんが、各ボタンの高さは40で統一してください。

コードの転記│複数アコーディオンメニュー

親ギャラリーgalParent

コレクションに格納されている地方（Group）は都道府県ごとに重複しています。

そのためDistinct関数で重複排除し、データソースに指定します。

指定するのはコレクション名と重複排除したい項目名です。

//Items
Distinct(_AreaCollection,Group)

親ボタンbtnParent

今回は親が複数存在するため、どのボタンを押したか判定する必要があります。

かんたんなのは地方なので、クリックするたびにそれを変数の値に格納します。

東北ボタンを押したら変数に東北、中国なら中国といった具合です。

//Text
ThisItem.Result

//OnSelect
If(valOpen=ThisItem.Result,
    Set(valOpen,Blank()),
    Set(valOpen,ThisItem.Result);Reset(Timer1);Set(valStart,false);Set(valStart,true)
)

子ギャラリーgalChild

親ギャラリーの入れ子にしています。

Filter関数を使って親の地方で絞り込み、該当する都道府県のみ表示するようにします。

//Items
Filter(_AreaCollection,Group=ThisItem.Result)

//Height
If(valOpen=ThisItem.Result,
    CountRows(Self.AllItems)*40,
    0
)

子ボタンbtnChild

都道府県名を表示させます。

//Text
ThisItem.Area

以上で設定は終わりです。

選択した親ボタンの子ギャラリーのみ表示されるはずです。

選択したすべてを展開するアコーディオンメニュー

今度は、選択したすべてを展開する場合のアコーディオンメニューです。

開閉はそれぞれ独立して機能します。

準備│選択展開アコーディオンメニュー

準備は複数アコーディオンメニューと変わりません。

今回はどのボタンを押したか個別に判定する必要があるため、変数ではなくコレクションを使用します。

親ボタンbtnParentを押すと、その地方名をコレクションに追加します。

すでにコレクションに登録されている地方名の親ボタンbtnParentを押すと、コレクションから削除されます。

コレクションに地方名がある間は、その子ギャラリーgalChildの高さを指定します。

コードの転記│選択展開アコーディオンメニュー

親ボタンbtnParent

変更があるOnSelectのみ記載しています。

With関数を使っているため難しそうですが、入力を省略しているだけです。

ボタンを押すたびに地方名を登録したり削除したりしています。

With関数って何？と思われた方はコチラの記事を読んでみてください。

関連記事PowerApps│With関数でコードを読みやすく省力化する方法

2022.06.14

//OnSelect
With(
    {
    Target:LookUp(colOpen,id=ThisItem.Result)
    },
    If(IsBlank(Target),
        Collect(colOpen,{id:ThisItem.Result}),
    Remove(colOpen,Target)
    )
)

子ギャラリーgalChild

変更があるHeightのみ記載しています。

コレクションに親の地方名が含まれていれば高さを算出し表示します。

//Height
If(IsBlank(LookUp(colOpen,id=ThisItem.Result)),
    0,
    CountRows(Self.AllItems)*40
)

以上で設定は終わりです。

他の親ボタンを押しても子ギャラリーが開いたままになっていれば完成です。

連結して展開するアコーディオンメニュー

最後に、連結して展開する場合のアコーディオンメニューです。

展開するほど親ギャラリーの高さは長くなります。

メニューを縦にまとめられるので便利ですよね。

準備│連結展開アコーディオンメニュー

複数アコーディオンメニューとの相違点のみ記載します。

まず親ギャラリーgalParentは高さ伸縮可能のギャラリーで作り替えます。

これはテンプレートの中身によって高さが可変するギャラリーです。

展開時および地方によって都道府県数が異なるので必須です。

あとは親ボタンbtnParentとその直下に子ギャラリーgalChildを設置します。

親子どちらもスクロールバーは非表示にした方が美しいです。

コードの転記│連結展開アコーディオンメニュー

親ギャラリーgalParent

変更があるHeightのみ記載しています。

最初に自身の項目数（地方）の高さを確保します。

あとはForAll関数でコレクションに格納された地方名があればその項目数を集計し、Sum関数で総和を求めています。

よくわからなければコピペしてください。

//Height
CountRows(Self.AllItems)*40+
Sum(ForAll(Self.AllItems As Rec,
    If(!IsBlank(LookUp(colOpen,id=Rec.Result)),
        CountRows(Filter(_AreaCollection,Group=Rec.Result))
    )
),Value)*40

以上で設定は終わりです。

結構おもしろい動きしますよね。