タブ表示プラグイン
フォーム内の項目(通常のフィールド・ラベル・スペース・罫線)をタブで出し分けるプラグインです。アプリの フォームに配置した「スペース」フィールドをアンカーとしてタブUIを描画し、タブを切り替えるとそのタブに 割り当てた項目だけが表示されます。項目数が多いフォームを用途別・工程別にすっきり見せたいときに使えます。
ユースケース
項目数が多いフォームを、用途ごとにタブで分けて表示できます。「基本情報」「連絡先」「その他」のようにタブを分けておくと、レコード追加・編集画面がすっきりして入力しやすくなります。タブに割り当てなかった項目は常に表示されたままなので、常に見せておきたい項目(タイトルなど)はどのタブにも入れなければ影響を受けません。
同じ項目を複数のタブに重複して割り当てることもできます。その場合、アクティブなタブにその項目が含まれていれば表示されます(例えば「概要」フィールドを全タブ共通で見せたい場合など)。
スペースフィールドを複数配置すれば、タブグループも複数持てます。画面上部に「入力用タブ」、画面下部に「参照用タブ」のように、独立したタブ切り替えを同じフォーム内に複数設置できます。
セットアップ手順
- アプリのフォーム編集で「スペース」フィールドを1つ配置する(タブボタンが描画される場所になります)。
- プラグインをアプリに追加し、設定画面を開く。
- 「+ タブグループを追加」で①のスペースフィールドを選ぶ。
- 「+ タブを追加」でタブを追加し、ラベル・レコードを開いたとき最初に表示するタブ・そのタブで表示する項目を設定して保存する。
タブに追加しなかった項目は常に表示されたままです。非表示にしたい項目は、必ずいずれかのタブに割り当ててください。
セキュリティレビュー結果サマリ
kintoneセキュアコーディングガイドラインに沿って実装時にチェックしています。特に重要な点は次のとおりです。
- タブラベルなど、アプリ管理者が設定画面で入力する自由記述の文字列をDOMへ描画する際は、
innerHTMLではなくtextContentまたはcreateElement+<template>のみを使用しています。 - REST API・外部サーバー通信は一切行わず、外部ライブラリも使用していません。タブの描画・フィールドの表示/非表示切り替えはすべて
kintone.app.getFormLayout()・kintone.app.record.getSpaceElement()・kintone.app.record.setFieldShown()のJavaScript APIのみで行います。 - 保存前のバリデーションで、アンカーとなるスペースフィールドの未選択・タブ0件・タブラベル未入力を検出し、不正な設定は保存させません。
setFieldShown()によるフィールドの非表示化はUIレベルの制御であり、非表示にした項目の値自体はレコードデータとして保持され続けます。「特定のタブでフィールドを隠す」ことはアクセス権による制御とは異なり、情報を完全に秘匿する機能ではない点にご注意ください。
詳細な確認項目・確認日は下記GitHubのチェックリストに全項目を掲載しています。
設定画面イメージ
API実行数について
このプラグインはREST APIを一切実行しません。フォームのレイアウト取得はkintone.app.getFormLayout()、
フィールドの表示/非表示切り替えはkintone.app.record.setFieldShown()のみで行い、いずれもJavaScript
APIです。API実行数制限に影響することはありません。