kの雑記ブログ本記事はノーコードアプリ開発について全く知らなかった管理人が独学で勉強し、ここ大事！と感じた部分を記事にまとめています。
本ブログでは新UI画面で内容をまとめています。
新旧画面への切り替えは、下図を参考に該当アイコンをクリックしてください(^^)
まずはじめに
- ref機能とは何かを知りたい人
- enumによる値の登録では数が多すぎて困っている人
- 複数のテーブルに親子関係を持たせて紐ついているデータを遡る
今回の記事内容は、データタイプrefについてです。
appsheetにあるとても便利な機能で、ref関係を結んだテーブル間ではお互いに自由にカラム情報を取得することが可能です。
簡単な設定で高度なアプリのような挙動を演出できるので、特にappsheetの基本を学びたい方は参考にしてください。
また、本記事でぜひマスターして欲しいref構文を2つ紹介しています。使い方はとてもシンプルです(^^)
それでは勉強していきましょう！
ref機能とは？
冒頭でも書きましたが、データタイプrefの最もパワフルな機能として
親子関係を結んだテーブル間では、そこに紐ついている情報を遡ることが出来る
これに尽きると思います。
この効果を実感するためには、まずデータを管理するテーブルを適切な状態にすることが大切です。
このデータを管理するテーブルの構成がきれいに作れるようになるとrefの機能を最大限に活かすことが可能です(^^)
テーブル間でrefを結ぶときのテーブルの構成は以下の2パターンを覚えておきましょう(^^)
- 入力を促す選択肢をまとめたマスターテーブルを用意する（参照データを定期的に更新することが可能）
- 親テーブルに紐付くデータとして使用（親テーブルのKey値に紐付く情報として記録）
ref関係を結ぶならこのどちらかのテーブル構成に該当するはずです。
マスターテーブルの用意は何となくイメージが付くと思うので、親テーブルに紐付くデータとして使用する場合とはどういう意味かを、見積書の作成を例として説明をします。
ref関係を使いこなすには全体のテーブル情報を俯瞰視することが大事です。
自分がどういったことをやりたいのか一度書き出してみるといいですよ(^^)
おすすめの思考の可視化ツールはこちら続いて、各シートのカラム情報を説明します。
IDと見積書番号のみ用意
見積もりIDは見積書シート、品目と価格は品目シートとRef関係を結びます
見積もり詳細シートに値を送るシート
これら3つのシートを用いて見積書作成アプリを作成してみたいと思います。
初心者の人がよくやりがちなミスとして、1つのシートに全ての情報を詰め込む ことが挙げられます。
今回の場合だと見積書シートの中に見積もり詳細（明細）を入れてしまうでしょう・・
新規登録したデータに今後複数の情報を組み込みたいか？
この質問にYesならシートを分ける（refの関係を持たせる）ほうがいいと思います(^^)
例えば
1つの見積書に複数の明細を付ける場合（本記事で実演）
取引先の会社名および従業員情報をリスト化
データを登録したユーザーのメールアドレスを取得し、ユーザー別で色々な管理がしたいとき
こういったユースケースを想定している場合は、タイプrefでデータを管理しましょう！
データの取り込みとデータタイプの設定
作成したスプレッドシートの情報をappsheetに取り込みます。
それぞれのシートの設定について、カラムのデータタイプの設定が必要です。
以下の設定を参考にして読者の方も検証してみてください。
appsheetでのアプリ開発経験が少ない人はまずはこちらを参考に
TODOリストを例にappsheetの基本について学べます(^^)
【初心者でも簡単】appsheetでTODOリストを作成する方法
見積書シートについて
このシートについては特に設定することはありませんが、appsheetでよく設定する意味を持たないカラムを非表示にする ことをやっておきましょう(^^)
カラム設定のShow?のチェックを外します
続いてもう1つのカラム値：見積書番号のLABEL？にチェックを入れておきましょう。
データテーブルの代表カラム
LABEL設定は、このようなイメージを持ってもらって大丈夫です(^^)
これで見積書シートの設定は完了です。
見積もり詳細シートについて
続いて、見積もり詳細シートの設定です。
見積書シートと同じくIDカラムのShow?のチェックを外します。
Typeをrefにして、Source tableを見積書
Typeをrefにして、Source tableを品目
まずはデータタイプをPriceにします。
次に赤枠で囲まれた部分を設定します。
App formulaに[品目].[価格]と入力
タイプrefに設定したカラムに ” . “（ドット）を繋げ、refの参照テーブルのカラムを引っ付けることでそのカラムの情報を取得することが可能です。
価格カラムに入力したいのは、品目シートにある品目の価格 → [品目] . [価格]
” . “（ドット）は ひらがな “の” を意味すると覚えておきましょう！
このref構文がこの記事で伝えたい構文の1つです。ぜひマスターしてください！
TypeをNumberに変更します。
残る品目シートについては、特にいじらなくて大丈夫です(^^)
見積書明細の作成方法
今回は、以下の流れで見積書に明細を加えていくのがいいかな？と思います。
アプリの作り方の部分も含めて参考にしてください(^^)
UX → Views → View typeのformを選択
この設定は新規でデータを登録させるときの基本設定です。
View nameに分かりやすい名前をつけるのがポイントです(^^)
appsheetでアプリ開発をしたことがある人ならご存知だと思いますが、画面右下の＋ボタンを押しても先ほど作成したform Viewと同じ画面に遷移します。
ここはアプリ開発者、使用者の好みのところなのでどちらでも大丈夫です。
かなり分かりにくいですが、このaddから明細を付けることが可能です。
※これではかなり分かりづらいので、これを解決する方法もあとで説明します(^^)
ステップ3のAddをクリックして品目と個数を入力し、Saveを押します。
これで見積書への明細付与が出来ていますが・・
・・ちょっとアプリとしては使いにくいですよね？
合計金額が見積書にない…
画面右下にある小さなaddボタン（STEP.3）から見積もり明細を追加する必要がある…
このあたりを改善するためにアプリに手を加えていきましょう！
合計金額カラムを作成する
まずはじめに、見積もり明細シートに品目×価格を計算するカラムを用意しましょう。
Add Virtual Columnをクリックします。
App formulaに[価格]*[個数]を入力し、TypeをPriceにします。
合計金額カラムのDecimal digitsとCurrency symbolを変更します。
UXの見積もり詳細_InlineからColumn orderでViewの体裁を整えると
項目として品目、価格、個数、合計金額が表示され明細っぽくなりましたね(^^)
続いて、ref構文を使った合計金額の算出方法を説明します。
見積書シートに、明細の品目の合計金額を計算するカラムを作成します。
Add Virtual Columnをクリックします。
App formulaにSUM([Related 見積もり詳細s][合計金額])と入力します。
Related 〇〇sのカラムとrefを設定したテーブルのカラムと引っ付けることで、親テーブルのKey値と一致する情報をリストとして取得することが可能です。
このref構文がこの記事で伝えたいもう1つの構文です。ぜひマスターしてください！
SUM()関数を代表とする計算関数についてまとめています
appsheetで最低限覚えておきたい計算関数をまとめました(^^)
【永久保存版】appsheetで覚えておくべきMass関数
上記設定で合計金額（合算）カラムを設定し、見積書を閲覧すると・・
見積書に紐ついた明細の合計金額が表示されるようになりました(^^)
[Related 〇〇s]の補足説明
いきなり出てきた[Related 〇〇s]について補足を説明します。
本記事の冒頭でも書きましたが、ref関係を結んだテーブル間では自由にカラム情報を取得することが可能です。
ref関係をテーブル間で持たせると親テーブル（ref設定したカラムがない方のテーブル）に[Related 〇〇s]というVirtual Columnが自動で生成されます。
[Related 〇〇s]と子テーブル（ref設定したカラムがある方のテーブル）のカラムと引っ付けることでその情報を遡ることが出来ます。
簡単な例になりますが・・
1つ目の例として、App formulaに[Related 見積もり詳細s][品目]と入力します。
2つ目の例として、App formulaに[Related 見積もり詳細s][価格]と入力します。
見積書シートにはIDと見積書番号のカラムしかなかったはずですが、ref関係を他のテーブルと紐つけることで様々な情報を取得することが可能です。
見積書に明細を付けるアクションボタンを作成する
もう少し使い勝手が良いアプリにするために、見積書の明細を付けるボタンを作成してみましょう(^^)
アプリに追加したい機能は、appsheetではアクションで実装できます。
ポイントは以下の３点です。
- For a record of this tableは見積書を指定
- Do thisはApp:go to another view within this app
- Targetはlinktoform(“見積もり詳細_form”,”見積もりID”,[ID])と入力
linktoform()関数については別の記事で詳しくまとめています
アプリの導線を良くするための設定を知りたい人はこちら(^^)
【脱初心者！】Deeplink関数の使い方
明細を付けるボタンを押すと・・
先ほど見ていた見積書に明細を追記することが可能になりました！
おすすめの設定
見積書アプリを作るならやっておくといい設定などを最後にまとめましたので、参考にしてください。
この記事で紹介をしている見積書シート（親）と見積もり詳細シート（子）はref関係にあります。
見積書シートの見積もりIDカラムを見てみるとIs a part of?の設定があります。
これにチェック印を入れておきましょう。
参照している親テーブルのデータが削除された時、それに紐ついているデータも合わせて削除されるようになります。
分かりやすい明細を付けるボタンを作成したので、分かりにくいAddボタンを消します。
このAddボタンを消す方法です。
Add(system generated)の設定を選択
見積もり詳細テーブルのAddアクションのProminenceをDo not displayに変更
写真右下にあったaddボタンが消えました(^^)
あくまでView画面なので特に気にしなくても良いような気もしますが・・何となく設定してみました。
見積書_DetailのView設定を開き、Column orderを上図の順に設定にします。
必要な情報を画面上部にまとめることでスッキリViewになりました(^^)
まとめ
以上、appsheetにおけるref機能についてまとめた記事でした。
繰り返しになりますが、データタイプrefを使うときのテーブルのデータ構成は以下の2パターンです。
入力を促す選択肢をまとめたマスターテーブルを用意する（参照データを定期的に更新することが可能）
親テーブルに紐付くデータとして使用（親テーブルのKey値に紐付く情報として記録）
またデータタイプrefを使う場合、覚えておくべきref構文は以下の2つです。
子テーブルで[カラム名].[カラム名]
親テーブルで[カラム名][カラム名]
まずはこの基礎をしっかり覚えておきましょう(^^)
記事内容について何かありましたらページ下にあるコメント欄からコメントをお願いします。
わかりにくかった部分や間違った情報などご指摘いただけると嬉しいです！
勉強お疲れさまでした(^^)
データタイプrefについてまとめた記事です
refでリレーションをもたせたデータをまとめてコピーする方法が学べます(^^)
【楽々設定！】Refで紐ついたデータを一括でコピーする方法
refのカラムに対して、入力補助をする設定が学べます(^^)
【TIPS】データタイプrefに検索機能を付ける方法