kintoneで「テーブル拡張プラグイン」を使って複数行にレイアウトしていると、「レコード編集画面でレイアウトが左にずれて崩れてしまう...」とお困りではありませんか?複数行にわたる複雑なテーブルレイアウトを組んだ際、特定のセルを空白にしたいのに、入力欄が詰まって表示されてしまうことがあります。この記事では、弊社の「テーブル拡張プラグイン」と「フィールド非表示プラグイン」を連携させ、このレイアウト崩れを解決するテクニックをご紹介します。
「スペーサー(ダミーフィールド)」を「編集不可」に設定する、少しトリッキーですが非常に効果的な方法です。
設定の概要¶
ご希望のレイアウトを実現するには、見た目上は空白にしたいセル部分に、レイアウトを保持するためのダミーのフィールド(以下スペーサー)を配置し、そのスペーサーを「フィールド非表示プラグイン」で「編集不可」に設定します。
設定結果(詳細画面・編集画面)¶
設定を行った場合、以下のような状態となります。
編集画面(画像2枚目)でもレイアウトが崩れず、スペーサー部分はグレーアウト(編集不可)になっていることがわかります。
・詳細画面
・編集画面
具体的な設定手順¶
以下に具体的な設定手順をご案内いたします。
1. スペーサー用のフィールドを作成¶
kintoneアプリのフォーム設定画面で、レイアウトの空白部分を埋めるためのフィールドを、必要な数だけ作成します。
フィールドの種類は「文字列(1行)」などが適しています。
フィールド名は、. や _ といった目立たない名称とし、フィールドコードに スペーサー1、スペーサー2 のように一意のフィールドコードを割り当ててください。
2. 「テーブル拡張プラグイン」の設定¶
プラグインの設定画面を開き、スペーサー用のフィールドを含めて、実現したい配列イメージ通りにフィールドを配置します。
【配置イメージ】
上記のように配置することで、テーブルの列が固定され、フィールドが左にずれるのを防ぎます。
3. 「フィールド非表示プラグイン」の設定¶
プラグインの設定画面を開き、手順1で作成したすべてのスペーサー用フィールドをすべて「編集不可」に設定します。
・詳細設定
各スペーサーフィールドの詳細設定で、「非表示ではなく編集不可にする」にチェックを入れます。
まとめ¶
以上の設定で、レコード登録・編集画面では入力欄として(ただし編集不可)、詳細画面では空白として表示され、ご希望のレイアウトが実現できます。
少々トリッキーですが、ぜひお試しください。