ギャラリーコントロール完全に理解した！Power Appsでアコーディオンメニューを作成する！！

Last updated at 2024-08-11Posted at 2024-08-11

はじめに

Power Appsでアコーディオンメニューを作りたい
そう思ったことはございませんか？私はあります。

SharePointではサクっと作成できるアコーディオンメニュー、グループ化されたビューという表現もできますが、Power Appsでもサクっと作成したい。

今回は、ダミーの従業員リストを用いて

部署別
年月別

上記のグループ化されたビューを作成していきたいと思います。

活用するコントロールは、下記の2点のギャラリーコントロールです。

モダンコントロールは、含めない内容にしています。

記事の執筆は2024.08.11段階です

完成系のイメージ

今回作成する完成系は下記の動画のものです。

納期からの現実逃避でアコーディオンメニュー作っている・・・ #PowerApps pic.twitter.com/Np6MmKPNI6
— 出戻りガツオ🐟 Microsoft MVP (@DemodoriGatsuo) August 7, 2024

データソース(SharePoint Lists)

私がSharePoint Listsで用意している従業員リストを使います。
こちらのデータは全て架空の内容です。

■ SharePoint Listsの詳細

表示名	英語の列名	列のデータ型
タイトル	Title	1行テキスト
Photo	PhotoThumbnail	縮小表示
Name	Name	1行テキスト
氏名	FullName	1行テキスト
フリガナ	PhoneticName	1行テキスト
誕生日	Birthday	日付と時刻
年齢	Age	数値
メールアドレス	EmailAddress	1行テキスト
携帯電話番号	MobilePhoneNumber	1行テキスト
役職	JobTitle	1行テキスト
セクション	Section	1行テキスト
HashTags	HashTags	複数行テキスト
性別	Gender	選択肢
部署	Department	選択肢

この中でも用いる列は

Photo
氏名
誕生日
携帯電話番号
部署

こちらを使用します。

ステップバイステップで作成してみる

1. コレクションの設定

親ギャラリーコントロール
子ギャラリーコントロール

双方のデータソースにコレクションを設定します。
データの大本はSharePoint Listsですが、キャッシュの仕組みを活用したデータ読み込みの効率化を狙い、コレクションにデータを格納して参照していきます。

従業員リストすべてのデータに該当するのはcolChildという名称を付けたコレクションです。

従業員リストすべてのデータ

ClearCollect(
    colChild,
    ShowColumns(
        'employee list',
        Title,
        Photo,
        Name,
        氏名,
        部署,
        役職,
        携帯電話番号,
        誕生日
    )
);

コレクションには必要列のみを格納しています。

次に、親のギャラリーコントロールに設定するコレクションを設定しましょう。
部署別、年月別※(誕生日列を使用)を用いて、コレクションを設定します。

まずは部署別です。

■ 部署別

こちらの例では、部署を表示するDepartment列の重複をDistinct 関数で省き、子のギャラリーコントロールのvisibleプロパティを操作するため、VisibleStatusというBoolean型の列をAddColumns 関数で追加しています。

部署別にグループ化するためのコレクション

ClearCollect(
    colDepartment,
    AddColumns(
        Distinct(
            colChild,
            Department
        ),
        VisibleStatus,
        true
    )
)

次に年月別を見ていきます。

■ 年月別※(誕生日列を使用)

年月別の例は誕生日を表示するBirthday列を使っています。

あまり誕生日でやるケースはないと思いますが、例としてみてください。

部署別とやっていることは似ていますが、日付型の列であるBirthday列をyyyy/㎜の形式の表記に変換し、重複削除したうえで、Sort 関数で降順に並び替えています。

年月別にグループ化するためのコレクション

ClearCollect(
    colYearMonth,
    AddColumns(
        Distinct(
            Sort(
                colChild,
                Birthday,
                SortOrder.Descending
            ),
            Text(
                Birthday,
                "yyyy/mm"
            )
        ),
        VisibleStatus,
        true
    )
)

これらをギャラリーコントロールが位置する画面のOnVisibleプロパティに設定します。

OnVisible

ClearCollect(
    colChild,
    ShowColumns(
        'employee list',
        Title,
        Photo,
        Name,
        氏名,
        部署,
        役職,
        携帯電話番号,
        誕生日
    )
);
Concurrent(
    ClearCollect(
        colDepartment,
        AddColumns(
            Distinct(
                colChild,
                Department
            ),
            VisibleStatus,
            true
        )
    ),
    ClearCollect(
        colYearMonth,
        AddColumns(
            Distinct(
                Sort(
                    colChild,
                    Birthday,
                    SortOrder.Descending
                ),
                Text(
                    Birthday,
                    "yyyy/mm"
                )
            ),
            VisibleStatus,
            true
        )
    )
)

Concurrent 関数を用いて、依存関係がないコレクションの設定を並列処理にしています。

2. コントロールの設定

次にコントロールを配置していきましょう。

■ 構成

高さが伸縮可能なギャラリー
- 表示/非表示を切り替えるシェブロン
- 部署名または年月を表示するテキストラベル
- 空の垂直ギャラリー
  - コンテナー
    - 画像コントロール - 社員のプロフィール写真を表示
    - テキストラベル - 社員名を表示
    - アイコン - 電話のアイコン
    - テキストラベル - 携帯電話番号
    - アイコン - 役職ありの方に表示するアイコン（役職がある場合、表示）
    - テキストラベル - 役職名

ギャラリーコントロールをネストさせてコントロールを組み立てます。

コントロールのプロパティ

■ 親のギャラリーコントロール
Itemsの設定値は、部署別の場合colDepartment、年月別の場合はcolYearMonthです。

ギャラリーに含めているシェブロン(アイコン)のOnSelectに、下記の関数を仕込みます

OnSelect

// 部署別の場合
UpdateIf(
    colDepartment,
    Value.Value = ThisItem.Value.Value,
    {
        Value: ThisItem.Value,
        VisibleStatus: !ThisItem.VisibleStatus
    }
)
// 年月別の場合
/*
UpdateIf(
    colYearMonth,
    Value = ThisItem.Value,
    {
        Value: ThisItem.Value,
        VisibleStatus: !ThisItem.VisibleStatus
    }
)
*/

部署別の場合、UpdateIf 関数の表現がValue.Valueという冗長的な状態になってしまっています。
元の列のデータ型が選択肢列のためです。

■ 子のギャラリーコントロール
Itemsの設定値を親のギャラリーコントロールのThisItemを利用して、グループ化されたビューを実現します。

Items(部署別)

Filter(colChild,Department.Value = ThisItem.Value.Value)

Items(年月別)

Filter(colChild,Text(Birthday, "yyyy/mm") = ThisItem.Value)

子のギャラリーコントロールの高さ(Height)は、レコードの一行の高さ × Self.AllItemsCountとすることで、子のギャラリーコントロールの行数に応じた伸縮が実現されます。

Height

// 一レコードの高さを40と設定する場合
40 * Self.AllItemsCount

ピシっと動的にサイズ変更がされて気持ちよいですね。

また子のギャラリーコントロールのVisibleプロパティにThisItem.VisibleStatusを設定することで、アイテムの表示/非表示のコントロールが実現されます。

なかなかPower Appsが映えて良い感じのビューになりますね。
そして紐解いていくと、あまり難しいロジックでもないことがわかります。

注意点

映える見た目、ということで機能を紹介しましたが、検証段階でもこの機能には問題があります。

大きなポイントとしては、使用するコントロールが過剰になる傾向が挙げられます。

今回紹介している機能だけでもパフォーマンスの課題が提起されるほどです。

対策として

コンポーネントとして作成する
そもそもPower Appsでやらない（データのビューはSharePointでクイックに作成できる）

このようなポイントが挙げられます。

いくらPower Appsが好きだから・・・といっても、なんでもPower Appsでやると痛い目を見ます(実体験)
車輪の再発明を避けて、Microsoft 365のサービスを組み合わせて、ベストプラクティスに基づいた仕組みづくりが理想ですね。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

ギャラリー コントロール完全に理解した！Power Appsでアコーディオンメニューを作成する！！