Power Appsアプリ作ってみた日本酒記録アプリ

【Power Appsで日本酒記録アプリ】さけのわAPI(日本酒API)の結果をParseJSONでコレクションに格納・コレクションの結合・フォームのコントロール変更

Power Apps

Power Appsでデータソースによって自動生成できるアプリをアレンジして、飲んだ日本酒を記録するアプリを作るシリーズです。

この記事では、以下のテクニックについて解説しています。

  • JSON文字列のコレクション化
  • テーブルの結合
  • フォームのコントロール変更
前回

フローの追加

前回まででフローを作成していたので、フローを追加します。

JSON文字列をコレクションに変換

App.OnStartでJSON文字列をコレクションに変換します。

ParseJSON関数でJSON文字列を変換すると、「型指定されていません。WValue、Text、その他の関数を使用して型指定してください。」というエラーが出ます。

データ型がUntypedObject型になっていることが原因であるため、以下のようにText関数やValue関数を用いてデータの型を指定する必要があります。(超めんどくさい)

With(
    さけのわ銘柄一覧.Run() As Sakenowa,
    Concurrent(
        ClearCollect(
            ColBrands, 
            ForAll(
                ParseJSON(Sakenowa.brands),
                {id:Value(ThisRecord.id), name:Text(ThisRecord.name), breweryId:Value(ThisRecord.breweryId)}
            )
        ),
        ClearCollect(
            ColAreas, 
            ForAll(
                ParseJSON(Sakenowa.areas),
                {id:Value(ThisRecord.id), name:Text(ThisRecord.name)}
            )
        ),
        ClearCollect(
            ColBreweries, 
            ForAll(
                ParseJSON(Sakenowa.breweries),
                {id:Value(ThisRecord.id), name:Text(ThisRecord.name), areaId:Value(ThisRecord.areaId)}
            )
        ),
        ClearCollect(
            ColRankings, 
            ForAll(
                ParseJSON(Sakenowa.breweries),
                {rank:Value(ThisRecord.id), score:Value(ThisRecord.score), brandId:Value(ThisRecord.brandId)}
            )
        ),
        ClearCollect(
            ColFlavorCharts, 
            ForAll(
                ParseJSON(Sakenowa.'flavor-charts'),
                {f1:Value(ThisRecord.f1), f2:Value(ThisRecord.f2), f3:Value(ThisRecord.f3), f4:Value(ThisRecord.f4), f5:Value(ThisRecord.f5), f6:Value(ThisRecord.f6), brandId:Value(ThisRecord.brandId)}
            )
        ),
        ClearCollect(
            ColFlavorTags, 
            ForAll(
                ParseJSON(Sakenowa.'flavor-tags'),
                {id:Value(ThisRecord.id), name:Text(ThisRecord.name)}
            )
        )
    )
);

テーブルの結合

さけのわAPIに登録されていない銘柄をSharePointリストの日本酒マスタに登録していく想定をした時に、アプリ上の日本酒一覧は2つのテーブルを結合して表示する必要があります。

以下の数式で2つのテーブルを結合することが可能です。2つのテーブルに共通している列のみしか表示されないので、RenameColumns関数で列名を変更しています。

Ungroup(
    AddColumns(
        ["API", "SharePoint"],
        "Data",
        If(
            Value = "API",
            ColBrands,
            RenameColumns([@日本酒マスタ], "ID", "id")
        )
    ),
    "Data"
)

2つのテーブルを結合して表示できるようになりました。

AddColumns + Ungroup関数はこちらの記事も参考にしてください

フォームのコントロール変更

フォームのコントロールをコンボボックスに変更して、銘柄の検索とAPIから取得したIDはBrandID列に、SharePointから取得したIDはBrandSPID列に格納されるようにします。

データカード内のコントロールを選択した状態で、挿入→入力よりコンボボックスを選択します。

データカードのロックを解除します。

コンボボックスの位置やサイズを調整したら、以下のプロパティを元々のテキスト入力コントロールからコピペします。

コンボボックスのItemsプロパティを先ほど作成した結合テーブルの数式に変更します。

コンボボックスのフィールドを以下のように変更します。

プロパティのコピーと変更が完了したら、元々のテキスト入力コントロールの名前(DataCardValue28)をコピーしてコントロールを削除します。

元々のテキスト入力コントロールを削除します。

削除するとエラーが表示されるので、追加したコンボボックスの名前をコピーしたコントロールの名前に変更します。

Updateプロパティの変更

Updateプロパティが型エラーまたはプロパティエラーとなっているので、型を合わせる必要があります。

BrandID列には選択した銘柄がAPIのデータである時のみIDを格納したいので、以下の数式を設定します。

逆にBrandSPID列には選択した銘柄がSharePointのデータである時のみIDを格納したいので、以下の数式を設定します。

最後にBrandIDのDisplayNameを銘柄名に、BrandSPIDのカードのVisibleプロパティをfalseに設定して入力画面は完成です。

次回

コメント

タイトルとURLをコピーしました