Power Appsではとても簡単にJSONをつくれます！条件付きで

今回はPower AppsでJSONデータを作成する方法のご紹介です。

最終的にはPower AppsでLINEのリッチメニューシミュレータ＆JSON出力を作成しましたので、今回例として利用するスキーマはLINEリッチメニューのものです。以下、サンプルデータ：

 [
    {
      "bounds": {
        "x": 34,
        "y": 24,
        "width": 169,
        "height": 193
      },
      "action": {
        "type": "message",
        "text": "Hello World!"
      }
    },
    {
      "bounds": {
        "x": 229,
        "y": 24,
        "width": 207,
        "height": 193
      },
      "action": {
        "type": "uri",
        "uri": "https://www.line-community.me/"
      }
    }
  ]

特にレイアウトを記述する"areas"部分の配列をPower Appsで作成していきます。

※条件付きでの部分は後述

単純なオブジェクトの例

上記のサンプルデータから離れて、手短に簡単なオブジェクトを作ってみます。

{
  "x": 34,
  "y": 24,
  "width": 169,
  "height": 193
}

Power AppsにはJSON関数というものがあり、これを用いてJSONデータを作成できます。

何らかのボタンを用意して、ボタンのOnSelectアクションに以下のように式を書いてみます。

Set(
    sampleObject,
    JSON(
        {
            x: 34,
            y: 24,
            width: 169,
            height: 193
        },
        JSONFormat.IndentFour
    )
)

これで、ボタンを押したときに、目的のオブジェクトが生成されます。 "オブジェクト"と言っていますが、JSON関数の結果は文字列です 。

f:id:mofumofu_dance:20200521141512p:plain

ちょっと発展させて、サンプルのうち、heightの値を入力できるようにしてみます。

Power Appsにはテキスト入力コントロールを配置して、ボタンのOnSelectを以下のように置き換えます。

height: Value(TextInput1.Text)

f:id:mofumofu_dance:20200521141915p:plain

注意事項1

ここで「条件付き」の1つ目ですが、Power AppsでJSONを使ってデータを作る際、Key:Valueのうち Valueは動的 (ユーザー入力等)にできますが、Key は固定です (数式内で明示的に与える必要がある)。

この制限は、そもそもPower Appsでレコード型のデータを作成する場合の制約で、回避するには、頑張ってスキーマ通りに文字列結合をConcatinate関数で行うくらいしかありません。

少し複雑な例

『Keyとして出てくるものは決まっているけど、条件によって切り替えたい』 であれば、Power Apps上のIf関数やSwitch関数で対応できます。

実際、LINEリッチメニューのケースでも登場しています。

例えばドロップダウンの値に応じてKeyを変えたいなら、Switch関数を利用して;

Set(
    sampleObject,
    Switch(Dropdown1.Selected.Value,
    "message",
        JSON(
            {type:"message",
             text:TextInput1.Text
            },
            IndentFour
        ),
    "uri",
        JSON(
            {type:"uri",
             uri:TextInput1.Text
            },
            IndentFour
        )
    )
)

このように表現できます。

f:id:mofumofu_dance:20200521143546p:plain