コルネの進捗や備忘録が記されたなにか

進捗や成果物や備忘録てきななにかを雑に更新していきます。

Power Appsに新しく追加された関数"ColumnNames", "Column"関数を使って異なるスキーマが設定されたJSONをテーブル形式で表示させる


スポンサードリンク

はじめに

Power Appsで最近 ColumnNames 関数と Column 関数が追加されました。

learn.microsoft.com

※まだ日本語のドキュメントは展開されていないようです。

でたばかりの頃は、Power Appsのバージョンを変更しないと使えない関数でしたが、今新規作成されたアプリの作成バージョンは"3.24015.12"になっているかと思いますので、特にバージョン変更など必要なく使えるようになっているかと思います。

ColumnNames 関数

ColumnNames 関数は型付けされていない(UnTypedObject) レコードの列名を返します。

ここで注意しなくてはいけないのは、

  • 型付けされていない必要があること
  • レコードであること

の2点です。

まずは使い方を見てみましょう。
公式ドキュメントの通りですが以下のように利用します。

ColumnNames(ParseJSON("{ ""name"": ""Seattle"", ""population"": 737000 }"))

設定したJSONには "name" と "population" の2つがありますね。

{
  "name": "Seattle",
  "population": 737000
}

なのでこれら2つの列名が返ってきます。

続いて型が指定されている(わかっている)レコードを設定してみます。

ColumnNames({name: "Seattle", population: 737000})

無効な引数で、UntypedObjectを設定するように。とのエラーがでましたね。

このようにこちらの関数はUntypedObjectな結果を解析する際に利用する関数となっています。

つまりParseJSON関数と組み合わせて利用する関数ということですね。

ParseJSON関数に関しては以下の公式ドキュメントや、私が以前記載した記事を参考にしてみてください。

learn.microsoft.com

koruneko.hatenablog.com

さて、もう一つの気を付けるべき点ですがレコードを設定する必要があるということです。

例えば以下のようなObject形式のデータを設定してみます。

[
  {
    "name": "Seattle",
    "population": 737000
  }
]
ColumnNames(ParseJSON("[{ ""name"": ""Seattle"", ""population"": 737000 }]"))

引数が正しくないとエラーがでていますね。

このようなObject形式のデータを設定する必要がある場合はFirst関数などでレコードに変換してあげる必要があります。

ColumnNames(First(ParseJSON("[{ ""name"": ""Seattle"", ""population"": 737000 }]")))

また、JSON内にあるObject形式のデータの列名は現時点では取得できないようです。

TextInput1.Text

{
    "name": "Seattle",
    "population": 737000,
    "point": {
        "type": "Point",
        "coordinates": [
            47.67053604,
            -122.12073517
        ]
    }
}

Column 関数

Column 関数は型付けされていない(UnTypedObject) レコード内の特定の列の値を返します。

ここで注意しなくてはいけないのは、

  • 型付けされていない必要があること
  • レコードであること

の2点です。

まずは使い方を見てみましょう。
公式ドキュメントの通りですが以下のように利用します。

Column(ParseJSON("{ ""name"": ""Seattle"", ""population"": 737000 }"), "name")

設定したJSONには "name" と "population" の2つがありますね。

{
  "name": "Seattle",
  "population": 737000
}

そのうち"name"を指定していますので、"Seattle"が返ってきます。
なお、このままでは型指定していないので、UntypedObjectになっています。

これをちゃんと型設定する場合は以下のようにする必要があります。

Text(Column(ParseJSON("{ ""name"": ""Seattle"", ""population"": 737000 }"), "name"))

Value(Column(ParseJSON("{ ""name"": ""Seattle"", ""population"": 737000 }"), "population"))

"name"はText型なのでText関数で、"population"は数値型なのでValue関数で型指定している感じですね。
それらにあった型で関数を使い分ける必要があります。

なお最初に示した例のように現在ではUnTypedObjectでもラベルに設定すれば自動で型推測して値を表示してくれます。

続いて型が指定されている(わかっている)レコードを設定してみます。

Column({name: "Seattle", population: 737000}, "name")

無効な引数で、UntypedObjectを設定するように。とのエラーがでましたね。

このようにこちらの関数はUntypedObjectな結果を解析する際に利用する関数となっています。

つまりParseJSON関数と組み合わせて利用する関数ということですね。

ParseJSON関数に関しては以下の公式ドキュメントや、私が以前記載した記事を参考にしてみてください。(再放送)

learn.microsoft.com

koruneko.hatenablog.com

さて、もう一つの気を付けるべき点ですがレコードを設定する必要があるということです。

例えば以下のようなObject形式のデータを設定してみます。

[
  {
    "name": "Seattle",
    "population": 737000
  }
]
ColumnNames(ParseJSON("[{ ""name"": ""Seattle"", ""population"": 737000 }]"))

引数が正しくないとエラーがでていますね。

このようなObject形式のデータを設定する必要がある場合はFirst関数などでレコードに変換してあげる必要があります。

Column(First(ParseJSON("[{ ""name"": ""Seattle"", ""population"": 737000 }]")), "name")

また、JSON内にあるObject形式のデータは現時点では取得できないようです。

TextInput1.Text

{
    "name": "Seattle",
    "population": 737000,
    "point": {
        "type": "Point",
        "coordinates": [
            47.67053604,
            -122.12073517
        ]
    }
}

スキーマが異なるJSON形式のデータをテーブルで表示させる

さて、本題です。

以下のようにJSONデータをPower Apps上でJSONがわからないようなユーザにもわかりやすいようにテーブル形式で表示させる方法についてです。

なお、Object形式のJSONが設定されることを前提としています。

まず例として以下のようなJSONデータを用意します。

[
  {
    "name": "佐藤太郎",
    "age": 22
  },
  {
    "name": "高橋次郎",
    "age": 18
  },
  {
    "name": "田中三郎",
    "age": 21
  }
]

続いてJSONデータから ColumnName 関数と Column 関数を用いて列名とその列のデータを取得します。

Set(jsonData, ParseJSON(JSONTxt.Text));
ClearCollect(jsonKeys, ColumnNames(First(jsonData)));
ClearCollect(
    jsonCol,
    ForAll(
        jsonKeys As name,
        {
            Key: name.Value,
            Value:
                ForAll(
                    jsonData As data,
                    Column(data, name.Value)
                )
        }
    )
)

それぞれ以下のような結果が得られますね。

jsonData

jsonKeys

jsonCol


次にこのデータを表示させるためのコントロールの設定です。

以下のようにギャラリーの中にギャラリーを設定します。

"ParentGallery" が「水平ギャラリー」で "DataGallery" が「垂直ギャラリー」です。

サイズや座標などは各々いい感じに設定してもらうとして、他重要な項目は以下のように設定します。

ParentGallery.Items

jsonKeys

ColumnNameLbl.Text

ThisItem.Value

DataGallery.Items

LookUp(jsonCol, Key = ThisItem.Value, Value)

DataLbl.Text

ThisItem.Value

列数分だけ水平ギャラリーによって横方向に列が増えていき、行数分だけ垂直ギャラリーによって縦方向に行が増えていく。という風な作りですね。

Power Appsで列名を動的に設定できたらよかったんですけどねーーーー

現状そのようなことはできませんので、このようにデータの持ち方と表示方法で工夫しています。

スキーマの異なる他のJSONデータでも試してみます。

[
    {
        "title": "The Great Gatsby",
        "author": "F. Scott Fitzgerald",
        "publication_year": 1925,
        "genre": "Classic Fiction"
    },
    {
        "title": "To Kill a Mockingbird",
        "author": "Harper Lee",
        "publication_year": 1960,
        "genre": "Southern Gothic"
    },
    {
        "title": "1984",
        "author": "George Orwell",
        "publication_year": 1949,
        "genre": "Dystopian Fiction"
    }
]

いい感じに表示できていますね!

おわりに

Power Appsでも生のJSONデータを扱う術が増えてきましたね!

これにより、Power Appsで様々なスキーマAPIの結果を表示/操作することも可能になってきましたねー


スポンサードリンク