【AppSheet】INPUT関数で作る！「インタラクティブ・ダッシュボード」
目次
はじめに
以前、INPUT関数の基礎編として、【AppSheet】INPUT関数で一括承認を行う方法を解説しました。
今回はその続きとして、INPUT関数をもう一歩使いこなす「応用編」です。
テーマは、インタラクティブ・ダッシュボードの作り方。
画面の使いやすさに直結するポイントなので、仕組みを知っておくとかなり便利です。
ぜひ最後まで読んでみてください！
ダッシュボードのお話
INPUT関数の解説に入る前に、少しだけダッシュボードに関するお話をしたいと思います。
実は、過去の記事：【AppSheet】LINKTOFILTERTEDVIEW()をダッシュボードで使う方法でも軽く触れているので、「もうわかっているよ！」という方は、この章を飛ばしてください。
もし、ダッシュボードについてよくわからないという方は、引き続き読んでみてください。
インタラクティブ・モードとは
ダッシュボードには、「インタラクティブ・モード」という強力な機能があます。
これがオンになっていると、行をクリックした際にダッシュボード内の関連する他ビューに変化するというものです。
また、「関連する一覧ビュー」→「ダッシュボード」に遷移という場合も、インタラクティブモードと「LINKTOROW()」とい関数の組合せで
この機能のおかげで、業務システムとしての利便性が1段上がるので、ダッシュボード利用時はほとんどの場合で使われていると思います。
インタラクティブモードの罠
ただし、1点大きな欠点があります。
それが、
他のページに遷移できない
というものです。
実際に見てもらった方が早いので、下記を見てみてください。
一覧テーブル→ダッシュボードに遷移という流れです。
ダッシュボードの一覧をクリックしているのですが、他のページに遷移しません。
これは、公式に確認を取ってみましたが、仕様上そうなっているのでどうしようもないとのことでした。
解決策：インタラクティブモードは「オフ」
結論として、インタラクティブモードは使いません。
ただし、インタラクティブモードでできる「関連したビューのみの表示に絞る」というのも実現させたいです。
そのため、考え方としては、
①クリック時に関連する値を別テーブル（一時保存テーブル）に入力
②その値でスライスしたビュー作成
という感じになります。
もう少しわかりやすく、図にすると以下のようになります。
INPUT関数でテーブルの値を変更
ここで大切な役割を果たすのが、INPUT関数です。
上記の図でいうところの、②でINPUT関数を使います。
では、以前解説したINPUT関数の考え方3ステップを出します。
【STEP1】箱（変数）を作る
【STEP2】値を渡す場所を設定する
【STEP3】値を決める
今回は、【STEP3】が肝になりますので、この点をより深く解説していきます。
【STEP1】と【STEP2】は、前回と同様なので、設定のみ簡単に説明します。
実装の全体像
それでは、実装に入っていきましょう。
今回サンプルで作るのは
「建設業のプロジェクト管理システム」
です。
完成後はこのような動きになります。
前提となるテーブルは以下です。
- 現場詳細
- タスク一覧
- 現場ID一時格納TB
スライスの設定
一時保存テーブルに格納されている現場IDと、各テーブルの現場IDが一致する行のみを表示するスライスを作ります。
適用する関数は両方とも同じです。
[現場ID]=LOOKUP(USEREMAIL(),"現場ID一時格納TB","ユーザー","現場ID")- sl_現場詳細
※「Relatedタスク一覧s」は消しておきます。
- _slタスク一覧
ビューの作成
次に、ビューを作成します。
- 現場一覧ビュー
※「Relatedタスク一覧s」は消しておきます。
ダッシュボード（現場詳細＋タスク一覧）ビュー
いずれも先ほどつくったスライスを適用します。また、インタラクティブモードは「オフ」にしてください。
- タスク詳細ビュー
現場一覧ビュー以外は、Positionをrefに設定してください。
これでビューは完成です。
アクションの設定
次はいよいよINPUT関数を使っていきます。
アクションの流れとしては、
「現場一覧ビューをクリック→一時保存テーブルに現場IDを保存→ダッシュボードビューに遷移」
のようになります。
INPUT関数の設定
「現場一覧ビューをクリック→一時保存テーブルに現場IDを保存」実行するためのアクションの設定です。
【STEP1】箱（変数）を作る
まずは、現場IDを「一時保存テーブル」に保存するため、「一時保存テーブル」に変数を作ります。
アクション名：一時保存
For a record of this table：現場ID一時格納TB
Do this：Date: set the values of some columns in this row
変数は「Advanced」で以下の通りに設定します。
【STEP2】値を渡す場所を設定する
次に、値を渡す場所を設定します。
先程作った変数の中に入った値は、「現場ID一時格納TB」の現場IDカラムに入ります。
そのため、現場IDカラムに以下の関数を設定します。
[_INPUT].[Inputs_現場ID]また、ユーザーカラムには現在のログインユーザーが入るため、USEREMAIL()を設定します。
【STEP3】値を決める
ここが、今回の応用ポイントです。
変数に格納したい値は、「クリックされた"現場詳細ビューにある"現場ID」です。
現場詳細ビューのテーブルは「現場詳細」テーブルですから、「現場詳細」から「現場ID一時格納TB」へといったテーブルを跨いだ処理になります。
そのため、現場詳細で「Date: execute an action on a set of rows」を設定します。
以下、アクションの設定です。
ポイントは、下2つの「Referenced Action」と「With these inputs」です。
「Referenced Action」で、【STEP1】【STEP2】で設定したアクション「一時保存」を選択すると、自動で「With these inputs」という項目が出てきます。
そこに入力される「Inputs_現場ID=現場ID」というのは、
「【STEP1】で設定した変数「Inputs_現場ID」に、現場詳細テーブルの「現場ID」という値を入れる」
という意味です。
こうすることで、どんな値をいれるかの設定ができます。
レコードを追加する設定
これは地味に重要なポイントです。
先程のアクション「現場ID渡す」のReferenced Rowsで以下の関数を設定しました。
FILTER(現場ID一時格納TB,[ユーザー]=USEREMAIL())これは、ログインしているユーザーIDとユーザーカラムに格納されているユーザーIDが一致した行を対象にする、という意味です。
つまり、ユーザーカラムに値が入っている前提であり、逆に値が入っていないとアクションが実行しません。
そのため、
「もしログインユーザーIDの値があるレコードがなければ追加する」
というアクションを設定します。
設定は以下の通りです。
ここで重要なのが、Behaviorの「Only if this condition is true」に設定する関数です。
NOT(
IN(USEREMAIL(),現場ID一時格納TB[ユーザー])
)上記の関数は、「現場ID一時格納TBのユーザーカラムに、現在ログインしているユーザーが"含まれていない"場合」という意味になります。
つまり、すでにユーザーIDが格納されている場合は実行されず、格納されていないときだけ実行される関数です。
LINKTOVIEW()の設定
「一時保存テーブルに現場IDを保存→ダッシュボードビューに遷移」を実行するためのアクションの設定です。
設定は以下の通りです。
アクションをまとめる
現場一覧テーブルクリック→「アクション①：レコード追加（ユーザーIDが無い場合）」→「アクション②：現場IDを渡す」発火→「アクション③：ダッシュボードに遷移」発火
という流れになるので、①、②、③を連続で実行するアクションを設定します。
現場一覧ビューのクリック時にアクションを発火するので、Positonを「Inline」に設定します。
逆に、①、②、③のアクションのPositionは「Hide」に設定しますので、併せて確認してください。
最後に、現場一覧ビューのBehaviorのEvent Actionsに「グループ実行」を設定したら、終了です。
完成後の動き
では、完成後の動きを見ていきましょう。
事前にデータは入れてあります。
これで、インタラクティブモードを使わなくても、インタラクティブモードのような動きができるようになりました。
インタラクティブモードを使っていないため、「タスク一覧」のレコードをクリックしたら、タスク一覧の詳細に遷移します。
さいごに
今回は、ダッシュボードの弱点を焦点に、INPUT関数の応用を解説してきました。
他にも、INPUT関数でできることは様々とあり、これを使いこなせると開発の幅が劇的に広がります。
そのため、しっかりと理解しておきましょう。
また、もし「これわからない！」「こんなこと紹介して欲しい”」といことがありましたら、お問い合わせフォームからどんどんリクエストしてください！
それではまた次回お会いしましょう！