PowerAppsで家計簿を作ってみる(その2)

PowerAppsの勉強の続きです。
前回はDB周りのことをまとめたので、今回は画面の作成でやったことをまとめていく。

前回やったこと

sy0690.hateblo.jp

履歴の画面

f:id:syota-y1989:20200818221410p:plain

使った部品はこれだけ。
* アイコン
* ラベル
* 四角形の図形
* 垂直ギャラリー
先に四角形の図形を配置して背景として使用します。部品はレイヤーみたいな形になるので、四角形の図形を置いた後に配置するとこんな形にできました。

f:id:syota-y1989:20200818221719p:plain
アイコンはデフォルトでこれだけ色々とそろってるので、ここから選ぶだけです。
ここにないものが欲しい場合は、自分で画像を用意してボタン代わりにする必要があります。

f:id:syota-y1989:20200818222040p:plain
ギャラリーはデータソースに接続してそこからデータを引っ張ってきます。表示したい場所に表示したい項目を選択するだけでOKです。
今回はTBL_HISTORYからリレーション項目をたどってTBL_ITEMの費目名も欲しいのでビューを作成し、それを指定しています。

ThisItem.費目ID.費目名

「ThisItem」は対象レコードを指すので、対象レコードの費目IDからTBL_ITEMのレコードを引っ張ってきて、そのレコードの費目名を指定しています。

Text(ThisItem.金額,"[$-ja]￥###,###")

金額は先頭に￥マークと、3桁カンマを入れたいのでこのようにフォーマットします。[$-ja]は自動で付くので、自分で入力するときはなくて良いです。

最後に「+」マークをクリックしたら次の画面に遷移したいので、設定のOnSelectを設定します。

Navigate(SelectCategoryScreen,ScreenTransition.Fade)

Navigate関数は以下のように引数を設定して画面遷移を実現します。
* 遷移したい画面名：SelectCategoryScreen
* 画面切り替え時の方法： ScreenTransition.Fade

ScreenTransition.Fadeなどは入力予測のように補助があるので、すべて覚えておかなくでも大丈夫です。
※＋マークの横のアイコンはまた別途やるので今回は飛ばします。(データがたまったら分析やりたいだけなので）

カテゴリ選択の画面

f:id:syota-y1989:20200818224242p:plain
新しい画面はこの中の「リスト」を選びます。こうするとテンプレートから必要な部品がある状態で画面が構成されて作成されます。空の画面を1から作成するよりは実装時間を短縮できるので、基本的にはこれらを活用する形になるかなと思います。

f:id:syota-y1989:20200818224823p:plain
ギャラリーはTBL_CATEGORYをデータソースに指定しています。 f:id:syota-y1989:20200818224930p:plain
データはデータソースを指定してきているだけです。超簡単です。

f:id:syota-y1989:20200818225354p:plain
この画面はTextSearchBox1という名前で検索用のテキストボックスを付けています。ここに入力したら検索が走るようになっています。(検索ボタンとかは不要)

SortByColumns(Search(TBL_CATEGORY, TextSearchBox1.Text, "crd62_categoryname"), Text("crd62_categoryid","[$-ja]##"),Ascending)

検索はSearch関数を使ってます。引数は
* データソース：TBL_CATEGORY
* 検索文字列：TextSearchBox1.Text
* 検索対象列：crd62_categoryname

また、ソートをするためにSortByColumns関数を使っています。引数は
* データソース：Search(TBL_CATEGORY, TextSearchBox1.Text, "crd62_categoryname")
* ソート対象の列：Text("crd62_categoryid","[$-ja]##")
* 順序：Ascending(昇順)

ソート対象の列に対してTEXT関数でフォーマットしているのは、crd62_categoryidが数値ではなく文字としてソートされてしまったので、あえて2桁にそろえてソートするようにしました。項目自体はオートナンバーなんですが文字扱いになってるみたいなのでこの辺はテクニックがあるんでしょうか？

最後に画面遷移用にギャラリーの部品に対してOnSelectを設定します。

Navigate(InsertNewDataScreen,ScreenTransition.Fade,{SelectedCategoryID:ThisItem.カテゴリーID,SelectedCategoryName:ThisItem.カテゴリー名})

Navigate関数は第3引数に変数をセットできます。｛｝でくくった中身が変数として扱われるので、

{SelectedCategoryID:ThisItem.カテゴリーID,SelectedCategoryName:ThisItem.カテゴリー名}

このような形で2つの変数をセットしました。「変数名：セットしたい値」で宣言します。

入力画面

f:id:syota-y1989:20200818231315p:plain
最後は入力用のフォームを作成します。
画面のタイトルが「食費の入力」となってますが、ここは1つ前の画面で選択したカテゴリー名を出しています。

Concatenate(SelectedCategoryName,"の入力")

Concatenate関数を使って、前の画面から引き継いだ変数を使用してタイトル文字を作成しています。

f:id:syota-y1989:20200818231747p:plain
フォームについてはTBL_HISOTRYをデータソースとして指定し、その項目を出しているだけです。

f:id:syota-y1989:20200818231915p:plain
f:id:syota-y1989:20200818232022p:plain
日付はデフォルトでは時刻のフィールドが表示されますが、表示をオフにすることで画面上非表示としています。
日付の初期値はToday関数を使って画面を開いた日付をセットしています。
f:id:syota-y1989:20200818232630p:plain

f:id:syota-y1989:20200818232730p:plain
f:id:syota-y1989:20200818232842p:plain
費目については、前の画面で選択したカテゴリーに属するものだけ表示したいので、

Filter(Choices([@TBL_HISTORY].費目ID),カテゴリー名 = SelectedCategoryName)

こんな感じでFilter関数を使用している。引数は
* データソース：Choices([@TBL_HISTORY].費目ID) ※テーブルの形でデータセットが返ってきます。 * フィルターの条件：カテゴリー名 = SelectedCategoryName

SelectedCategoryNameは前の画面で画面遷移のOnSelectで設定したものを使用する。
データソースはChoise関数を使って値を取得している。
f:id:syota-y1989:20200818233143p:plain
表示名はそのままだと費目IDになってしまうのでこのように費目名が出るようにしています。

f:id:syota-y1989:20200818233331p:plain
f:id:syota-y1989:20200818233345p:plain
画面の右上のチェックマークをクリックするとフォームをサブミットしてテーブルにデータをINSERTします。

サブミット後の問題

フォームをサブミットしてデータを更新した後こうなる・・・

原因はフォームの設定にあった。

f:id:syota-y1989:20200818233618p:plain
f:id:syota-y1989:20200818233655p:plain
まず、フォームの規定が「新規」になっていること。そしてフォームをサブミットした後の動作をしてOnSuccessをNewFormで設定すること。
これをしないと、サブミット後フォームが編集モードになるようです。この動きは仕様っぽいです。