AppSheetでダッシュボードビューを活用する
AppSheetには色々なビューがありますが、その中でもちょっと複雑な表示が可能になるビューがいくつかあります。その内の１つが「dashboardビュー」。複数のビューを1箇所に集約し、タブで表示切替が出来るようになります。
また、表示するだけでなくInteractive Modeを使うことで親テーブルで選択したデータに基づいて、フィルタした内容を別のビューで表示するといったことが可能になります。
目次
今回利用する素材
- ダッシュボード活用術 - AppSheet
- ダッシュボード活用術 - Google Spreadsheet
今回は、顧客テーブル・商談テーブル・納品テーブルの3つで構成し、これらそれぞれのビューを１つにまとめたビューに対してdashboardビューを設定しています。
個々のビューはそれぞれに適切なものを指定していますが、Tableビューだけはちょっと難があるのでそこだけ要注意です。
図：スマホの場合は上部にタブで分割
図：タブレットの場合はビュー毎に独立
事前準備
各テーブルのリレーションシップ
AppSheetのプロジェクトに、スプレッドシートのmain, 商談, 納品の3テーブルをそれぞれテーブルとして取り込みます。mainが中心となる顧客管理のテーブルです。商談と納品にはそれぞれ顧客ID列が存在するので、型をRefにしてmainテーブルへとリレーションシップを貼ります。
図：リレーションを張っておく
図：mainテーブル側の様子
個別のビューを用意する
main, 商談, 納品の各々に対してビューを用意します。mainは初回プロジェクト作成時に用意されていると思います。しかし、この3つのビューはReference Viewsに配置しておく必要があります。よって、下の方にビュー一覧には出てこなくなります。
また全てのビューはPositionについてはRefにしておく必要があります。
顧客情報ビュー
mainテーブルを元に通常のDeckにてビューを作成します。プロジェクト作成時におそらく作成済みのビューであるので新規に作成は不要です。Reference Viewsに移動しておきましょう。
図：ここは至って普通にビューを作っておく。
商談ビュー
商談テーブルを元に新規にビューを作成し、Reference Viewsに移動させます。こちらもビューのタイプは今回は編集ボタンを表示したいので、Deckにしておきます。
図：商談ビューも普通に作成する
納品ビュー
納品テーブルを元に新規にビューを作成し、Reference Viewsに移動させます。しかしこちらはデータの編集は不要ですので、ビューのタイプはTableに変更しています。
図：納品データをTableで一覧表示
Dashboardビューの作り方
顧客マスタービューを作る
さて、いよいよ前述で用意した3つのビューを取りまとめて、Dashboard表示とするビューを作ります。以下の手順で作成します。
- ビューの画面でPrimary Navigationの横の+ボタンをクリックする。
- Create a new Viewをクリックする
- View Nameを顧客マスターとでも命名しておきます。
- View Typeを「Dashboard」に変更します。PositionはFirstにでもしておきます。
- View Optionsの中のView Entriesでは順番に「顧客情報、商談、納品」をそれぞれAddボタンで追加する
- Use tabs in mobile viewのスイッチをオンにする（タブ表示になります）
- Interactive modeのスイッチをオンにする
Interactive Modeをオンにすると、顧客情報ビューで特定顧客をクリックすると、商談および納品のビューの内容が、それぞれ顧客IDでフィルタされて表示されるようになります。
図：3つのビューを1つのビューに集約させます
注意点
ここで冒頭にもあった注意点。個々のビューでTypeをTableを選択した場合、Dashboardビューの場合には、これらのTableの行をクリックしても無反応になります。つまり編集画面への遷移はできなくなります。これはそういった仕様であり、Behaviorでアクションを設定しても、編集画面には飛びません。
どうしてもここから編集画面へ推移したい場合には、このビューに対してはTypeはDeckやCardにしておく必要があります。そこに表示されるアクションボタンからであれば、編集画面などに飛ぶことが可能です。
図：Tableだけは編集に飛べない
同一ビューを分割して表示
前述までは3つのテーブルに3つのビュー。それを1つにまとめるようにDashboardを作りました。しかし一方で、同一のテーブルに対して、Refで接続してることで、mainテーブルにはRelated 商談sやRelated 納品sが存在します。前述のような作り方の場合は、それぞれのテーブルに対してビューを作りましたが、mainテーブルのみをソースとして3つのビューに分割するといった使い方も可能です。
この場合、mainは顧客情報のみ、商談と納品はそれぞれRelated 商談sやRelated 納品sだけを表示してるといった具合に作ります。この時ポイントになるのは、商談および納品のRelatedを表示するビューのタイプは「Detail」にしておくこと。
この状態で、前述のDashboardのEntriesの１つとして追加すると、きちんとフィルタされた状態で、サブフォームたるRelated 商談sのフィールドのみが表示されたビューが実現できます。
※ちなみにこのパターンの場合、サブフォーム上の元の商談ビューTableであっても、Relatedの中身であるのでクリックすれば普通に編集画面が表示されるようになります（前述の注意点とは挙動が異なるのです）
図：個別のビューはDetailで作っておく
図：Column OrderではRelatedの列のみ表示
図：きちんとフィルタもされます
