カスタマインではタブグループやタブを作成してフィールド表示を制御する事ができますが、タブの中にタブを入れて、複数段の階層的なタブを作成する事もできます。
この記事では次の画像のように、階層的なタブを作成する方法をお伝えします。
なお、カスタマインにてタブ機能を使った事がない方は、まずは次の記事を試して頂くのがおすすめです。
※この方法は タブグループにタブを追加する の制限事項 に引っかからず、階層的なタブを作る事が出来る方法になります。
アプリの準備
アプリは次のように準備してください。
具体的な各フィールドの設定は次の通りです。
※フィールド名とフィールドコードは同じものを指定します
カスタマイズ
ここからは、具体的なカスタマイズを行っていきましょう。
一階層目のタブグループを作る
まず、一階層目のタブグループを作成します。
やること「タブグループを作成する」、条件「追加画面・編集画面・詳細画面のいずれかを表示した時」を使います。
一階層目のタブをタブグループに追加する
続いて、一階層目のタブをタブグループに追加します。
やること「タブグループにタブを追加する」、条件「他のアクションの実行が完了した時」を使います。
この時、タブに入れるフィールドに何かフィールドを指定する必要がありますが、このタブグループを作成しているスペースフィールド(tab_level1)だけを入れるようにします。
二階層目のタブグループを作る
二階層目のタブグループを作ります。
やること「タブグループを作成する」、条件「他のアクションの実行が完了した時」を使います。
二階層目(最下層)のタブをタブグループに追加する
続いて、それぞれのタブをタブグループに追加します。
やること「タブグループにタブを追加する」、条件「他のアクションの実行が完了した時」を使います。
こちらはアクション３，４と違い、それぞれのタブで、タブに入れるフィールドに対し設定を行います。
初期表示時の表示制御
アクション８までで、タブグループとタブの設定がすべて終わったので、ここからは画面での表示制御を設定します。
初期表示の制御としては、まずタブ(Group1)を初期選択するようにします。
やること「タブを選択する」、条件「他のアクションの実行が完了した時」を使います。
続いて、タブ(2-1、2-2)を非表示にするようにします。
やること「タブを非表示にする」、条件「他のアクションの実行が完了した時」を使います。
第一階層のタブをクリックした時の表示制御
最後に、タブをクリックした時の表示制御を設定していきます。
まずは、Group1をクリックした時の表示制御を設定します。
1つ目のアクションではやること「タブを再表示する」、条件「タブを押した時」を使って、Group1をクリックした時に、そこに含まれる第二階層のタブを再表示しています。
2つ目のアクションでは、やること「タブを非表示にする」、条件「他のアクションの実行が完了した時」を使って、Group1に含まれないタブを非表示にしています。
続いて、Group2をクリックした時の表示制御を設定します(内容としては上のGroup1の処理と同様です)。
1つ目のアクションではやること「タブを再表示する」、条件「タブを押した時」を使って、Group2をクリックした時に、そこに含まれる第二階層のタブを再表示しています。
2つ目のアクションでは、やること「タブを非表示にする」、条件「他のアクションの実行が完了した時」を使って、Group2に含まれないタブを非表示にしています。
これで、一連のカスタマイズ設定は終了です。
注意事項
タブで表示制御するフィールドについては、すべてのフィールドが１つのタブグループの中に入るように指定してください。
タブグループに含まれないフィールドが存在すると、そのフィールドはタブの選択状態にかかわらず常に表示されるため、想定と違う動きとなっているように見えることがあります。
また タブグループにタブを追加する の制限事項 にも記載がありますが、すでにタブに入れたフィールドを、別のタブにも入れようとすると、想定外の動作となります。
タブで表示制御するフィールドについては、１つのフィールドが１つのタブだけに含まれるように設定してください。
最終的なカスタマイズ
最終的なカスタマイズとしては次のようになります。
また、アクショングラフは次のようになります。
アクショングラフで見た時に、アクション1からアクション10までが、1本のアクションのフローで順に動いているのがポイントです。
※タブグループ、タブの設定が終わった後に表示制御を行うようにします。
おわりに
この記事では、タブの中にタブをいれて階層的なタブを実現する方法の例として、2段階のタブを例にカスタマイズをご紹介しました。
タブ機能を使って、あなたのkintoneアプリをもっと使いやすいようにカスタマイズしてみてください！
また、ご不明点等ございましたら、チャットにてご質問ください！
Customineドキュメントやサポートページも、ぜひご活用ください。