ブログ

kintoneのテーブルレイアウトが崩れる...を解決!「テーブル拡張」と「フィールド非表示」プラグインで実現するレイアウト術

kintoneで「テーブル拡張プラグイン」を使って複数行にレイアウトしていると、「レコード編集画面でレイアウトが左にずれて崩れてしまう...」とお困りではありませんか?複数行にわたる複雑なテーブルレイアウトを組んだ際、特定のセルを空白にしたいのに、入力欄が詰まって表示されてしまうことがあります。この記事では、弊社の「テーブル拡張プラグイン」「フィールド非表示プラグイン」を連携させ、このレイアウト崩れを解決するテクニックをご紹介します。
「スペーサー(ダミーフィールド)」を「編集不可」に設定する、少しトリッキーですが非常に効果的な方法です。

設定の概要

ご希望のレイアウトを実現するには、見た目上は空白にしたいセル部分に、レイアウトを保持するためのダミーのフィールド(以下スペーサー)を配置し、そのスペーサーを「フィールド非表示プラグイン」で「編集不可」に設定します。

設定結果(詳細画面・編集画面)

設定を行った場合、以下のような状態となります。
編集画面(画像2枚目)でもレイアウトが崩れず、スペーサー部分はグレーアウト(編集不可)になっていることがわかります。

・詳細画面

テーブル拡張プラグイン設定後の詳細画面。セルが結合され、きれいなレイアウトが保たれている。

・編集画面

テーブル拡張プラグイン設定後の編集画面。スペーサー部分がグレーアウトし編集不可になっているが、レイアウトは崩れていない。

具体的な設定手順

以下に具体的な設定手順をご案内いたします。

1. スペーサー用のフィールドを作成

kintoneアプリのフォーム設定画面で、レイアウトの空白部分を埋めるためのフィールドを、必要な数だけ作成します。
フィールドの種類は「文字列(1行)」などが適しています。
フィールド名は、._ といった目立たない名称とし、フィールドコードに スペーサー1スペーサー2 のように一意のフィールドコードを割り当ててください。

2. 「テーブル拡張プラグイン」の設定

プラグインの設定画面を開き、スペーサー用のフィールドを含めて、実現したい配列イメージ通りにフィールドを配置します。

【配置イメージ】

テーブル拡張プラグインの設定画面。「フィールドの並び替え」で、スペーサー用のフィールド(...と表示されている)を含めてグリッド状に配置している様子。

上記のように配置することで、テーブルの列が固定され、フィールドが左にずれるのを防ぎます。

3. 「フィールド非表示プラグイン」の設定

プラグインの設定画面を開き、手順1で作成したすべてのスペーサー用フィールドをすべて「編集不可」に設定します。

フィールド非表示プラグインの設定画面。スペーサー1〜6の「PC編集画面」にチェックが入り、編集不可に設定されている様子がわかる。

・詳細設定
各スペーサーフィールドの詳細設定で、「非表示ではなく編集不可にする」にチェックを入れます。

フィールド非表示プラグインの詳細設定ポップアップ。「非表示ではなく編集不可にする」にチェックが入っている。

まとめ

以上の設定で、レコード登録・編集画面では入力欄として(ただし編集不可)、詳細画面では空白として表示され、ご希望のレイアウトが実現できます。

少々トリッキーですが、ぜひお試しください。

 

ブログ一覧に戻る