レコードの一覧（表形式）のスタイルの設定

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

レコードの一覧（表形式）のスタイルの設定

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

現在開いているアプリのレコードの一覧（表形式）にスタイルを設定します。

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

関数

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

PC

kintone.app.setRecordListStyle(config)

モバイル

kintone.mobile.app.setRecordListStyle(config)

引数

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

パラメーター名	型	必須	説明
config	オブジェクト／文字列	必須	スタイルの設定オブジェクトを指定した場合は、その設定に沿ってスタイルが適用されます。 `DEFAULT`を指定した場合は、すべてのスタイルの適用が解除されます。
config.header	配列／文字列	省略可	ヘッダー行に適用するスタイルの設定配列を指定した場合は、その設定に沿ってスタイルが適用されます。 `DEFAULT`を指定した場合は、header配下のスタイルの適用が解除されます。
config.header[].columnType	文字列	省略可	スタイルを適用する列のタイプ次の値を指定できます。 `FIELD`：フィールド列 `ACTION`：操作UI列指定しなかった場合は`FIELD`として扱います。
config.header[].column	文字列	省略可	スタイルを適用する列の指定 `columnType`が`FIELD`の場合は、フィールドコードを指定します。 `columnType`が`ACTION`の場合は、次のいずれかを指定します。 `OPEN_DETAIL`：レコード詳細画面を表示するボタン列 `RECORD_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[].recordId	文字列	省略可	スタイルを適用するレコードのレコードID
config.body[].style	配列／文字列	省略可	レコードに適用するスタイルの設定配列を指定した場合は、その設定に沿ってスタイルが適用されます。 `DEFAULT`を指定した場合は、`recordId`で指定した行のスタイルの適用が解除されます。
config.body[].style[].columnType	文字列	省略可	スタイルを適用する列のタイプ次の値を指定できます。 `FIELD`：フィールド列 `ACTION`：操作UI列指定しなかった場合は`FIELD`として扱います。
config.body[].style[].column	文字列	省略可	スタイルを適用する列の指定 `columnType`が`FIELD`の場合は、フィールドコードを指定します。 `columnType`が`ACTION`の場合は、次のいずれかを指定します。 `OPEN_DETAIL`：レコード詳細画面を表示するボタン列 `RECORD_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オブジェクトの解決時に値は返りません。

サンプルコード

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

 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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69


const config = {
  header: [
    {
      column: '文字列__1行_',
      content: {
        color: '#ffffff',
        fontWeight: 'bold',
        textDecoration: 'underline',
      },
      background: {
        backgroundColor: '#ff6f00',
      },
    },
    {
      columnType: 'ACTION',
      column: 'RECORD_ACTIONS',
      background: {
        backgroundColor: '#e65100',
      },
    },
    {
      columnType: 'ACTION',
      column: 'OPEN_DETAIL',
      background: {
        backgroundColor: '#ff6f00',
      },
    },
  ],
  body: [
    {
      recordId: '1',
      style: [
        {
          column: '文字列__1行_',
          content: {
            backgroundColor: '#fff3e0',
            color: '#e65100',
            fontWeight: 'bold',
            borderColor: '#ff6f00',
            textDecoration: 'underline',
          },
          background: {
            backgroundColor: '#ffe0b2',
          },
        },
        {
          columnType: 'ACTION',
          column: 'OPEN_DETAIL',
          background: {
            backgroundColor: '#e65100',
          },
        },
        {
          columnType: 'ACTION',
          column: 'RECORD_ACTIONS',
          background: {
            backgroundColor: '#ff6f00',
          },
        },
      ],
    },
  ],
};

// スタイルの適用
await kintone.app.setRecordListStyle(config);

// すべてのスタイルを解除
await kintone.app.setRecordListStyle('DEFAULT');

利用できる画面

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

PC

レコード一覧画面（表形式）

モバイル

レコード一覧画面（表形式）

注意事項

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

装飾設定の組み合わせにより、軽微な表示崩れを起こす場合があります。
今後製品のアップデートにより、各プロパティに対応する細かな装飾範囲などは変更される場合があります。

制限事項

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

PC

次のフィールドは非対応です。

関連レコード
グループ
罫線
ラベル
スペース
テーブル内フィールド

次のフィールドはcontentの設定が非対応です。

リッチエディター
テーブル

次のフィールドはcontent.borderColor、content.backgroundColorの設定が非対応です。

ラジオボタン
チェックボックス

モバイル

次のフィールドは非対応です。

関連レコード
グループ
罫線
ラベル
スペース
テーブル

次のフィールドはcontentの設定が非対応です。

リッチエディター

レコードの編集／削除ボタンの列へのスタイルの設定は非対応です。

content.borderColor、content.backgroundColorの設定は非対応です。

kintone API

kintone APIドキュメント

レコードの一覧（表形式）のスタイルの設定

目次

レコードの一覧（表形式）のスタイルの設定

関数

PC

モバイル

引数

戻り値

サンプルコード

利用できる画面

PC

モバイル

注意事項

制限事項

PC

モバイル