Saltar al contenido principal

Widgets de Appsmith

Appsmith incluye +45 widgets pre-construidos para crear interfaces rápidamente.

Widgets de entrada​

Input​

Campo de texto simple.

{{Input1.text}} // Obtener valor

Select​

Dropdown de opciones.

// Options
[
  { label: "Activo", value: "active" },
  { label: "Inactivo", value: "inactive" }
]
// Valor seleccionado
{{Select1.selectedOptionValue}}

DatePicker​

Selector de fecha.

{{DatePicker1.selectedDate}}

Checkbox / Switch​

Valores booleanos.

{{Checkbox1.isChecked}} // true/false

Widgets de datos​

Table​

Muestra datos en tabla con paginación, búsqueda y ordenamiento.

Propiedades útiles:

  • {{Table1.selectedRow}} - Fila seleccionada
  • {{Table1.selectedRows}} - Filas seleccionadas (multi)
  • {{Table1.pageNo}} - Página actual

List​

Lista personalizable para cards.

Chart​

Gráficas (líneas, barras, pie, etc.)

// Chart Data
[
  { x: "Enero", y: 100 },
  { x: "Febrero", y: 150 }
]

Widgets de layout​

Container​

Agrupa widgets.

Tabs​

Pestañas para organizar contenido.

Ventana emergente para formularios o confirmaciones.

Widgets de acción​

Button​

Ejecuta queries o navegación.

Eventos:

  • onClick
  • onSuccess (después de query exitosa)
  • onError

Icon Button​

Botón con ícono (editar, eliminar, etc.)

Dropdown de acciones.

Bindings útiles​

// Mostrar/ocultar widget
{{Select1.selectedOptionValue === "active"}}

// Deshabilitar botón
{{!Input1.text || Input1.text.length < 3}}

// Formato de fecha
{{moment(DatePicker1.selectedDate).format("DD/MM/YYYY")}}

// Filtrar datos
{{Table1.tableData.filter(row => row.status === "active")}}