API Docs

Set Record List Style

Set Record List Style - kintone.app.setRecordListStyle()

Sets the style of the record list view (table view) for the current App.

Function

Desktop

kintone.app.setRecordListStyle(config)

Mobile

kintone.mobile.app.setRecordListStyle(config)

Parameters

Parameter Type Required Description
config Object / String Yes The style settings.
  • If an object is specified, the style is applied according to the settings.
  • If DEFAULT is specified, all style is removed.
config.header Array / String Optional The header style settings.
  • If an array is specified, the style is applied according to the settings.
  • If DEFAULT is specified, styles under header are removed.
config.header[].columnType String Optional The type of column to apply styles to.
The following values can be specified:
  • FIELD: Field column
  • ACTION: Action UI column
If ignored, FIELD will be set.
config.header[].column String Optional The column to style.
  • When columnType is FIELD, specify the field code.
  • When columnType is ACTION, specify one of the following:
    • OPEN_DETAIL: The column for the show record details button
    • RECORD_ACTIONS: The column for the record edit button / delete button
config.header[].content Object / String Optional The header column style settings.
  • If an object is specified, the style is applied according to the settings.
  • If DEFAULT is specified, styles under content are removed.
config.header[].content.color String Optional The text color of the header.
Specify a 6-digit hexadecimal color code, such as #ffffff.
config.header[].content.fontWeight String Optional The font weight of the text in the header.
The following values can be specified:
  • normal
  • bold
config.header[].content.textDecoration String Optional The text decoration of the header, such as underline or strikethrough.
The following values can be specified:
  • none
  • underline
  • line-through
config.header[].background Object / String Optional The background style settings of the header.
  • If an object is specified, the style is applied according to the settings.
  • If DEFAULT is specified, styles under background are removed.
config.header[].background.backgroundColor String Optional The background color of the header.
Specify a 6-digit hexadecimal color code, such as #ffffff.
config.body Array / String Optional The list body style settings.
  • If an array is specified, the style is applied according to the settings.
  • If DEFAULT is specified, styles under body are removed.
config.body[].recordId String Optional The Record ID of the record to style.
config.body[].style Array / String Optional The record style setting.
  • If an array is specified, the style is applied according to the settings.
  • If DEFAULT is specified, styles for the row specified by recordId are removed.
config.body[].style[].columnType String Optional The type of the column to style.
The following values can be specified:
  • FIELD: Field column
  • ACTION: Action UI column
If ignored, FIELD will be set.
config.body[].style[].column String Optional The column to style.
  • When columnType is FIELD, specify the field code.
  • When columnType is ACTION, specify one of the following:
    • OPEN_DETAIL: The column for the show record details button
    • RECORD_ACTIONS: The column for the record edit button / delete button
config.body[].style[].content Object / String Optional The field content style settings.
  • If an object is specified, the style is applied according to the settings.
  • If DEFAULT is specified, styles under content are removed.
config.body[].style[].content.backgroundColor String Optional The background color of the field content.
Specify a 6-digit hexadecimal color code, such as #ffffff.
Applies only during inline editing.
config.body[].style[].content.color String Optional The text color of the field content.
Specify a 6-digit hexadecimal color code, such as #ffffff.
config.body[].style[].content.fontWeight String Optional The font weight of the text in the field content.
The following values can be specified:
  • normal
  • bold
config.body[].style[].content.textDecoration String Optional The text decoration of the field content, such as underline or strikethrough.
The following values can be specified:
  • none
  • underline
  • line-through
config.body[].style[].content.borderColor String Optional The border color of the field content.
Specify a 6-digit hexadecimal color code, such as #ffffff.
Applies only during inline editing.
config.body[].style[].background Object / String Optional The background style settings.
  • If an object is specified, the style is applied according to the settings.
  • If DEFAULT is specified, styles under background are removed.
config.body[].style[].background.backgroundColor String Optional The background color of the field.
Specify a 6-digit hexadecimal color code, such as #ffffff.

Each style can be removed individually by setting each property to DEFAULT.

Returns

A Promise object.
When the Promise object is fulfilled, no value is returned.

Sample Request

 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: 'Text',
      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: 'Text',
          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',
          },
        },
      ],
    },
  ],
};

// Apply the styles
await kintone.app.setRecordListStyle(config);

// Remove all styles
await kintone.app.setRecordListStyle('DEFAULT');

Available Pages

Desktop

  • Record List page

Mobile

  • Record List page

Notes

Minor display issues may occur depending on the settings combination. Details regarding the specific scope of decoration for each property may change in future product releases.

Limitations

Desktop

The following fields are not supported:

  • Related records
  • Field group
  • Border
  • Label
  • Blank space
  • Fields in a table

The following fields do not support the content settings:

  • Rich text
  • Table

The following fields do not support the content.borderColor and content.backgroundColor settings:

  • Radio button
  • Check box

Mobile

The following fields are not supported:

  • Related records
  • Field group
  • Border
  • Label
  • Blank space
  • Table

The following fields do not support the content settings:

  • Rich text

The following settings are not supported:

  • Setting styles for the column for the record edit button / delete button
  • Setting content.borderColor and content.backgroundColor