Componentes

Documentación > Actions > App Builder > Componentes

Descripción general

Esta página proporciona una lista de componentes de interfaz de usuario que puede utilizar al crear aplicaciones en App Builder.

Muchas propiedades de los componentes le permiten seleccionar entre los valores proporcionados. Si desea utilizar una expresión para el valor de una propiedad, haga clic en </> junto a la propiedad para usar el editor de código.

Cualquier componente que pueda activar un evento tiene una lista de reacciones disponibles en eventos y reacciones. Estos componentes también pueden usar reacciones personalizadas.

Para obtener más información sobre el uso de JavaScript en App Builder, consulte JavaScript Expressions. Para obtener más información sobre cómo guardar sus componentes como plantilla, consulte Reusable Modules.

Componentes disponibles

Botón

Los componentes de botón tienen las siguientes propiedades.

General

Etiqueta: El texto que se muestra en el botón.
Valor: cadena o expresión

Apariencia

Intención: Controla el color del botón, con colores que representan el propósito del mismo.
Valores proporcionados: predeterminado, peligro, éxito, advertencia
Es principal: Diseñado para llamar la atención del usuario sobre la(s) acción(es) más importante(s) para una página o flujo de trabajo determinado.
Valores proporcionados: encendido, apagado
Es sin borde: Elimina el borde de cualquier botón. Al pasar el cursor, obtiene un relleno de fondo.
Valores proporcionados: encendido, apagado
Está cargando: Muestra un indicador de carga.
Valores proporcionados: encendido, apagado
Está deshabilitado: Aplica el estilo de deshabilitado y elimina las interacciones.
Valores proporcionados: encendido, apagado
Es visible: Determina si el componente es visible para el usuario final. En modo de edición, todos los componentes permanecen visibles.
Valores proporcionados: encendido, apagado

Eventos

Evento: Valor: clic
Reacción: Valores: los ejemplos incluyen abrir modal, activar acción y establecer estado del componente
Consulte Eventos para obtener la lista completa de reacciones disponibles.

Inspeccionar datos

Muestra pares de propiedad y valor en formato JSON.

Ejemplo

Para visualizar este componente en contexto, consulte el plano de la aplicación Metrics Explorer & Monitors Builder.

Valor de llamada

Los componentes de valor de llamada tienen las siguientes propiedades.

General

Etiqueta: El texto que se muestra en la parte superior del componente.
Valor: cadena o expresión
Valor: El valor que resalta la llamada.
Valor: cadena o expresión
Unidad: La unidad asociada con el valor.
Valor: cadena o expresión

Estilo

Estilo: El estilo visual del componente.
Valores proporcionados: predeterminado, éxito, advertencia, peligro, azul, púrpura, rosa, anaranjado, amarillo, rojo, verde, gris, azul vívido, púrpura vívido, rosa vívido, anaranjado vívido, amarillo vívido, rojo vívido, verde vívido
Tamaño: Ajusta la métrica de forma responsiva para que sea proporcional al tamaño del valor.
Valores proporcionados: sm, md, lg, xl

Apariencia

Está cargando: Muestra un indicador de carga.
Valores proporcionados: encendido, apagado
Está deshabilitado: Aplica el estilo de deshabilitado y elimina las interacciones.
Valores proporcionados: encendido, apagado
Es visible: Determina si el componente es visible para el usuario final. En modo de edición, todos los componentes permanecen visibles.
Valores proporcionados: encendido, apagado

Inspeccionar datos

Muestra pares de propiedad y valor en formato JSON.

Ejemplo

Para visualizar este componente en contexto, consulte el plano de la aplicación EC2 Instance Manager.

Casilla de verificación

Los componentes de casilla de verificación tienen las siguientes propiedades.

General

Etiqueta

El texto que se muestra en la parte superior del componente.
Valor: cadena o expresión

Opciones

La lista de casillas de verificación que un usuario puede seleccionar. El formato es una matriz de objetos donde cada objeto consiste en un par clave-valor de label y value. El número mínimo de opciones es 1.
Valor: expresión
Ejemplo:

${[
  {
      "label": "Staging",
      "value": "staging"
  },
  {
      "label": "Production",
      "value": "production"
  }
]}

Apariencia

Es multilínea: Determina si el texto de la casilla de verificación debe ajustarse a una nueva línea o truncarse con puntos suspensivos.
Valores proporcionados: encendido, apagado
Está deshabilitado: Aplica el estilo de deshabilitado y elimina las interacciones.
Valores proporcionados: encendido, apagado
Es visible: Determina si el componente es visible para el usuario final. En modo de edición, todos los componentes permanecen visibles.
Valores proporcionados: encendido, apagado

Eventos

Evento: Valor: cambiar
Reacción: Valores: los ejemplos incluyen abrir modal, activar acción y establecer estado del componente
Consulte Eventos para obtener la lista completa de reacciones disponibles.

Inspeccionar datos

Muestra pares de propiedad y valor en formato JSON.

Ejemplo

Para visualizar este componente en contexto, consulte el plano de la aplicación Metrics Explorer & Monitors Builder.

Contenedor

Los componentes de contenedor tienen las siguientes propiedades.

Apariencia

Es visible: Determina si el componente es visible para el usuario final. En modo de edición, todos los componentes permanecen visibles.
Valores proporcionados: encendido, apagado

Inspeccionar datos

Muestra pares de propiedad y valor en formato JSON.

Ejemplo

Para visualizar este componente en contexto, consulte el plano de la aplicación Metrics Explorer & Monitors Builder.

Gráfico personalizado

Los componentes de gráfico personalizado tienen las siguientes propiedades.

General

Especificación de Vega: Una cadena que representa una especificación JSON válida de Vega-Lite o Vega.

Apariencia

Está cargando: Muestra un indicador de carga.
Valores proporcionados: encendido, apagado
Es visible: Determina si el componente es visible para el usuario final. En modo de edición, todos los componentes permanecen visibles.
Valores proporcionados: encendido, apagado

Inspeccionar datos

Muestra pares de propiedad y valor en formato JSON.

Ejemplo

Para ver un ejemplo de cómo usar este componente, consulte Gráficos personalizados.

Selector de fecha

Los componentes de selector de fecha tienen las siguientes propiedades.

General

Etiqueta: La etiqueta que se muestra en la parte superior del selector de fecha.
Valor: cadena o expresión
Información sobre herramientas: La información sobre herramientas que se mostrará al pasar el cursor sobre la etiqueta de entrada. La información sobre herramientas puede contener un marcador.
Valor: cadena o expresión
Valor predeterminado: La fecha predeterminada del selector de fecha, que se muestra como una marca de tiempo UNIX en milisegundos.
Valor: entero
Permitir fechas futuras: Determina si la fecha puede establecerse después de la fecha del día actual.
Valores proporcionados: encendido, apagado

Apariencia

Es visible: Determina si el componente es visible para el usuario final. En modo de edición, todos los componentes permanecen visibles.
Valores proporcionados: encendido, apagado

Eventos

Evento: Valor: cambiar
Reacción: Valores: los ejemplos incluyen abrir modal, activar acción y establecer estado del componente
Consulte Eventos para obtener la lista completa de reacciones disponibles.
Función de estado: setValue
Ejemplo: Consulte Funciones de estado.

Inspeccionar datos

Muestra las propiedades y los valores en formato JSON. Los valores se muestran tanto como una marca de tiempo UNIX en milisegundos como en formato ISO (año, mes, día, hora, minutos, segundos y milisegundos).

Selector de rango de fechas

Los componentes del selector de rango de fechas tienen las siguientes propiedades.

General

Intervalo de tiempo predeterminado: El intervalo de tiempo predeterminado que muestra el selector de fechas.
Valores proporcionados: últimos 5 minutos, últimos 30 minutos, última 1 hora, últimas 4 horas, último 1 día

Apariencia

Es visible: Determina si el componente es visible para el usuario final. En modo de edición, todos los componentes permanecen visibles.
Valores proporcionados: encendido, apagado

Eventos

Evento: Valor: cambiar
Reacción: Valores: los ejemplos incluyen abrir modal, activar acción y establecer estado del componente
Consulte Eventos para obtener la lista completa de reacciones disponibles.

Inspeccionar datos

Muestra pares de propiedad y valor en formato JSON.

Ejemplo

Para visualizar este componente en contexto, consulte el plano de la aplicación Metrics Explorer & Monitors Builder.

Divisor

Los componentes divisores tienen las siguientes propiedades.

Apariencia

Es visible: Determina si el componente es visible para el usuario final. En modo de edición, todos los componentes permanecen visibles.
Valores proporcionados: encendido, apagado

Inspeccionar datos

Muestra las propiedades en formato JSON.

Entrada de archivo

Los componentes de entrada de archivo tienen las siguientes propiedades.

General

Tipos de archivo aceptados: Determina qué tipos de archivo acepta el componente de entrada de archivo.
Valores: .csv, .json

Apariencia

Es visible: Determina si el componente es visible para el usuario final. En modo de edición, todos los componentes permanecen visibles.
Valores proporcionados: encendido, apagado

Eventos

Evento: Valor: cambiar
Reacción: Valores: los ejemplos incluyen abrir modal, activar acción y establecer estado del componente
Consulte Eventos para obtener la lista completa de reacciones disponibles.

Inspeccionar datos

Muestra pares de propiedad y valor en formato JSON.

Imagen

Los componentes de imagen tienen las siguientes propiedades.

General

Fuente: La imagen que se mostrará. Los formatos admitidos son JPG, PNG y GIF. El tamaño máximo de carga es de 4 MB.
Valores: URL o archivo

Apariencia

Ajustar: Determina las dimensiones de la imagen dentro de los límites del componente de imagen.
Valores proporcionados: llenar, contener, cubrir, ninguno
Relleno: Determina el ancho del espacio entre los límites de la imagen y los límites del componente de imagen.
Valores proporcionados: ninguno, pequeño, mediano, grande
Alineación vertical: Determina la posición vertical de la imagen dentro de los límites del componente de imagen.
Valores proporcionados: alinear arriba, alinear al centro, alinear abajo
Alineación horizontal: Determina la posición horizontal de la imagen dentro de los límites del componente de imagen.
Valores proporcionados: alinear a la izquierda, alinear al centro, alinear a la derecha
Borde: Determina si el componente de imagen tiene un borde visual alrededor de sus bordes.
Valores proporcionados: encendido, apagado
Fondo transparente: Determina si el fondo dentro del componente de imagen es transparente.
Valores proporcionados: encendido, apagado
Está cargando: Determina si se muestra un icono de carga mientras se carga la imagen.
Valores proporcionados: encendido, apagado
Es visible: Determina si el componente es visible para el usuario final. En modo de edición, todos los componentes permanecen visibles.
Valores proporcionados: encendido, apagado

Inspeccionar datos

Muestra las propiedades en formato JSON.

Logotipo de integración

Los componentes de logotipo de integración tienen las siguientes propiedades.

General

Id. de integración: Especifica qué icono de logotipo de integración mostrar.
Valor: cadena o expresión
Ejemplos: datadog, amazon-s3, postgres, okta

Apariencia

Alineación horizontal: Controla la posición horizontal del logotipo dentro del componente.
Valores proporcionados: alinear a la izquierda, alinear a la centro, alinear a la derecha
Alineación vertical: Controla la posición vertical del logotipo dentro del componente.
Valores proporcionados: alinear arriba, alinear al centro, alinear abajo
Es visible: Determina si el componente es visible para el usuario final. En modo de edición, todos los componentes permanecen visibles.
Valores proporcionados: encendido, apagado
Está cargando: Muestra un indicador de carga.
Valores proporcionados: encendido, apagado

Inspeccionar datos

Muestra pares de propiedad y valor en formato JSON.

Formulario

Los componentes de formulario tienen las siguientes propiedades.

General

Título: El título del formulario.
Valor: cadena o expresión
Valor predeterminado: El valor predeterminado que la aplicación completa en el formulario. Para completar un campo específico, puede usar notación JSON, como {"org":"frontend"} para completar el campo org con el valor frontend.
Valor: cadena o expresión

Campos

Cada elemento representa un campo en el formulario. Los campos tienen cada uno de los siguientes tipos: textInput, select, textArea o text.

Los campos tienen algunas o todas las siguientes propiedades dependiendo de su tipo de campo:

Nombre del campo: El identificador único para un campo. Puede usar este identificador para hacer referencia al campo en una expresión.
Valor: cadena o expresión
Etiqueta: La etiqueta que se muestra encima del campo.
Valor: cadena o expresión
Contenido: El contenido que se muestra en un campo text.
Valor: cadena o expresión
Opciones: Las opciones disponibles en un campo select. Las opciones deben ser una matriz de objetos, con una clave const para el valor de la opción y una clave title opcional para la etiqueta de la opción.
Valor: El label y value de cada objeto pueden ser una cadena o expresión.
Puede completar cada objeto usando la GUI (predeterminado), o activar Raw para usar entrada JSON sin procesar para proporcionar toda la matriz de objetos.
Texto de marcador de posición: El texto que se muestra en un campo textInput o textArea cuando no se ingresa ningún valor.
Valor: cadena o expresión
Está deshabilitado: Aplica el estilo de deshabilitado y elimina las interacciones.
Valores proporcionados: encendido, apagado
Es visible: Determina si el campo es visible en el formulario.
Valores proporcionados: encendido, apagado
Es obligatorio: Determina si el campo es obligatorio para enviar el formulario.
Valores proporcionados: encendido, apagado

Apariencia

Es visible: Determina si el componente es visible para el usuario final. En modo de edición, todos los componentes permanecen visibles.
Valores proporcionados: encendido, apagado
Está deshabilitado: Aplica el estilo de deshabilitado y elimina las interacciones.
Valores proporcionados: encendido, apagado

Eventos

Evento: Valor: enviar, cambiar, validar
Reacción: Valores: los ejemplos incluyen abrir modal, activar acción y establecer estado del componente
Consulte Eventos para obtener la lista completa de reacciones disponibles.
Función de estado: setValue
Ejemplo: form0.setValue({name: 'node-group-1'}) establece el valor del componente form0 en {name: 'node-group-1'}.
Consulte Funciones de estado para obtener más información.

Inspeccionar datos

Muestra pares de propiedad y valor en formato JSON.

Entrada JSON

Los componentes de entrada JSON tienen las siguientes propiedades.

General

Etiqueta: El texto que se muestra en la parte superior del componente.
Valor predeterminado: El valor JSON predeterminado que muestra el componente.

Apariencia

Es de solo lectura: Determina si el componente es de solo lectura.
Valores proporcionados: encendido, apagado
Es visible: Determina si el componente es visible para el usuario final. En modo de edición, todos los componentes permanecen visibles.
Valores proporcionados: encendido, apagado

Eventos

Evento: Valor: cambiar
Reacción: Valores: los ejemplos incluyen abrir modal, activar acción y establecer estado del componente
Consulte Eventos para obtener la lista completa de reacciones disponibles.

Inspeccionar datos

Muestra pares de propiedad y valor en formato JSON.

Modal

Los componentes modales tienen las siguientes propiedades.

General

Título: El título del modal.
Valor: cadena o expresión

Apariencia

Tamaño: La escala del modal.
Valores proporcionados: sm, md, lg
Es visible: Determina si el componente es visible para el usuario final. En modo de edición, todos los componentes permanecen visibles.
Valores proporcionados: encendido, apagado

Eventos

Evento: Valores: toggleOpen, cerrar, abrir
Reacción: Valores: los ejemplos incluyen abrir modal, activar acción y establecer estado del componente
Consulte Eventos para obtener la lista completa de reacciones disponibles.
Función de estado: setIsOpen
Ejemplo: modal0.setIsOpen(true) establece el estado de modal0 en abierto.
Consulte Funciones de estado para obtener más información.

Inspeccionar datos

Muestra pares de propiedad y valor en formato JSON.

Ejemplo

Para visualizar este componente en contexto, consulte el plano de la aplicación Metrics Explorer & Monitors Builder.

Entrada de número

Los componentes de entrada de número tienen las siguientes propiedades.

Etiqueta: El texto que se muestra en la parte superior del componente.
Valor: cadena o expresión
Valor predeterminado: El valor predeterminado que la aplicación completa en el cuadro de entrada.
Valor: número o expresión que se evalúa como un número
Texto de marcador de posición: El texto que se muestra cuando no se ingresa ningún valor.
Valor: cadena o expresión

Validación

Mín.: El valor mínimo que acepta la entrada numérica.
Valor: número o expresión que se evalúa como un número
Máx.: El valor máximo que acepta la entrada numérica.
Valor: número o expresión que se evalúa como un número

Apariencia

Está deshabilitado: Aplica el estilo de deshabilitado y elimina las interacciones.
Valores proporcionados: encendido, apagado
Es visible: Determina si el componente es visible para el usuario final. En modo de edición, todos los componentes permanecen visibles.
Valores proporcionados: encendido, apagado

Eventos

Evento: Valor: cambiar
Reacción: Valores: los ejemplos incluyen abrir modal, activar acción y establecer estado del componente
Consulte Eventos para obtener la lista completa de reacciones disponibles.
Función de estado: setValue
Ejemplo: numberInput0.setValue(3) establece el valor del componente numberInput0 en 3.
Consulte Funciones de estado para obtener más información.

Inspeccionar datos

Muestra pares de propiedad y valor en formato JSON.

Ejemplo

Para visualizar este componente en contexto, consulte el plano de la aplicación ECS Task Manager.

Radio

Los componentes de radio tienen las siguientes propiedades.

General

Etiqueta

El texto que se muestra en la parte superior del componente.
Valor: cadena o expresión

Opciones

La lista de opciones de botones de radio que un usuario puede seleccionar. El formato es una matriz de objetos donde cada objeto consiste en un par clave-valor de label y value.
Valor: expresión
Ejemplo:

${[
  {
      "label": "Staging",
      "value": "staging"
  },
  {
      "label": "Production",
      "value": "production"
  }
]}

Valor predeterminado

El valor que se selecciona cuando se carga el componente de radio.
Valor: cadena o expresión

Apariencia

Está deshabilitado: Aplica el estilo de deshabilitado y elimina las interacciones.
Valores proporcionados: encendido, apagado
Es visible: Determina si el componente es visible para el usuario final. En modo de edición, todos los componentes permanecen visibles.
Valores proporcionados: encendido, apagado

Eventos

Evento: Valor: cambiar
Reacción: Valores: los ejemplos incluyen abrir modal, activar acción y establecer estado del componente
Consulte Eventos para obtener la lista completa de reacciones disponibles.
Función de estado: setValue
Ejemplo: radioButtons0.setValue("production") establece el valor del componente radioButtons0 en "production".
Consulte Funciones de estado para obtener más información.

Inspeccionar datos

Muestra pares de propiedad y valor en formato JSON.

Renderizador de React

Los componentes del renderizador de React tienen las siguientes propiedades.

General

Definición del componente de React: El código que se ejecuta para crear un componente de React.
Props de entrada del componente: Las propiedades que se pasan al componente de React y a las que se puede acceder en el objeto propiedades del componente.
Estado inicial del componente: Establece los valores de estado iniciales para su componente. Este estado se utiliza cuando el componente se renderiza por primera vez o si aún no se ha establecido ningún estado. El componente puede acceder a estos datos a través de props.state.

Apariencia

Es visible: Determina si el componente es visible para el usuario final. En modo de edición, todos los componentes permanecen visibles.
Valores proporcionados: encendido, apagado

Eventos

Evento: Valores: establecer estado del componente, función de devolución de llamada
Nombre de la función: Valor: props.customFunctionName
Reacción: Valores: los ejemplos incluyen abrir modal, activar acción y establecer estado del componente
Consulte Eventos para obtener la lista completa de reacciones disponibles.

Inspeccionar datos

Muestra pares de propiedad y valor en formato JSON.

Relaciones

Muestra las dependencias de datos entre el renderizador de React y los componentes en la aplicación.

Ejemplo

Para ver un ejemplo de cómo usar este componente, consulte Renderizador de React.

Buscar

Los componentes de búsqueda tienen las siguientes propiedades.

General

Valor predeterminado: El valor predeterminado que la aplicación completa en el cuadro de búsqueda.
Valor: cadena o expresión
Texto de marcador de posición: El texto que se muestra cuando no se ingresa ningún valor.
Valor: cadena o expresión

Apariencia

Tamaño: La escala del componente de búsqueda.
Valores proporcionados: sm, md, lg
Está cargando: Muestra un indicador de carga.
Valores proporcionados: encendido, apagado
Es visible: Determina si el componente es visible para el usuario final. En modo de edición, todos los componentes permanecen visibles.
Valores proporcionados: encendido, apagado

Eventos

Evento: Valores: cambiar, enviar
Reacción: Valores: los ejemplos incluyen abrir modal, activar acción y establecer estado del componente
Consulte Eventos para obtener la lista completa de reacciones disponibles.
Función de estado: setValue
Ejemplo: search0.setValue("search query") establece el valor del componente search0 en "search query".
Consulte Funciones de estado para obtener más información.

Para obtener más información sobre eventos, consulte Eventos.

Inspeccionar datos

Muestra pares de propiedad y valor en formato JSON.

Ejemplo

Para visualizar este componente en contexto, consulte el plano de la aplicación EC2 Instance Manager.

Select

Los componentes de selección tienen las siguientes propiedades.

General

Etiqueta

El texto que se muestra en la parte superior del componente.
Valor: cadena o expresión

Texto de marcador de posición

El texto que se muestra cuando no se ingresa ningún valor.
Valor: cadena o expresión

Opciones

La lista de opciones de selección entre las que un usuario puede elegir. El formato es una matriz de objetos donde cada objeto consiste en un par clave-valor de label y value.
Valor: expresión
Ejemplo:

${[
  {
      "label": "Staging",
      "value": "staging"
  },
  {
      "label": "Production",
      "value": "production"
  }
]}

Valor predeterminado

El valor que se selecciona cuando se carga la selección.
Valor: cadena o expresión

Es selección múltiple

Determina si el usuario puede seleccionar más de una opción a la vez.
Valores proporcionados: encendido, apagado

Apariencia

Está deshabilitado: Aplica el estilo de deshabilitado y elimina las interacciones.
Valores proporcionados: encendido, apagado
Es visible: Determina si el componente es visible para el usuario final. En modo de edición, todos los componentes permanecen visibles.
Valores proporcionados: encendido, apagado

Eventos

Evento: Valor: cambiar
Reacción: Valores: los ejemplos incluyen abrir modal, activar acción y establecer estado del componente
Consulte Eventos para obtener la lista completa de reacciones disponibles.
Función de estado: setValue
Ejemplo: select0.setValue("staging") establece el valor del componente select0 en "staging".
Consulte Funciones de estado para obtener más información.

Inspeccionar datos

Muestra pares de propiedad y valor en formato JSON.

Ejemplo

Para visualizar este componente en contexto, consulte el plano de la aplicación Metrics Explorer & Monitors Builder.

Panel lateral

Los componentes del panel lateral tienen las siguientes propiedades.

General

Título: El título para el panel lateral.
Valor: cadena

Apariencia

Ancho: Determina el ancho del panel lateral. Se debe incluir un signo de porcentaje (%) después del valor.
Valor: entero
Ocultar botón de cerrar: Determina si el panel lateral muestra una X para cerrar el panel.
Valores proporcionados: encendido, apagado

Eventos

Evento: Valores: alternar abrir, cerrar, abrir
Reacción: Valores: los ejemplos incluyen abrir modal, activar acción y establecer estado del componente
Consulte Eventos para obtener la lista completa de reacciones disponibles.
Función de estado: setIsOpen
Ejemplo: sidePanel0.setIsOpen(true) establece el estado de sidePanel0 en abierto.
Consulte Funciones de estado para obtener más información.

Inspeccionar datos

Muestra las propiedades y los valores en formato JSON.

Pestaña

Los componentes de pestañas tienen las siguientes propiedades.

Pestañas

Una lista de vistas de pestañas. Utilice el (+) para agregar vistas adicionales.

Estilo

Estilo: El estilo de color utilizado para el componente de pestañas.
Valores proporcionados: predeterminado, púrpura, rosa, anaranjado, rojo, verde
Alineación: La forma en que las pestañas están alineadas dentro del componente de pestañas.
Valores proporcionados: Horizontal (→), vertical (↓)
Impacto: Controla si el fondo de la pestaña seleccionada está completamente coloreado o si solo una pequeña banda en la parte inferior está coloreada.
Valores proporcionados: alto, bajo

Apariencia

Ocultar pestañas: Controla si los marcadores de pestaña se muestran.
Valores proporcionados: encendido, apagado
Ocultar cuerpo: Controla si se muestra el cuerpo de las pestañas.
Valores proporcionados: encendido, apagado
Es visible: Determina si el componente es visible para el usuario final. En modo de edición, todos los componentes permanecen visibles.
Valores proporcionados: encendido, apagado

Eventos

Evento: Valor: cambiar
Reacción: Valores: los ejemplos incluyen abrir modal, activar acción y establecer estado del componente
Consulte Eventos para obtener la lista completa de reacciones disponibles.
Función de estado: setTabIndex
Ejemplo: tab0.setTabIndex(0) establece el valor del componente tab0 en la primera pestaña.
Consulte Funciones de estado para obtener más información.

Inspeccionar datos

Muestra pares de propiedad y valor en formato JSON.

Tabla

Los componentes de tabla tienen las siguientes propiedades.

General

Título: Un título para la tabla. Seleccione Markdown para formato personalizado.
Valor: cadena
Fuente de datos: La matriz de objetos que se mostrará en una tabla.
Valores: consulta, datos de demostración, componentes

Columnas

Cada columna de datos de la fuente de datos se representa aquí y tiene las siguientes propiedades:

Etiqueta: El texto que se muestra en la parte superior de la columna.
Valor: cadena o expresión
Ruta de datos: Ruta JSON para acceder a valores anidados dentro de objetos y matrices de una columna determinada.
Valor: cadena o expresión
Formato: El tipo de formato que adopta la columna.
Valores proporcionados: cadena, enlace, píldora de estado, fecha / hora, marcadores, etiquetas, barra de porcentaje, número, barra de puntuación, avatar
Ordenable: Determina si el usuario puede ordenar por la columna.
Copiable: Determina si el usuario puede hacer clic para copiar el contenido de la columna.
Valores proporcionados: encendido, apagado
Filtrable: Determina si una opción de filtro está disponible para la columna.
Valores proporcionados: encendido, apagado

Algunas columnas tienen propiedades adicionales basadas en su propiedad Formatting.

Paginación

Tiene resumen: Determina si se muestra un resumen de paginación directamente encima de la tabla.
Valores proporcionados: encendido, apagado
Tamaño de página: Número de filas por página a mostrar.
Valor: número o expresión que se evalúa como un número
Conteo total: Número total de filas a mostrar en la tabla.
Valor: número o expresión que se evalúa como un número
Type: Determina el tipo de paginación.
Valores proporcionados: lado del cliente, lado del servidor

Ordenamiento

Seleccione la columna y la dirección para el ordenamiento predeterminado de la tabla.
Columna: La columna por la cual ordenar.
Valor: nombre de la columna
Dirección: La dirección para ordenar.
Valores proporcionados: ascendente, descendente

Acciones de fila

Agregar una acción de fila añade una columna Actions a la tabla, la cual contiene botones de acción definidos por el usuario. Las filas pueden tener múltiples acciones. Las acciones tienen las siguientes propiedades:

Etiqueta: El texto que se muestra en el botón de acción.
Valor: cadena o expresión
Primario: Diseñado para llamar la atención del usuario sobre la(s) acción(es) más importante(s) para una página o flujo de trabajo determinado.
Valores proporcionados: encendido, apagado
Sin borde: Elimina el borde de cualquier botón. Al pasar el cursor, obtiene un relleno de fondo.
Valores proporcionados: encendido, apagado
Deshabilitado: Aplica el estilo de deshabilitado y elimina las interacciones.
Valores proporcionados: encendido, apagado
Nivel: Controla el color del botón según su intención.
Valores proporcionados: predeterminado, peligro, éxito, advertencia
Reacciones: Las reacciones que activa el botón. Un botón puede tener múltiples reacciones.
Valores proporcionados: descargar archivo, abrir modal, cerrar modal, abrir panel lateral, cerrar panel lateral, abrir URL, establecer estado del componente, establecer valor de variable de estado, notificación emergente, activar acción, personalizado
Algunos tipos de reacción tienen propiedades adicionales.

Apariencia

Desplazable: Determina de qué formas se puede desplazar la tabla.
Valores proporcionados: ambos, vertical
Está cargando: Muestra un indicador de carga.
Valores proporcionados: encendido, apagado
Tiene ajuste de texto: Determina si el texto de la celda se ajusta.
Valores proporcionados: encendido, apagado
Tiene subfilas: Habilita subfilas para cada fila. Incluya la propiedad subRows en la fuente de datos.
Valores proporcionados: encendido, apagado
Es buscable: Determina si se debe agregar una barra de búsqueda a la tabla.
Valores proporcionados: encendido, apagado
Mostrar opciones de ordenamiento: Agrega un botón Sort a la tabla que ofrece opciones de ordenamiento a los usuarios.
Valores proporcionados: encendido, apagado
Mostrar opciones de columna: Agrega un botón Columns a la tabla para mostrar, ocultar o reorganizar las columnas de la tabla.
Valores proporcionados: encendido, apagado
Tiene filtro de rango de fechas: Agrega un filtro de rango de fechas a la tabla.
Valores proporcionados: encendido, apagado
Es visible: Determina si el componente es visible para el usuario final. En modo de edición, todos los componentes permanecen visibles.
Valores proporcionados: encendido, apagado

Eventos

Evento

Valores: pageChange, tableRowClick

Reacción

Valores: los ejemplos incluyen abrir modal, activar acción y establecer estado del componente
Consulte Eventos para obtener la lista completa de reacciones disponibles.

Función de estado

setSelectedRow
Ejemplos:

table0.setSelectedRow(0) establece la propiedad selectedRow de table0 en la primera fila.
table0.setSelectedRow(null) borra la propiedad selectedRow.

setPageIndex
Ejemplo: table0.setPageIndex(0) establece la propiedad pageIndex de table0 en la primera página.
Consulte Funciones de estado para obtener más información.

Inspeccionar datos

Muestra pares de propiedad y valor en formato JSON.

Ejemplo

Para visualizar este componente en contexto, consulte el plano de la aplicación Metrics Explorer & Monitors Builder.

Para ver ejemplos que muestran cómo utilizar las funciones avanzadas de las tablas, consulte Tables.

Texto

Los componentes de texto tienen las siguientes propiedades.

General

Contenido: El contenido que muestra el componente.
Valor: cadena o expresión
Tipo de contenido: Determina cómo renderizar el texto. Cuando se selecciona Markdown, el componente de texto admite sintaxis Markdown básica, incluidas las imágenes que alojas en otro lugar.
Valores proporcionados: texto sin formato, Markdown

Apariencia

Alineación del texto: Determina la alineación horizontal del texto dentro del componente.
Valores proporcionados: alinear a la izquierda, alinear al centro, alinear a la derecha
Alineación vertical: Determina la alineación vertical del texto dentro del componente.
Valores proporcionados: alinear arriba, alinear al centro, alinear abajo
Es visible: Determina si el componente es visible para el usuario final. En modo de edición, todos los componentes permanecen visibles.
Valores proporcionados: encendido, apagado

Inspeccionar datos

Muestra pares de propiedad y valor en formato JSON.

Relaciones

Muestra las dependencias de datos entre los datos de la tabla y los componentes en la aplicación.

Ejemplo

Para visualizar este componente en contexto, consulte el plano de la aplicación Metrics Explorer & Monitors Builder.

Área de texto

Los componentes de área de texto tienen las siguientes propiedades.

Etiqueta: El texto que se muestra en la parte superior del componente.
Valor: cadena o expresión
Valor predeterminado: El valor que se selecciona cuando se carga el área de texto.
Valor: cadena o expresión
Texto de marcador de posición: El texto que se muestra cuando no se ingresa ningún valor.
Valor: cadena o expresión

Apariencia

Está deshabilitado: Aplica el estilo de deshabilitado y elimina las interacciones.
Valores proporcionados: encendido, apagado
Es visible: Determina si el componente es visible para el usuario final. En modo de edición, todos los componentes permanecen visibles.
Valores proporcionados: encendido, apagado

Eventos

Evento: Valores: cambiar, enviar
Reacción: Valores: los ejemplos incluyen abrir modal, activar acción y establecer estado del componente
Consulte Eventos para obtener la lista completa de reacciones disponibles.
Función de estado: setValue
Ejemplo: textArea0.setValue("text") establece el valor del componente textArea0 en "text".
Consulte Funciones de estado para obtener más información.

Inspeccionar datos

Muestra pares de propiedad y valor en formato JSON.

Entrada de texto

Los componentes de entrada de texto tienen las siguientes propiedades.

Etiqueta: El texto que se muestra en la parte superior del componente.
Valor: cadena o expresión
Valor predeterminado: El valor que se selecciona cuando se carga la entrada de texto.
Valor: cadena o expresión
Texto de marcador de posición: El texto que se muestra cuando no se ingresa ningún valor.
Valor: cadena o expresión

Apariencia

Está deshabilitado: Aplica el estilo de deshabilitado y elimina las interacciones.
Valores proporcionados: encendido, apagado
Es visible: Determina si el componente es visible para el usuario final. En modo de edición, todos los componentes permanecen visibles.
Valores proporcionados: encendido, apagado

Eventos

Evento: Valores: cambiar, enviar
Reacción: Valores: los ejemplos incluyen abrir modal, activar acción y establecer estado del componente
Consulte Eventos para obtener la lista completa de reacciones disponibles.
Función de estado: setValue
Ejemplo: textInput0.setValue("text") establece el valor del componente textInput0 en "text". Consulte Funciones de estado para obtener más información.