今回ご紹介するのは注目のカスタマイズ！

フィールドのいくつかのタブに分けて表示する機能です！

フィールドが多くなってくるとスクロールが大変ですよね・・・

グループフィールドに入れて開閉させることで、ある程度緩和はできますが、まだ使いにくさは残ります。

それをスマートに改善してくれるのがこのタブ表示機能です！

こちらの案件管理アプリ（アプリストアにあります）も・・・

何ということでしょう！この通りフィールドがタブに収納されすっきり。

また、グループフィールドと違い、テーブルやグループフィールドも含めることができます！

では、設定方法をご紹介していきます。

Customineの基本的な事柄は、こちらの「はじめてのカスタマイズ」をご参照ください。

アプリのフォーム

アプリストアの案件管理アプリを少々改造します。

まず、タブを設置するためのスペースフィールドを置きます。

場所はタブ内のフィールドがある場所の上です。

設置したタブがちゃんと入るように十分横に長くしておきましょう。

設置したスペースの要素IDは「tabs」としておきましょう。

また、タブが出来ることによってラベルや罫線が要らなくなるので、削除します。

Customineの設定

タブグループを作る

タブグループとはタブ置き場のようなもので、ここに後からタブを追加していきます。

タブグループを作っただけでは置き場があるだけなので見た目は何も変化しません。

やること

「タブグループを作成する」です。「場所」には先ほど追加したスペースフィールドを選択しましょう。

条件

「追加画面・編集画面・詳細画面のいずれかを表示した時」です。一覧画面では動かないので「一覧画面の鉛筆を押した時は含めない」にしておきます。

タブグループにタブを追加する

タブの設定をしていきます。作成するタブの数だけアクションを用意しましょう。

やること

「タブグループにタブを追加する」です。「タブグループ」は先ほどのタブグループを追加するアクションを指定します。

「ラベル」はタブに表示する名前を入力します。

「タブに入れるフィールド」はそのタブに含めるフィールドをすべて選択します。他のタブに入っているフィールドも選択でき、その場合はどちらのタブを選んでも表示されます。

また、どのタブにも入っていないフィールドは常に表示されたままになります。

条件

「他のアクションの実行が完了した時」で、タブグループ作成の直後に順番に追加されていくように設定します。タブは実行された順番に左から右へ追加されていき、画面表示時には一番左のタブが選択された状態になります。

これで設定は完了です。「kintoneアプリへ登録」し、動作チェックしてみましょう！

備考

今回はラベルが必要なくなったので削除しましたが、ラベルはタブに含めることができない仕様になっています。もし、タブの中に何か文字を表示させたい場合は、「スペースに文字を表示する」をお使いください。

終わりに

いかがでしたでしょうか？

今回のカスタマイズは見た目が大きく変わるので、しっかりカスタマイズされた雰囲気になりましたね！うまく使えばとても便利なアプリになること間違いなしです。

また、「タブを選択する」や「タブを押した時」も用意されているので、さらに細かい動きを設定できます！