テーブルフィールドにスタイルを設定する

固定リンクがコピーされました

テーブルフィールドにスタイルを設定する

固定リンクがコピーされました

現在開いているレコードのテーブルフィールドにスタイルを設定します。

利用するには、検討中の新機能の「JavaScript API：テーブルの行へのID付与、テーブル操作時のイベント発生、およびテーブル操作用APIを追加する機能」を有効にしてください。

このAPIは非同期なAPIです。
同期的に処理したい場合は、次のページを参照してください。

関数

固定リンクがコピーされました

PC

kintone.app.record.setTableFieldStyle(fieldCode, config)

モバイル

kintone.mobile.app.record.setTableFieldStyle(fieldCode, config)

引数

固定リンクがコピーされました

引数名	型	必須	説明
fieldCode	文字列	必須	スタイルを設定するテーブルのフィールドコード
config	オブジェクト／文字列	必須	スタイルの設定オブジェクトを指定した場合は、その設定に沿ってスタイルが適用されます。 `DEFAULT`を指定した場合は、すべてのスタイルの適用が解除されます。
config.header	配列／文字列	省略可	ヘッダーに適用するスタイルの設定配列を指定した場合は、その設定に沿ってスタイルが適用されます。 `DEFAULT`を指定した場合は、header配下のスタイルの適用が解除されます。
config.header[].columnType	文字列	省略可	スタイルを適用する列のタイプ次の値を指定できます。 `FIELD`：フィールド列 `CUSTOM`：カスタマイズ列 `ACTION`：操作UI列指定しなかった場合は`FIELD`として扱います。
config.header[].column	文字列	条件必須	スタイルを適用する列の指定 `config.header[]`を指定する場合は必須です。 `columnType`が`FIELD`の場合は、テーブル内のフィールドのフィールドコードを指定します。 `columnType`が`CUSTOM`の場合は、カスタマイズ列の`columnCode`を指定します。 `columnType`が`ACTION`の場合は、`ROW_ACTIONS`（行の追加ボタンと削除ボタンの列）を指定します。
config.header[].content	オブジェクト／文字列	省略可	ヘッダーのコンテンツに適用するスタイルの設定オブジェクトを指定した場合は、その設定に沿ってスタイルが適用されます。 `DEFAULT`を指定した場合は、content配下のスタイルの適用が解除されます。
config.header[].content.color	文字列	省略可	ヘッダーのコンテンツの文字色 `#ffffff`のような16進数で6桁のカラーコードを指定します。
config.header[].content.fontWeight	文字列	省略可	ヘッダーのコンテンツのフォントの太さ次の値を指定できます。 `normal` `bold`
config.header[].content.textDecoration	文字列	省略可	ヘッダーのコンテンツの下線や取り消し線などの装飾次の値を指定できます。 `none` `underline` `line-through`
config.header[].background	オブジェクト／文字列	省略可	ヘッダーの背景に適用するスタイルの設定オブジェクトを指定した場合は、その設定に沿ってスタイルが適用されます。 `DEFAULT`を指定した場合は、background配下のスタイルの適用が解除されます。
config.header[].background.backgroundColor	文字列	省略可	ヘッダーの背景の背景色 `#ffffff`のような16進数で6桁のカラーコードを指定します。
config.body	配列／文字列	省略可	各行のセルに適用するスタイルの設定配列を指定した場合は、その設定に沿ってスタイルが適用されます。 `DEFAULT`を指定した場合は、body配下のスタイルの適用が解除されます。
config.body[].rowId	文字列	条件必須	スタイルを適用する行の`id` `config.body[]`を指定する場合は必須です。
config.body[].style	配列／文字列	省略可	行に適用するスタイルの設定配列を指定した場合は、その設定に沿ってスタイルが適用されます。 `DEFAULT`を指定した場合は、`rowId`で指定した行のスタイルの適用が解除されます。
config.body[].style[].columnType	文字列	省略可	スタイルを適用する列のタイプ次の値を指定できます。 `FIELD`：フィールド列 `CUSTOM`：カスタマイズ列 `ACTION`：操作UI列指定しなかった場合は`FIELD`として扱います。
config.body[].style[].column	文字列	条件必須	スタイルを適用する列の指定 `config.body[].style[]`を指定する場合は必須です。 `columnType`が`FIELD`の場合は、テーブル内のフィールドのフィールドコードを指定します。 `columnType`が`CUSTOM`の場合は、カスタマイズ列の`columnCode`を指定します。 `columnType`が`ACTION`の場合は、`ROW_ACTIONS`（行の追加ボタンと削除ボタンの列）を指定します。
config.body[].style[].content	オブジェクト／文字列	省略可	セルのコンテンツに適用するスタイルの設定オブジェクトを指定した場合は、その設定に沿ってスタイルが適用されます。 `DEFAULT`を指定した場合は、content配下のスタイルの適用が解除されます。
config.body[].style[].content.backgroundColor	文字列	省略可	セルのコンテンツの背景色 `#ffffff`のような16進数で6桁のカラーコードを指定します。レコード追加画面とレコード編集画面でのみ適用されます。
config.body[].style[].content.color	文字列	省略可	セルのコンテンツの文字色 `#ffffff`のような16進数で6桁のカラーコードを指定します。
config.body[].style[].content.fontWeight	文字列	省略可	セルのコンテンツのフォントの太さ次の値を指定できます。 `normal` `bold`
config.body[].style[].content.textDecoration	文字列	省略可	セルのコンテンツの下線や取り消し線などの装飾次の値を指定できます。 `none` `underline` `line-through`
config.body[].style[].content.borderColor	文字列	省略可	セルのコンテンツの境界線の色 `#ffffff`のような16進数で6桁のカラーコードを指定します。レコード追加画面とレコード編集画面でのみ適用されます。
config.body[].style[].background	オブジェクト／文字列	省略可	セルの背景に適用するスタイルの設定オブジェクトを指定した場合は、その設定に沿ってスタイルが適用されます。 `DEFAULT`を指定した場合は、background配下のスタイルの適用が解除されます。
config.body[].style[].background.backgroundColor	文字列	省略可	セルの背景の背景色 `#ffffff`のような16進数で6桁のカラーコードを指定します。

各プロパティにDEFAULTという文字列を設定することで個別にスタイルの適用を解除できます。
指定したプロパティだけが更新され、省略したプロパティは変わりません。

戻り値

固定リンクがコピーされました

戻り値はPromiseオブジェクトです。
Promiseオブジェクトの解決時に値は返りません。

利用できる画面

固定リンクがコピーされました

PC

レコード追加画面
レコード編集画面
レコード詳細画面
レコード印刷画面

モバイル

レコード追加画面
レコード編集画面
レコード詳細画面

サンプルコード

固定リンクがコピーされました

ヘッダーと行にスタイルを設定する

次のコードは、レコード詳細画面を表示したときに、テーブル（フィールドコード：テーブル）にスタイルを設定する例です。
数値（フィールドコード：数値_0）の列のヘッダーを強調し、数値が100以上の行では数値のセルに色を付けます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35


kintone.events.on('app.record.detail.show', (event) => {
  const rows = event.record['テーブル'].value;
  const config = {
    header: [
      {
        column: '数値_0',
        content: {
          fontWeight: 'bold',
        },
        background: {
          backgroundColor: '#e3f2fd',
        },
      },
    ],
    body: rows
      .filter((row) => Number(row.value['数値_0'].value) >= 100)
      .map((row) => ({
        rowId: row.id,
        style: [
          {
            column: '数値_0',
            content: {
              color: '#d32f2f',
              fontWeight: 'bold',
            },
            background: {
              backgroundColor: '#ffebee',
            },
          },
        ],
      })),
  };
  kintone.app.record.setTableFieldStyle('テーブル', config);
  return event;
});

カスタマイズ列と操作UI列のヘッダーにスタイルを設定し、すべてのスタイルを解除する

次のコードは、レコード編集画面で、作成したカスタマイズ列のヘッダーと、行の追加ボタンと削除ボタンの列のヘッダーにスタイルを設定する例です。
その後、テーブルのすべてのスタイルを解除します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


const column = await kintone.app.record.createCustomTableColumn('テーブル', {
  header: {label: '操作'},
});
await kintone.app.record.setTableFieldStyle('テーブル', {
  header: [
    {
      columnType: 'CUSTOM',
      column: column.columnCode,
      content: {
        fontWeight: 'bold',
      },
      background: {
        backgroundColor: '#fff3e0',
      },
    },
    {
      columnType: 'ACTION',
      column: 'ROW_ACTIONS',
      background: {
        backgroundColor: '#eeeeee',
      },
    },
  ],
});
await kintone.app.record.setTableFieldStyle('テーブル', 'DEFAULT');

注意事項

固定リンクがコピーされました

モバイル版では、headerのスタイルは、各行の項目名のラベルに適用されます。
装飾設定の組み合わせにより、軽微な表示崩れを起こす場合があります。
今後製品のアップデートにより、各プロパティに対応する細かな装飾範囲などは変更される場合があります。

制限事項

固定リンクがコピーされました

次のフィールドおよび列はconfig.body[].style[].contentの設定が非対応です。

レコード追加／編集画面
- リッチエディター
- 計算
- 「自動計算する」を有効にした、文字列（1行）
- 操作UI列
- カスタマイズ列
レコード詳細／印刷画面
- リッチエディター
- 操作UI列
- カスタマイズ列

次のプロパティは画面により一部の設定が見た目に反映されません。

config.body[].style[].content.backgroundColorおよびconfig.body[].style[].content.borderColorはレコード追加／編集画面でのみ反映されます。
操作UI列へのconfig.header[].contentの設定は反映されません。
操作UI列へのconfig.header[]の設定はモバイルでは反映されません。

kintone API

kintone APIドキュメント

テーブルフィールドにスタイルを設定する

目次

警告

フィードバックの例

テーブルフィールドにスタイルを設定する

関数

PC

モバイル

引数

戻り値

利用できる画面

PC

モバイル

サンプルコード

ヘッダーと行にスタイルを設定する

カスタマイズ列と操作UI列のヘッダーにスタイルを設定し、すべてのスタイルを解除する

注意事項

制限事項

公式コミュニティ

この記事に関連する過去の質問