請求書アプリを作りながら、AppSheetの使い方を学びましょう。
前回(第2回)はスプレッドシートからアプリを生成し、テーブルと列の設定を行いました。
今回はリレーションシップを使用してテーブル間の親子関係を設定します。
請求書に限らず、リレーションシップの概念はアプリ開発に必須ですが、AppSheetでもテーブル間のリレーションシップ設定ができるんです!
1. 請求書に品目明細を追加する
請求書には品目、単価、数量、金額、合計金額などの明細、品目明細が必要です。
第2回でテーブルと列の設定を行いましたが、現時点では品目明細を請求書に追加できないようになっています。
プレビュー画面で「請求書」を表示し、「+」ボタンで請求書作成フォームを表示すると以下のようになっています。
品目を追加するフィールドは表示されません。
請求書に品目明細を追加するためには、リレーションシップを利用してテーブル間の親子関係をAppSheetで設定する必要があります。
タスク管理アプリでも「タスク」テーブルと「ノート」テーブル、「ドライブ」テーブルに親子関係を設定しています。
請求書アプリでは、請求書と品目明細の親子関係は特に重要ですので、詳しく解説していきます。
2. AppSheetでは「Ref」で親子関係を設定する
請求書と品目明細の関係は、請求書が親、品目明細が子になります。
請求書アプリでは、「請求書」テーブルが親、「品目」テーブルが子になります。
AppSheet では、列TYPEに「Ref」を設定することでテーブル間のリレーションシップを設定します。
前回(第2回)で、「品目」テーブルに「請求書ID」という列を用意しました。
この「請求書ID」列には、「請求書」テーブルの「ID」の値を保存しておき、「品目」テーブルと「請求書」テーブルとのリレーションシップが設定されます。
では、このリレーションシップを利用して、「請求書」テーブルと「品目」テーブルとの間に親子関係を設定しましょう。
AppSheetにおけるテーブル間の親子関係は以下のように設定します。
請求書アプリでは、前回(第2回)の設定で1と2は済んでいます。
- 子テーブル内に列TYPE「Ref」の列を用意する
- 列設定パネルで、Type Detailsの「Source table」に親テーブルを設定する
- 「Is a part of ?」をチェックする
では設定の残り、3の「Is a part of ?」にチェックを入れて、「Done」をクリックしてパネルを閉じましょう。
「Is a part of ?」を有効にすると、
- 親レコードを新規に追加する時に、子レコードも同時に追加できる
- 親レコードを削除した時に子レコードも同時に削除される
という使い方ができます。
右上の「Save」ボタンをクリックして、保存することを忘れずに。
これで、「請求書」テーブルと「品目」テーブルとの間に親子関係を設定できました。
請求書アプリにおける「テーブル間の親子関係の設定」手順は以下の通りです。
- 「品目」テーブル(子テーブル)に列TYPE「Ref」の列、「請求書ID」列を用意する
- 「請求書ID」列の設定パネルで、Type Detailsの「Source table」に「請求書」(親テーブル)を設定する
- 「Is a part of ?」をチェックする
AppSheetエディタのプレビューで確認してみましょう。
右側のプレビュー画面で「請求書」を表示し、「+」ボタンで請求書作成フォームを表示します。
一番下までスクロールしてみましょう。
「品目 entries that reference this entry in the 請求書ID column」というフィールドが追加されました。
「Is a part of ?」をチェックして有効にすると、請求書を追加するビューで品目明細を追加できるようになります。
「New」をクリックしてみましょう。
「品目」を追加するフォームが表示されると思います。
これで請求書に品目明細を追加できるようになりました。
ただし、「品目 entries that reference this entry in the 請求書ID column」という表示が長いのと、何を言っているのか分からないので、列設定で表示を調整しましょう。
3. AppSheetの分かりにくい表示を整える
AppSheetエディタの左側メニュー「Data」をクリックします。
タブメニュー「Columns」をクリックして、「請求書」をクリックして列設定パネルを開きます。
「請求書」テーブルの「列(Columns)」が一覧で表示されます。
一番下までスクロールすると、「Related 品目s」という列が自動的に追加されていることが分かります。
「Related 品目s」の左にあるペン型アイコンが青色なのが分かります。
これは「Related 品目s」列がVirtual Columnであることを示します。
仮想的に追加された列なので、スプレッドシートのデータには影響を及ぼしません。
「請求書」テーブルの一部に、「品目」テーブルの「請求書ID」列が仮想的に含まれたということを意味します。
では、「Related 品目s」列を右にスクロールしていきましょう。
「DISPLAY NAME」フィールドをクリックしてください。
Expression Assistant を開いて、以下のように入力して「Save」をクリックして保存します。
「DISPLAY NAME」に右隣にある「DESCRIPTION」フィールドをクリックして、Expression Assistantから「品目 entries that reference this entry in the 請求書ID column」を消去した後、「Save」をクリックして保存してください。
再度、AppSheetエディタのプレビューで確認してみましょう。
右側のプレビュー画面で「請求書」を表示し、「+」ボタンで請求書作成フォームを表示します。
「品目 entries that reference this entry in the 請求書ID column」が「品目」に変わって、見た目がスッキリしました。
以上、リレーションシップを使用してテーブル間の親子関係を設定しました。
テーブル間の親子関係は応用が利くので、「Ref」を使ったテクニックをこの機会に習得しておきましょう。
今回(第3回)まではテーブルと列の設定だけで、請求書アプリのイメージが掴めていないかもしれません。
次回(第4回)は少しデータを入力して、品目明細から請求金額をAppSheet関数を使って計算してみます。
SELECT関数を使って他のテーブルの列から値のリストを取得して、SUM関数で合計する方法を解説します。