見出し画像

Power Appsで入れ子のギャラリー（Nested Gallery）を使うのはよほどのことがない限りやめましょうの話

おーけす

私が顧客にサービスを提供し始めたころに、機能としてできるとしてもやめておこうの考えを持った経験の一つです。Power Appsでは当初からギャラリーの中にギャラリーを作成できることができます。これを入れ子のギャラリー（Nested Gallery）と呼びます。

どういうときに求められるのか

入れ子のギャラリーはカテゴリ情報を持つデータや中間IDを持つデータを一覧でまとめる際に使用します。

こういうデータが入れ子のギャラリーの対象となる

システムとしては設計されたデータであるため、出力されたデータはこのような形式になっています。アナログな現場の業務担当者はExcelで取り扱っており、私自身は、施工や機械などを取り扱う建設業や製造業のお客さんのケースが多いです。全データが手元にあるのでExcelでもPower BIでも集計するのは便利ではあります。

Power Appsだとどうなるのか

Power Appでこのようなデータを取り使うアプリを使いたいのは、シンプルにデータを加工したいためといえます。日頃取り扱うExcelデータをモバイルやPCで簡単に入力したいというニーズがあり、実際の現場では手書きのメモを後からExcel等に転記するといった二重の作業がペインとなっています。

単純に一覧化したデータ

Power Appsにデータを取り込むと「見づらいよね。。。」という当然の感想が上がっています。そこで「カテゴリ毎に分類して見やすく一覧化できないか」という欲求が出てきますので、入れ子のギャラリーが使われるケースが発生します。

入れ子のギャラリーの問題点とは

入れ子のギャラリーはギャラリーアイテムを選択状態にしてギャラリーを挿入することで作成できます。

ギャラリー内に作成した入れ子のギャラリー

作成方法は難しくありません。親ギャラリーの重複を除去し、子ギャラリーで参照するだけです。使用する関数はGroupBy関数です。

//親ギャラリーのItems
GroupBy(Sample_List,"Title","Primary_ID","Group1")
//子ギャラリーのItems
ThisItem.Group1

このように簡単にできるのに、何が問題なのでしょう。これを挙げていきます。

  • 通常のギャラリーと異なる動作をする
    通常はドラッグでアイテムの高さを変更できますが、この当たり前の操作が利きません。変数などでの値の参照が正しく行えないなど、意図しない動作が行われます。開発に悪影響を及ぼしますので、お勧めできません。

  • パフォーマンスが低下する
    ギャラリーの中でギャラリーをレンダリングするため、メモリを消費します。データ量が増えれば増えるほど、動作に悪影響を及ぼしますので、顧客に提供するアプリとしては、品質面で課題が生じます。

  • ギャラリー内スクロールバーが発生する
    カテゴリ毎のデータ数が可変するため、昔のWebサイトでよくあったIframe内コンテンツのスクロールバー撲滅対策が困難です。子ギャラリーの高さを大きくとるほかありません。

  • コンテナー内で作れない
    コンテナーでは入れ子のギャラリーは作成できません。課題を解決するには別の手段が必要です。

一覧化のベストプラクティス

カテゴリ毎に一覧化するには、コレクションを使用し、書式設定等でカテゴリ毎に表現します。流れとしては以下のようになります。

  1. 基データをコレクション化し、その際に識別用のデータを付与する

  2. コレクションから大分類の重複を除去し、大分類識別用のデータを付与する

  3. 1と2を結合する

  4. ギャラリーで書式設定およびVisibleプロパティ等を制御し、見出しとデータを識別できるようにする

//AppのOnStartプロパティに記述
//基データをコレクション化し、その際に識別用のデータを付与する
ClearCollect(colContents,AddColumns(ShowColumns(Sample_List,"Title","Primary_ID","Secondary_ID","Item_ID","Item_Data"),"Hierarchy",2));
//コレクションから大分類の重複を除去し、大分類識別用のデータを付与する
ClearCollect(colHeader,AddColumns(ShowColumns(GroupBy(colContents,"Title","Primary_ID","Distict_Data"),"Title","Primary_ID"),"Hierarchy",1));
//1と2を結合する
ClearCollect(colGroupData,colHeader,colContents)

三段階でデータを加工するだけでOKです。重複除去対象が1列なら、Distinct関数でもよいでしょう。ギャラリーのItemsプロパティにcolGroupDataを設定します。

コレクションを使用して一覧化。帳票形式でスッキリ

どのように識別しているかわかりやすいようHierarchyの値を表示しています。あとはIf関数などでこの値を条件に書式や表示をコントロールすればOKです。

〆

Power Appsでは提供されている機能を駆使して複雑な構成のアプリを開発することも可能ですが、作りやすさ、使いやすさだけでなく、運用を想定したパフォーマンスについても考慮する必要があります。一歩先の開発スタイルを目指していきましょう。



この記事が気に入ったらサポートをしてみませんか？