deckで年→月のドリルダウンをUXから設定
以下は筆者が作成した家計管理アプリです。
毎月つけているLOGをまずは年で選択し、その後、年毎の月のデータを参照できるように、UXでドリルダウンの設定をします。
![](https://gldegg.com/wp-content/uploads/2023/10/image-10.png)
今回の例はUXのView type「deck」を使用していますが、「deck」ではGroup byでドリルダウンの階層を設定できます。
上に設定しているものほど上位階層になりますので、以下のように設定した場合、「年」→「月」→各月で記録された「アセット」をドリルダウンして参照することができます。
![](https://gldegg.com/wp-content/uploads/2023/10/image-12-800x557.png)
また、グループ化を設定するBoxの左側をドラッグ&ドロップをすると並び替えをすることができます。
![](https://gldegg.com/wp-content/uploads/2023/10/image-13.png)
右側の「▼」からグループ化する項目や昇順(Ascending) or 降順(Descending)を設定することができます。
![](https://gldegg.com/wp-content/uploads/2023/10/image-15.png)
![](https://gldegg.com/wp-content/uploads/2023/10/image-14.png)
以下のように年月日で並んだLogやそもそも日付別にグループ化されていないLogと比較しても必要な時期の記録にアクセスしやすくなります。
![](https://gldegg.com/wp-content/uploads/2023/10/image-16-800x1000.png)
年月の設定方法
順番は前後しますが、DataのColumnsから年月を設定する方法を解説します。
![](https://gldegg.com/wp-content/uploads/2023/10/image-18.png)
上のようなスプレッドシートをデータソースとするとColumnsでは「日付」のTypeは「Date」に設定します。
![](https://gldegg.com/wp-content/uploads/2023/10/image-17-800x298.png)
「Viertual Column」から年を設定します。
![](https://gldegg.com/wp-content/uploads/2023/10/image-19-800x435.png)
Column nameは「年」にして、App formulaには以下のような関数を入力しました。
![](https://gldegg.com/wp-content/uploads/2023/10/image-20.png)
Typeは「Text」にします。
数式バーをクリックすると以下のように数式を入力するダイアログボックスが表示されるので、「YEAR([日付])&”年”」と入力し、Testから検証をしてみます。
![](https://gldegg.com/wp-content/uploads/2023/10/image-22.png)
すると日付から年の数字を抜き出し、”年”をつけたTextが返されたことがわかります。
![](https://gldegg.com/wp-content/uploads/2023/10/image-23.png)
月も同様の手順で「Viertual Column」から設定し、App formulaには「MONTH([日付])&”月”」という関数を入力します。
![](https://gldegg.com/wp-content/uploads/2023/10/image-24-800x240.png)
ここまででSAVEすると、UX画面のdeckのviewからGroup byで設定した「年」と「月」を選択できるようになり、階層を作ってドリルダウン表示できるようになります。
![](https://gldegg.com/wp-content/uploads/2023/10/image-25-800x854.png)
今回の内容が参考になれば幸いです。
家計簿で過去の年月を指定し、支出を抽出する方法としてとても参考になりました。ありがとうございます。
お役に立てて嬉しく思います。コメント励みになります。ありがとうございました。