今回ご紹介するのは、フィールドのいくつかのタブに分けて表示する機能です。

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

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

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

kintoneアプリストアの 案件管理アプリ もカスタマイズなしだと次のような表示となりますが……

なんということでしょう！

カスタマインを使うと、この通りフィールドがタブに収納されすっきり！

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

次より、具体的な設定方法をご紹介していきます。

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

アプリの準備

今回は、kintoneアプリストアの 案件管理アプリ を用います。

その上で次のように修正を行ってください。

●スペースフィールドを追加し、要素IDを設定する

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

スペースフィールドを置く場所はタブ内のフィールドがある場所の上で、設置したタブがちゃんと入るように横に長くし、縦の幅は限界まで狭くしておきます。

併せて、スペースフィールドの要素IDを「tabs」とします。

●ラベル３つと罫線２つを削除する

タブ表示を行うようになると、今回のケースではラベルフィールド(３つ)や罫線フィールド(２つ)が不要となるため、削除します。

カスタマイズ

タブを作成する時には、まずスペースフィールドにタブグループ(タブを置く領域)を作成し、その後タブグループの中にタブを必要な数だけ設定する　という手順でカスタマイズします。

タブグループを作る

まず、タブグループを作成します。

やること「タブグループを作成する」、条件「追加画面・編集画面・詳細画面のいずれかを表示した時」を用います。また、「場所」に先ほど追加したスペースフィールド（tabs）を設定します。

※スペースフィールドへの要素IDの設定が漏れている場合は、「場所」の選択肢に出てきませんので、注意してください。

また、条件の「一覧画面の鉛筆を押した時」は、このカスタマイズは一覧画面では動かないので「一覧画面の鉛筆を押した時は含めない」にしておきます。

なおタブグループを作っただけだと、タブを置く領域を設定しただけなので、見た目は何も変化しません。

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

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

やること「タブグループにタブを追加する」、条件「他のアクションの実行が完了した時」を用います。

やることの「タブグループ」には先ほどのタブグループを追加したアクションを指定し、「ラベル」にはタブに表示する名前を入力します。

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

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

具体的には、「ラベル」に「顧客情報」を指定したアクションには「タブに入れるフィールド」に「会社名」～「メールアドレス」のフィールドを指定します。

同様に「ラベル」に「案件情報」を指定したアクションには「案件担当者名」～「小計」を、「ラベル」に「活動履歴」を指定したアクションには「活動履歴」を指定します。

条件の「アクション」はタブを表示してほしい順に実行されるように設定します。

タブは実行された順番に左から右へ追加されていき、画面表示時には一番左のタブが選択された状態になります。

次にアクショングラフを示しますので、併せてご確認下さい。

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

注意点：ラベルフィールド、罫線フィールドについて

ラベルフィールドと罫線フィールドは「タブの中に入れるフィールド」に設定することができない仕様になっています。

そのため、もしタブの中に何か文字を表示させたい場合は、代替案として、ラベルフィールドの代わりにスペースフィールドを設定していただき、そのスペースフィールドに対して「スペースに文字を表示する」で文字を表示させるようにしてください。

参考

ラベルをタブに入れることができないのですが、どうすればいいですか？

注意点：位置調整でスペースフィールドを用いる場合

タブに設定するパラメーター「タブに入れるフィールド」に指定していないフィールドは全てのタブに表示されるため、位置調整のためのスペースフィールドをタブに追加していない場合は、関係のないタブで不要なスペースが表示されてしまいます。

このため、位置調整で使用しているスペースにも要素IDを登録し、必要なタブにのみスペースを追加しておいてください。

参考

タブ表示をした時にスペースができてしまいますが、どうすればよいですか？

終わりに

今回はタブ表示のカスタマイズについてご紹介しました。

タブ表示のカスタマイズは見た目が大きく変わり、カスタマイズされた！　という見た目になります。

また、一度に表示される情報が絞り込めるので、うまく使えばとても便利なアプリになること間違いなしです。

また、やること「タブを選択する」や条件「タブを押した時」という機能もあるので、さらに細かい動きを設定する事もできます。ぜひ、これらもお試しください！

ご不明点等ございましたら、チャットにてご質問ください！

Customineドキュメントやサポートページも、ぜひご活用ください。