はじめに
業務アプリで検索して詳細を確認できるだけの簡単なアプリを簡単に作りたいなぁってことがありました。
Fluterって選択肢も一瞬浮かんだんですが、ローコードでWebで見れるだけでも良いのでつくりたいなぁと。一番は時間をかけたくない。
で、Power Appsでやってみることにしました。Power Pagesも今度試したいなぁと思いながら今回はPower Appsで。
実装
全く知識のない状態からローコードで簡単に作れるものだろうか。
左のメニューから作成を選択し、空のアプリを作成します。
データベース接続
今回は業務アプリでDBが存在していてそこから検索アプリを作成します。
DBではなくて、Excelであっても他のデータベースであっても大きくは変わりません。
テーブル
レイアウトからテーブルを選択しキャンバスにドラッグアンドドロップします。
右側のプロパティ設定または、上部の関数入力欄に取得する情報を入力します。
どちらで入力しても良いのですが、上部の関数入力欄が良いのかなとは思います。だけど、左のドロップダウンリストで何が選択されているのか確認しないと間違った項目を編集してしまうことがよくあります。
itemsに入力
ドロップダウンでItemsを選択
関数の説明
itemsに関数が設定されています。SQLで絞り込みたいところなんですが、そこはローコードツールと言ったところでしょうか?エクセルライクな書き方になります。
FirstN(
Sort(
Filter('hoge', moge=1),
created_at,
SortOrder.Descending
),
1000
)
ネストの最深部から確認します。
Filter関数で、第一引数にデータソース(ここではデータベースのテーブル名)を指定、第2引数に条件を指定しています。
Filterが複数条件になったときは、かなり癖があって、ここに一番時間がかかりました。
プログラマおなじみの || && Or を組み合わせます。||は最初がtrueなら後ろは評価されない。&&は最初がfalseなら後ろは評価されない。を利用してfilterを追加していきます。
Sort関数で、第一引数にデータ、第二引数に並び替える列名、第三引数に降順を指定しています。
全件表示すると時間がかかるので、FirstN関数で上位1000件を取得しています。
フィールド選択
テーブルの列を選択します。
右側のプロパティで表示する列を選択したり、並び順を変更したりできます。
Tableにはステータスなどはコードで登録されていることはよくあります。そういった時は、関数を使ってわかりやすい名前に変更します。
左のメニューで変更したい項目を選択して上の関数に関数を入力 (左、右、上のどこを操作すればいいのか慣れるまでよく迷子になる)
OnSelect
javascriptyと同じでそれが選択されたときのイベントを設定します。
Navigate(Details, ScreenTransition.Fade, {selectedId: hoge.Selected.id})
選択されたら詳細ページに遷移させます。
3つ目の引数は、パラメータ。コンテキスト変数と言うらしい。JSONで渡します。
受け取ったページでは、変数名を直接利用できます。
ここでは、selectedId を利用できます。
JSON
MySQLでJSON型の列があって、それをきれいに表示したいなと言うことがありました。
ここではテキストからJSON型にキャストして利用する方法を記載します。
つまりは、DB関係なくJSONを扱う方法を記載します。
ForAll(
ParseJSON("{""hoge"": ""1"", ""moge"": ""2""}"),
{
new_hoge: Text(ThisRecord.hoge)
}
)
ParseJSON関数にJSON文字列を設定します。(DBから取得した文字列や、APIを実行した結果のJSONなど)
第二引数で新たにJSONを定義してあげます。
これで、new_hogeがりようできるようになります。
つまりは、ParseJSONでJSON型に変換してもそこにどんなkeyやvalueが入っているか不明なため、Power Appsが理解できるようにJSONを作成してあげる
まとめ
かなりの部分を端折ったのですが、少しでもエンジニア経験があれば、初見でも何となく作れてしまうのがローコードの良いところ。痒いところに手が届かないこともあるけど、簡単なものは簡単に作れるのはやっぱりいいなと思う。
今回は参照系のアプリを作ったのですが、これをフォームにして更新、新規作成もできるようにするのにもわりと簡単にできてしまいます。