Documentos de API

Establecer estilo de la lista de registros

Establecer estilo de la lista de registros - kintone.app.setRecordListStyle()

Establece el estilo de la vista de lista de registros (vista de tabla) de la app actual.

Función

Escritorio

kintone.app.setRecordListStyle(config)

Móvil

kintone.mobile.app.setRecordListStyle(config)

Parámetros

Parámetro Tipo Obligatorio Descripción
config Object / String Sí La configuración de estilo.
  • Si se especifica un objeto, el estilo se aplica según la configuración.
  • Si se especifica DEFAULT, se eliminan todos los estilos.
config.header Array / String Opcional La configuración de estilo del encabezado.
  • Si se especifica un array, el estilo se aplica según la configuración.
  • Si se especifica DEFAULT, se eliminan los estilos bajo header.
config.header[].columnType String Opcional El tipo de columna a la que se aplican los estilos.
Se pueden especificar los siguientes valores:
  • FIELD: Columna de campo
  • ACTION: Columna de UI de acción
Si se omite, se establece FIELD.
config.header[].column String Opcional La columna a la que se aplica el estilo.
  • Cuando columnType es FIELD, especifique el código de campo.
  • Cuando columnType es ACTION, especifique uno de los siguientes valores:
    • OPEN_DETAIL: La columna del botón para mostrar los detalles del registro
    • RECORD_ACTIONS: La columna del botón de editar/eliminar registro
config.header[].content Object / String Opcional La configuración de estilo de la columna del encabezado.
  • Si se especifica un objeto, el estilo se aplica según la configuración.
  • Si se especifica DEFAULT, se eliminan los estilos bajo content.
config.header[].content.color String Opcional El color del texto del encabezado.
Especifique un código de color hexadecimal de 6 dígitos, como #ffffff.
config.header[].content.fontWeight String Opcional El grosor de la fuente del texto del encabezado.
Se pueden especificar los siguientes valores:
  • normal
  • bold
config.header[].content.textDecoration String Opcional La decoración del texto del encabezado, como subrayado o tachado.
Se pueden especificar los siguientes valores:
  • none
  • underline
  • line-through
config.header[].background Object / String Opcional La configuración de estilo del fondo del encabezado.
  • Si se especifica un objeto, el estilo se aplica según la configuración.
  • Si se especifica DEFAULT, se eliminan los estilos bajo background.
config.header[].background.backgroundColor String Opcional El color de fondo del encabezado.
Especifique un código de color hexadecimal de 6 dígitos, como #ffffff.
config.body Array / String Opcional La configuración de estilo del cuerpo de la lista.
  • Si se especifica un array, el estilo se aplica según la configuración.
  • Si se especifica DEFAULT, se eliminan los estilos bajo body.
config.body[].recordId String Opcional El ID del registro al que se aplica el estilo.
config.body[].style Array / String Opcional La configuración de estilo del registro.
  • Si se especifica un array, el estilo se aplica según la configuración.
  • Si se especifica DEFAULT, se eliminan los estilos de la fila especificada por recordId.
config.body[].style[].columnType String Opcional El tipo de columna a la que se aplican los estilos.
Se pueden especificar los siguientes valores:
  • FIELD: Columna de campo
  • ACTION: Columna de UI de acción
Si se omite, se establece FIELD.
config.body[].style[].column String Opcional La columna a la que se aplica el estilo.
  • Cuando columnType es FIELD, especifique el código de campo.
  • Cuando columnType es ACTION, especifique uno de los siguientes valores:
    • OPEN_DETAIL: La columna del botón para mostrar los detalles del registro
    • RECORD_ACTIONS: La columna del botón de editar/eliminar registro
config.body[].style[].content Object / String Opcional La configuración de estilo del contenido del campo.
  • Si se especifica un objeto, el estilo se aplica según la configuración.
  • Si se especifica DEFAULT, se eliminan los estilos bajo content.
config.body[].style[].content.backgroundColor String Opcional El color de fondo del contenido del campo.
Especifique un código de color hexadecimal de 6 dígitos, como #ffffff.
Se aplica solo durante la edición en línea.
config.body[].style[].content.color String Opcional El color del texto del contenido del campo.
Especifique un código de color hexadecimal de 6 dígitos, como #ffffff.
config.body[].style[].content.fontWeight String Opcional El grosor de la fuente del texto del contenido del campo.
Se pueden especificar los siguientes valores:
  • normal
  • bold
config.body[].style[].content.textDecoration String Opcional La decoración del texto del contenido del campo, como subrayado o tachado.
Se pueden especificar los siguientes valores:
  • none
  • underline
  • line-through
config.body[].style[].content.borderColor String Opcional El color del borde del contenido del campo.
Especifique un código de color hexadecimal de 6 dígitos, como #ffffff.
Se aplica solo durante la edición en línea.
config.body[].style[].background Object / String Opcional La configuración de estilo del fondo.
  • Si se especifica un objeto, el estilo se aplica según la configuración.
  • Si se especifica DEFAULT, se eliminan los estilos bajo background.
config.body[].style[].background.backgroundColor String Opcional El color de fondo del campo.
Especifique un código de color hexadecimal de 6 dígitos, como #ffffff.

Cada estilo puede eliminarse individualmente estableciendo DEFAULT en cada propiedad.

Devuelve

Un objeto Promise.
Cuando se cumple el objeto Promise, no se devuelve ningún valor.

Solicitud de ejemplo

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

// Aplicar los estilos
await kintone.app.setRecordListStyle(config);

// Eliminar todos los estilos
await kintone.app.setRecordListStyle('DEFAULT');

Páginas disponibles

Escritorio

  • Página de lista de registros

Móvil

  • Página de lista de registros

Notas

Pueden producirse problemas menores de visualización según la combinación de ajustes. Los detalles sobre el alcance específico de la decoración de cada propiedad pueden cambiar en futuras actualizaciones del producto.

Limitaciones

Escritorio

Los siguientes campos no son compatibles:

  • Registros relacionados
  • Grupo de campo
  • Borde
  • Etiqueta
  • Espacio en blanco
  • Campos de una tabla

Los siguientes campos no admiten los ajustes de content:

  • Texto enriquecido
  • Tabla

Los siguientes campos no admiten los ajustes content.borderColor y content.backgroundColor:

  • Botón de radio
  • Casilla de verificación

Móvil

Los siguientes campos no son compatibles:

  • Registros relacionados
  • Grupo de campo
  • Borde
  • Etiqueta
  • Espacio en blanco
  • Tabla

Los siguientes campos no admiten los ajustes de content:

  • Texto enriquecido

Los siguientes ajustes no son compatibles:

  • Configurar estilos para la columna del botón de editar/eliminar registro
  • Configurar content.borderColor y content.backgroundColor