😊

【 AppSheet 応用】Form(フォームビュー)をもっと入力しやすく!【 View 】

2025/02/28に公開


こんにちは。吉積情報(株)アプリケーション開発部のイイズナです。

今回はAppSheet 応用編「Form」の解説です。
応用ということで、Form(フォームビュー) の細かい機能の使い方などをお話しいたします。
「基礎についてまだ不安がある」という方は、以下の記事もあわせてご確認いただけるといいかなと思います。
▶ 基礎編はこちらから!

Form ビューは入力画面として、アプリの中で日常的に使用する機能の一つです。
場面に合わせて適切な設定をすれば AppSheet の魅力である、”シンプルで使いやすい UI(ユーザーインターフェース)”を実現することができます。

View Options(ビューオプションズ)

主な設定はこのメニューで行います。
実際に、開発画面右側に表示されるモバイル画面などを見ながら、入力してみながら、それぞれのアプリや利用場面で使いやすい機能を模索していきましょう。
※開発画面のプレビュー内からもデータ入力が可能です。

プレビューについて

右に表示されるプレビュー画面を見ながら色々設定を変えて試してみましょう。

Row key(ローキー)

手動作成した form に存在します。
これは SYSTEM GENERATED で自動生成される Form との大きな違いです。

ビューのデータソースに指定したテーブルのキーカラムについて、既に存在するカラムを利用して編集するように定義する機能です。
言い換えると「この定義に沿って既に存在するデータの編集をする」ことができます。

さらにわかりやすくいうと、編集対象の行を指定する機能です。

フォームビューでは、データソースに指定したテーブルのうちのある一行を選択して編集することができます。
ですが Row key を指定することで、特定の1つの行のみを常に選択した状態にして編集することができます。

実例としてはユーザーのメールアドレスを取得して、そのユーザーのプロフィールのみを編集できるようメールアドレスをキーにして行指定するなどができるので、ユーザーに「本日の予定」や、「体調が優れない」などの更新頻度が比較的多いちょっとしたプロフィールやステータスを入力させたりなどの画面を用意している場合の編集に便利です。
このように、編集対象の行を変えたくない場合などに使うとよさそうです。

Page style(ページスタイル)

  • Automatic:自動設定。Appsheet が自動で設定をしてくれます。
  • Simple:標準的な入力フォームです。
  • Page Count:ページ表示あり。SHOW タイプと組み合わせてページ分けができます。
  • Tabs:タブ表示あり。SHOW タイプと組み合わせてページ分けができます。
    ▶ 詳しくはこちらの記事へ

    ▼ イメージ

    Page Count、Tabs では上部にタブ・ページ切り替えのボタンが設置されます。

Form style(フォームスタイル)

  • Automatic:自動設定。AppSheet が自動で設定をしてくれます。
  • Default:デフォルトの設定。
  • Side-by-side:項目名とデータ入力枠が横並びになります。

    ▼ イメージ

    項目名と入力枠の位置に注目してください。

Column order(カラムオーダー)

とても頻繁に使う機能です。
カラムを表示・非表示にしたり、順序を並び替えたりします。
こちらで詳しくご説明していますので、ぜひご覧ください。
▶ Column order についての解説

Save / cancel position(セーブ/キャンセル ポジション)

モバイル・タブレット表示の際の、保存・キャンセルのボタン位置の設定。
ページ上部か下部かで選べます。

Max. nested rows(マックス ネステッドローズ)

Column 設定で Ref で指定した参照テーブル(親データ)のデータを表示する際の、行数です。
これを利用したい時は、Ref 設定をする際に「Is a part of?」にチェックを入れてください。
デフォルト値(行数)は 5 ですが、3 くらいが見やすいかもしれません。

「Is a pard of?」の設定で親データの Form 入力時、それに紐づく子データも一緒に編集できるようになりますが、主にその際に表示される子データの行数を変更できます。

▼「Max. nested rows」を 3 に設定した Form

子データ(在庫データ)は 4 行なのですが、表示は 3 行になりました

「Is a part of?」

例は「商品」データ(親)と「在庫」データ(子)です。
「在庫」データの「商品」カラムで Ref と「Is a part of?」を設定しています。

Auto save(オートセーブ)

Form 内の最後の項目を入力後、すぐに自動的に保存が実行されるようになります。

Auto re-open(オート リオープン)

Form を保存すると、新規入力 Form が立ち上がります。
Detail(確認画面)を介さず次々に連続して入力を行いたい場合などに有用です。

Finish view(フィニッシュビュー)

Form 入力をし終わった後にどのビューへ遷移するかを指定できます。
入力後、入力した内容を詳細画面(Detail)で確認したい場合や、入力後に別のテーブルを表示させたい場合に使うとよいでしょう。

Display(ディスプレイ)

Icon(アイコン)

アプリのメニューに表示されるビューのアイコンです。
ユーザーに関するビューは「person」、注意してみてほしいビューは「alert」など、用途に応じたアイコンを設定しておくと見やすくなりますね。

Display name(ディスプレイネーム)

開発画面上の名前と異なる名称をアプリ上で表示したい場合に使います。
例えば、開発画面には「商品在庫」とつけてある場合、ユーザー向けには「商品在庫入力画面」などとしておけばよりわかりやすいでしょう。

Show if(ショウ イフ)

条件式を入力することができます。
例えば、”データ入力を許されたユーザーのみ”にビューを表示したい場合などに、ユーザーのメールアドレスを取得してビューを表示するか否かの判定をするような条件式を設定したりします。

Behavior(ビヘイビア)

Event Actions(イベントアクションズ)

利用条件を満たしている場合は、Action 後の遷移先のビューがプルダウンやイベント名が表示されます。
ビューの種別ごとに定められたイベントに対応して、アクションを呼び出すように設定できます。

Form ビューの場合、ビヘイビアのイベント名は「Form Saved」で、利用条件はこのテーブルに設置した Action であること、 Form での新規入力や編集時に ”保存する” アクションが発生することです。
この ”保存する” アクションをトリガーとして、プルダウンで指定アクションが動作します。

App link(アップリンク)

LINKTOVIEW("商品_Form") .... or ... "https://www.appsheet.com/start/xxxxxxxx_Form"
この Form ビューの URL です。
他のビューから遷移する場合などに指定する宛先になります。
アプリ内でのページ遷移で宛先指定する場合は、URL でも「LINKTOVIEW」を使ったビュー名指定でもどちらでも可能です。

Documentation(ドキュメンテーション)

Descriptive comment(ディスクリプティブコメント)
開発画面上のみに表示される、開発メモなどを残しておくのに適した場所です。
どのような意図でビューを作成したのかや、メンテナンス時の注意点などを残しておくとよいでしょう。

Form ビューを特定の人にしか使わせたくない場合は?

Form ビューのメニュー(form ビューをメニューにしている場合)、もしくはビューの Edit ボタン(メインビューを介して Form ビューを表示する場合)を非表示にする条件式を設定すれば対象ユーザーのみにビューを表示することができます。

Form ビューは Display > Show if で、Edit ボタンは Action メニューの Edit ボタンの開発画面の Behavior > Only if this condition is true から条件式を設定できます。

おわりに

いかがでしたか。
意外と使っていない使っていない機能もあったのではないでしょうか。
アプリを実用的にするには用途に合わせて機能を設定できるよう、細かい部分もしっかり押さえておきたいですね。

「そんな時間ない!」「直接質問したい!」という方などに向けて、弊社 吉積情報(株)では AppSheet トレーニングやサポートサービスも提供しております。
お困りのことがございましたら、AppSheet を利用するのに必要な Google Workspace の知見も豊富な弊社にご相談ください。
https://www.yoshidumi.co.jp/collaboration-lab
無料の Webセミナーも随時開催しておりますので、ご興味があればいらしてくださいね。
ありがとうございました。それではまた次回お会いしましょう。

サンプルアプリのご案内

※いただいたコメントは全て拝見させていただきますが、全てのご質問にはお答えできないことがございますので、あらかじめご了承くださいませ。

吉積情報

Discussion