見出し込みのGalleryを生成する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313502/f30b831e-5e25-7d8d-aee2-12a223715283.png)

Twitterで流れてきたカテゴリヘッダー込みのデータをGalleryに表示する方法を考えました。
今回のキーは[GroupBy 関数](https://docs.microsoft.com/ja-jp/powerapps/maker/canvas-apps/functions/function-groupby)と[ForAll 関数](https://docs.microsoft.com/ja-jp/powerapps/maker/canvas-apps/functions/function-forall)。

データの完成イメージはこんな感じ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313502/d274206b-e5cc-c774-0dd2-29ecf45ebe7b.png)

#試す
**方法なんてどうでもいいから試したい人向け。**

まずボタンを三つ用意し、OnSelectに以下の式をそれぞれ入れてください。

```C#:ボタン1元テーブル生成
ClearCollect(
    元テーブル,
    Table(
        {
            見出し: "見出しA",
            値1: 1,
            値2: "Z",
            値3: "Z1"
        },
        {
            見出し: "見出しA",
            値1: 1,
            値2: "Z",
            値3: "Z1"
        },
        {
            見出し: "見出しA",
            値1: 1,
            値2: "Z",
            値3: "Z1"
        },
        {
            見出し: "見出しB",
            値1: 1,
            値2: "Z",
            値3: "Z1"
        },
        {
            見出し: "見出しB",
            値1: 1,
            値2: "Z",
            値3: "Z1"
        },
        {
            見出し: "見出しC",
            値1: 1,
            値2: "Z",
            値3: "Z1"
        },
        {
            見出し: "見出しC",
            値1: 1,
            値2: "Z",
            値3: "Z1"
        },
        {
            見出し: "見出しC",
            値1: 1,
            値2: "Z",
            値3: "Z1"
        },
        {
            見出し: "見出しC",
            値1: 1,
            値2: "Z",
            値3: "Z1"
        },
        {
            見出し: "見出しC",
            値1: 1,
            値2: "Z",
            値3: "Z1"
        }
    )
)
```

```C#:ボタン2グループ化テーブル生成
ClearCollect(
    グループ化テーブル,
    GroupBy(
        元テーブル,
        "見出し",
        "見出し以外"
    )
)
```

```C#:ボタン3見出し込みテーブル生成
Clear(見出し込みテーブル);
ForAll(
    グループ化テーブル,
    Collect(
        見出し込みテーブル,
        {見出しデータ: 見出し}
    );
    Collect(
        見出し込みテーブル,
        見出し以外
    )
)
```
ボタン1から順に押すと、Collection`見出し込みテーブル`を表示しているGalleryはこうなるはずです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313502/68afd964-5f60-3899-ece2-366d8f8ee391.png)

#何をやったか
##元データ
まず、カテゴリ分けに使う見出し付きのテーブルを用意します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313502/e74c8bcb-5cf1-b601-42fe-5892600bb005.png)

##カテゴリでグループ化
**元テーブルを見出しで[GroupBy](https://docs.microsoft.com/ja-jp/powerapps/maker/canvas-apps/functions/function-groupby)します。**
するとそれぞれの見出しに属するレコードが**テーブルとしてネストされます。**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313502/81f0b6b4-f0c4-7fff-8c96-2c84245a9e1a.png)
[GroupBy 関数](https://docs.microsoft.com/ja-jp/powerapps/maker/canvas-apps/functions/function-groupby)の挙動はこんな感じ。

```C#:グループ化テーブル
GroupBy(
    元テーブル,///グループ化するテーブル
    "見出し",///グループ化に使う列
    "見出し以外"///それ以外の列を格納する列の列名
)
```
##見出しレコードをCollectし、続けてグループ化にネストされたテーブルをCollectする
後は**グループ化テーブルを一行ずつ[ForAll](https://docs.microsoft.com/ja-jp/powerapps/maker/canvas-apps/functions/function-forall)で処理していく**だけです。
[ForAll](https://docs.microsoft.com/ja-jp/powerapps/maker/canvas-apps/functions/function-forall)の第二引数は数式で、`;`で区切る事で複数の数式を実行できます。

>[操作の実行](https://docs.microsoft.com/ja-jp/powerapps/maker/canvas-apps/functions/function-forall#taking-action)
>
>この数式には、 Patch 関数と Collect 関数によるデータ ソースのレコードの変更など、操作を実行する関数を含めることができます。 また、この数式は、接続に対してメソッドを呼び出すこともできます。 ; 演算子を使用すると、レコードごとに複数の操作を実行できます。 ForAll 関数の対象であるテーブルを変更することはできません。

よって`ForAll(データソース,Collect();Collect())`のように順番に処理する記述が可能です。

今回は以下の順番でCollectしています。

1. 見出し用のレコードをCollectionに追加
2. グループ化テーブルの`見出し以外`にネストされているテーブルをCollectionに追加

この処理が[GroupBy](https://docs.microsoft.com/ja-jp/powerapps/maker/canvas-apps/functions/function-groupby)された見出しごとに回り、見出しレコードで区切りされたテーブルが完成します。

こんな感じで動いてます。

```C#:見出し込みテーブル
ForAll(
    グループ化テーブル,///これを対象に1レコードずつ処理を繰り返す
    Collect(
        見出し込みテーブル,///見出しレコードを追加
        {見出しデータ: 見出し}
    );
    Collect(
        見出し込みテーブル,///その下に見出しに該当するテーブルを追加
        見出し以外
    )
)
```
#Galleryで表示
Gallery内のコントロールのVisibleに`IsBlank(ThisItem.見出し)`をうまく使って、見出しとそれ以外のテンプレートを分けましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313502/3ac31862-0c38-b70a-9ad4-bea2199be610.png)

#まとめ
- **[GroupBy](https://docs.microsoft.com/ja-jp/powerapps/maker/canvas-apps/functions/function-groupby)でまとめる**
- **まとめたデータを[ForAll](https://docs.microsoft.com/ja-jp/powerapps/maker/canvas-apps/functions/function-forall)でレコードごとに処理する**
- **Collectはテーブルを第二引数にした場合、中のレコードをCollectionに追加してくれる**

皆さんがデータ型と関数の挙動を学び、充実したPower Platform Lifeを送れますように。
No Data, No Life.