入力項目が多いフォームを見やすくするコツ

はじめに

ごきげんよう、百合宮桜（Miyu）です(*'▽')

編集フォームを利用した入力画面では項目が10個くらいだと、このようにスクロールが必要になります。

スクロールは無しにしたい……でも1つの画面に収めたい！！ 詰めれば入りそうだなぁ～と考えあぐねた結果、ラベルとテキスト入力やドロップダウンを組み合わせたフォームもどきを作ることがあります。

このフォームもどきは以下4点のデメリットがあります。

• コントロールが多いので、アプリが重たくなる
• コントロールの名称が label1 のようになるので、分かりやすい名称に変更する手間がかかる
• 入力項目が増減するたびにコントロールを調整する手間がかかる
• データの作成や更新が Patch 関数なので理解するのに時間がかかる

これらを解消するために編集フォームを利用した、スクロール不要な入力画面の作り方を解説します。

概要

変数とモダンコントロールのタブを利用して、編集フォームの表示・非表示をコントロールします。

貸出者のタブを選択すると、貸出者の情報を入力する項目が表示されます。

このように画面に表示する項目を調整することで、スクロールを不要にすることができます。
また、入力の進捗状況も分かりやすくなります。

見やすいフォームの作り方

前提条件

モダンコントロールを利用しますので、設定 > 更新 > モダンコントロールとモダンテーマのトグルを オン にします。

タブ一覧があることを確認します。

作り方

1. タブ一覧を画面に配置します

   

2. タブ一覧の Items プロパティに以下の式を入力します

   [
       {id:1,Value:"日時"},
       {id:2,Value:"貸出者"},
       {id:3,Value:"貸出本"}
   ]
   

   タブに表示したい情報をテーブル（アレイ）型で入力します。
   ["日時","貸出者","貸出本"] のようにタブに表示する情報だけでも OK ですが、今回は入力項目の切り替えに数値を利用したいので id を追加しています。

   :

3. タブ一覧の OnSelect プロパティに以下の式を入力します

   Switch(
       Self.Selected.id,
       1,
       UpdateContext(
           {
               _locVisible:
               {
                   Step1Visible:true,
                   Step2Visible:false,
                   Step3Visible:false
               }
           }
       ),
       2,
       UpdateContext(
           {
               _locVisible:
               {
                   Step1Visible:false,
                   Step2Visible:true,
                   Step3Visible:false
               }
           }
       ),
       3,
       UpdateContext(
           {
               _locVisible:
               {
                   Step1Visible:false,
                   Step2Visible:false,
                   Step3Visible:true
               }
           }
       )
   )
   

   Switch 関数で日時・貸出者・貸出本のそれぞれを選択した時に変数の値を更新するようにしています。変数にはオブジェクトを入れることで1つの変数で、3つの切替を可能にしています。id 値で切り替えるのでタブ一覧に表示する名称（Value）が変わっても、コードを変更する必要がありません。

   :

4. 入力項目の DataCard の Visible プロパティに変数を入力します

   
   

5. 編集フォームがある画面の OnVisible プロパティに以下を入力します

   UpdateContext(
       {
           _locVisible:
           {
               Step1Visible:true,
               Step2Visible:false,
               Step3Visible:false
           }
       }
   )
   

   この式を OnVisible プロパティに入れることで初期値が設定できます。

   :

終わりに

いかがでしたか？
タブ一覧を利用すると、フォームの入力制御を簡単にできて、とてもすっきりした入力しやすいフォームを作ることができます。
この形なら

• タブで項目をグルーピングすることで関連情報だけをまとめて表示できる👍
• 入力項目がタブで分割されるのでユーザーの認知負荷を減らし、入力ミスも減少👍
• 一度に入力する項目が少ないので、入力への心理ハードルも減少👍
• 入力項目の増減があった時もフィールドから簡単にメンテナンス可能👍

とメリットも多いです。
ぜひチャレンジしてみてくださいね！！

参考文献