Ribbit works
記事のトップ画像

表示するフィールドを制御するタブを実装するプラグインを開発しました【無料公開】

KintoneTypeScript

last modified date2022-2-15

publish date2022-2-14

kintoneはアプリの入力フォームに、フィールドを好きな位置に配置することができます。

とはいえ、フィールドを追加する際、多くの場合は縦方向に配置することが多いんじゃないでしょうか。

基本的なフォーム設計においても、横方向にコンポーネントが多く連なるレイアウトは推奨されません。

そのためアプリのフィールド数が増えてくると、必然的に縦スクロールが多く必要なフォームになっていくと思います。

そうなると当然、目的のフィールドがどこにあるのか見つけるのが難しくなります。

今回はスクロールに追従し、フィールドの表示・非表示を制御するタブを実装するプラグインを開発しましたのでご紹介します。

ソースコードは全てGitHubに公開しており、無料で利用できます。

当サイトのプラグイン一覧の、「タブ表示プラグイン」からダウンロード可能です。

Githubのリポジトリはこちら

操作デモ

レコード詳細画面

kintone-plugin-tab-detail

レコード編集画面

kintone-plugin-tab-edit

ダウンロード

当サイトのプラグイン一覧の、「タブ表示プラグイン」からダウンロード可能です。

Githubのリポジトリはこちら

余談

なぜ垂直方向にしたのか

冒頭で紹介した、フォームのどの位置でもフィールド制御ができるように、という思いはもちろんありますが、開発者側の都合を言えば、フィールドの表示・非表示を制御するタブを実装しようと思うと、UI上の不都合が生じます。

それは、タブを設置する位置と、制御できるフィールドの位置が連動していなければならないということです。タブを設置するということは切り替え対象となるエリアが存在し、対象フィールドはそのエリア内に存在しなければなりません。

例えば、タブをレコード全体の下部に設置した場合、制御するフィールドはその更に下部である必要があります。

この関係上、制御対象とするフィールドが何なのか判断できないため、既存のプラグインはグループを対象とするなど、制御対象を制限する必要がありました。

僕のプラグインはその判定を放棄して、全フィールドを対象とするため垂直方向にしました。