欲しいアプリは自分で作る!

Power Platform や Azure などを利用して作成した業務アプリや趣味アプリなどをご紹介します。

Power Apps で Gallery を日付列で絞りたい時によく使うフィルタの方法をまとめてみた

変数は使用しませんので、変数が苦手な方はご安心ください。




どうも、じゅんじゅんです。



パッと見た情報が、大量の情報の中から日付で絞られていることって、多いですよね。

  • Amazon の注文履歴(過去6か月)
  • ネットバンキングの取引履歴(最近1週間)
  • iTunes("最近" 追加した項目)
  • 勤怠システム(月別)

なので、さあこれを Power Apps で作ってみよう!となるわけですが、残念ながら Power Apps でアプリをデータから自動生成すると、一覧画面の Gallery は文字列検索機能しかついていません。

何かしら日付で絞り込みたい場合は、自分で1から追加記述する必要があるんですね。


ということで、今日は「何かしら日付でフィルタリングしてみたい!」という初学者の方向けに、お役に立てるかもしれないいくつかの例をご紹介したいと思います。


今回使用するアプリ

今回は、我が家の家計簿のデータから自動生成したアプリを使用します。
見やすいよう、Gallery 内のコントロールの位置や表示を少しいじっていますのでご了承ください。

ひとまず、Gallery の Items はテーブル名のみ記載し、全件表示する状態にしています。
なお、日付型の列の列名は「日付」です。

f:id:jn-kodama:20201213154533p:plain
家計簿データ(SharePoint リスト)

f:id:jn-kodama:20201213155007p:plain
データから自動生成したアプリ(の Gallery 内のコントロールにちょっと手を加えたもの)


パターン1:過去〇〇日の情報を表示する

Amazon の注文履歴やネットバンキングの取引履歴などのパターンです。
Filter 条件は1つだけのシンプルなパターンになります。

まずは、特定の日付以降の情報のみを表示してみましょう。
特定の日付は、Date 関数で指定できますので、以下のように記述します。

Filter('家計簿-メイン', 日付 >= Date(2020, 12, 1))

f:id:jn-kodama:20201213155842p:plain
Gallery 内のデータが12月1日以降の情報のみになっていることが分かる

Date 関数は、見ればお気づきになるかと思いますが、年、月、日をそれぞれ引数に入れるだけの簡単なものです。

簡単ですね。
ちなみに、弊社の残業申請アプリ(申請する側)は、この方法で過去40日分のみを表示するようにしています。


続いて、この日付を変えられるようにしてみましょう。
ユーザーに日付を選択させる必要がありますので、日付入力コントロールが必要です。
画面上部の「入力」→「日付の選択」で、画面に日付入力コントロールを追加します。

f:id:jn-kodama:20201213162146p:plain
DatePicker1 という日付入力コントロールが追加された

この日付入力コントロールの情報を、先ほどの Filter 条件で使用します。

Filter('家計簿-メイン', 日付 >= DatePicker1.SelectedDate)

f:id:jn-kodama:20201213162356p:plain
Gallery 内のデータが日付入力コントロールの値である12月11日以降の情報のみになっていることが分かる

日付入力コントロール名.SelectedDate で、選択された日付を日付型で返してくれますので、これでOKです。

簡単ですね。


次は、1週間以内の情報のみを表示してみましょう。
1週間以内というのは、厳密に言うと「今日から1週間以内」ということになります。
このように、とある日付を起点として〇〇日前、〇〇日後のような日付計算は DateAdd 関数が使えますので、以下のように記述します。

Filter('家計簿-メイン', 日付 >= DateAdd(Today(), -7, Days))

f:id:jn-kodama:20201213161732p:plain
Gallery 内のデータが執筆日の7日前である12月6日以降の情報のみになっていることが分かる

Today 関数は、引数なしで今日の日付(時刻は0時0分)が取れます。
DateAdd 関数は、とある日付(第1引数)を起点として、どの単位で(第3引数)どれくらい(第2引数)日付をずらすかを計算してくれるものです。
今回の場合は、今日を起点として、-7日、つまり7日前を計算してくれています。

簡単ですね。


続いて、6か月以内の情報のみを表示してみましょう。
過去6か月が何日分かは今日の日付によって変わりますので、先ほどの DateAdd 関数を用いて以下のように計算します。

Filter('家計簿-メイン', 日付 >= DateAdd(Today(), -6, Months))

f:id:jn-kodama:20201213160905p:plain
Gallery 内のデータが執筆日の6か月前である6月13日以降の情報のみになっていることが分かる

先ほどの DateAdd 関数は月単位でも計算してくれますので、それを利用するだけです。

簡単ですね。


では最後に、過去〇日以内、の〇日の日付を変えられるようにしてみましょう。
今回はスライダーを用いてみることにします。
スライダーコントロールを追加し、先ほどの DateAdd 関数を用いて以下のように計算します。

Filter('家計簿-メイン', 日付 >= DateAdd(Today(), -Slider1.Value, Days))

f:id:jn-kodama:20201213163438p:plain
Gallery 内のデータがスライダーの値である10日前=12月3日以降の情報のみになっていることが分かる

簡単ですね。


パターン2:〇月〇日~△月△日までの情報を表示する

Twitter の "高度な検索" にもある、あの機能です。

ということで、先ほどまでで日付の絞り方や日付を制御する関数をご理解いただけたところで、今度は日付の範囲を指定してみます。
このような場合は、Power Apps に限らずですが以下の2の条件として考えます。

 「その情報は〇月〇日以降か?」 かつ 「その情報は△月△日以前か?」

上記の2つの条件が両方成立するものだけを表示すればいいんですね。

ということで、Filter 関数は複数の条件を AND(= かつ)で指定できますので、単純に条件を増やすだけで完成です。

せっかくなので、日付入力コントロールを2つ用いてやってみましょう。

Filter('家計簿-メイン', 日付 >= DatePickerFrom.SelectedDate, 日付 <= DatePickerTo.SelectedDate)

f:id:jn-kodama:20201213164806p:plain
Gallery 内のデータが2つの選択した日付の範囲内の情報のみになっていることが分かる

意外と簡単ですね。

1点注意なのは、データベース側で日付列に時間が含まれている場合です。
データの日付列に時間が含まれていると、「△月△日まで」を指定している日付は厳密には「指定日の0時0分」となっているため(上記の例で言うと12月4日の午前0時まで)、同日の0時以降のものは抽出されません。
このような場合は、翌日を選択してもらうか、以下のように日付処理を行う必要があるためご注意ください。

f:id:jn-kodama:20201213165626p:plain
上図は To 側の日付を DateAdd 関数で1日増やし、条件を <= から < に変更した例


パターン3:月毎に情報を表示する

勤怠システムなどのように月別で管理するものは、大抵年月を選ぶとその月の情報が表示されるかと思います。

これは「その月の1日から、翌月の1日未満」の情報を表示することで実現できます。
つまりは、先ほどのパターン2を使えばできるんですね。
ただ、いかんせん年月を選ぶのにいちいち From と To を指定するのはしんどい。
ということで、ここではもっと簡単な操作で年月を選択できるようにしてみます。

まず、年と月を選択するためのドロップダウンコントロールをそれぞれ追加し、各々のドロップダウンの Items に以下を記載します。
年の方は、とりあえず3年前~今年の計4年分を選択できるようにしていますが、お好みに応じて適宜変更してください。

[Year(Today()), Year(Today()) - 1, Year(Today()) - 2, Year(Today()) - 3]

[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]

f:id:jn-kodama:20201213171925p:plain
年のドロップダウンの Items
f:id:jn-kodama:20201213172047p:plain
月のドロップダウンの Items
※別の関数を使えばもっとスマートに記述できるのですが、今回は分かりやすさを重視してみました。

ちなみに、ドロップダウンの Default を以下のようにすると、初期状態で今の年月が選択できます(以下は月のドロップダウンの例)。 f:id:jn-kodama:20201213172337p:plain

続いて、追加したドロップダウンの値を用いて以下のように計算します。

Filter('家計簿-メイン', 日付 >= Date(DropdownYear.Selected.Value, DropdownMonth.Selected.Value, 1), 日付 < DateAdd(Date(DropdownYear.Selected.Value, DropdownMonth.Selected.Value, 1), 1, Months))

f:id:jn-kodama:20201213184237p:plain

f:id:jn-kodama:20201213184330p:plain
Gallery 内のデータが指定した年月の情報のみになっていることが分かる

急に記載量が増えましたが、やっていることはシンプルです。
まずは第2引数。

日付 >= Date(DropdownYear.Selected.Value, DropdownMonth.Selected.Value, 1)

やっていることは、パターン1の一番最初に登場した Date 関数の年と月の値に、各々のドロップダウンで選択された値を入れているだけです。
日の部分を固定で1とすることで、指定した月の1日を示しています。

続いて第3引数。

日付 < DateAdd(Date(DropdownYear.Selected.Value, DropdownMonth.Selected.Value, 1), 1, Months)

第2引数よりちょっと長いですが、やっていることは、Date 関数で先ほどと同様に指定月の1日を設定し、それを DateAdd 関数で次の月に変換しているだけです。
この値 "未満" とすることで、指定した月の情報のみを抽出しているんですね。


おわりに

あくまで個人的な意見ですが、今回ご紹介した日付列をはじめとした Gallery のフィルタリングのコツが掴めれば、アプリの作成の幅は一気に広がるのかなと思います。

弊社の場合、重要度の高いアプリはほぼ「Gallery」と「Form」がメインで、使用するテーブルも1つというシンプルなものばかりなんですね。
その中で複雑なアプリはどういうものかというと、ほぼ "検索機能が豊富かどうか" です。

データソースが持つ列の数が多いと、Gallery などで一覧表示する際に絞り込みたい情報が沢山出てきますよね。
弊社のアプリでも、7つの列を同時にフィルタリングできるものがありますが、Items の記載は複雑怪奇なものになっています。

沢山出てくる要件をいかに最適化するか。
これはアプリ設計の醍醐味のひとつでもありますので、是非シンプルイズベストなフィルタリングを目指してみてください。



欲しいアプリは欲しい人が作る時代へ。
何かのご参考になれば幸いです。