Skip to main content

Crear un CRUD en Appsmith

Un CRUD (Create, Read, Update, Delete) es la base de cualquier aplicación de gestión.

Preparación​

Necesitas:

  • Una base de datos conectada (PostgreSQL, MySQL, etc.)
  • Una tabla con datos (ej: products)

Paso 1: Conectar la base de datos​

  1. En el panel izquierdo, clic en Datasources
  2. Clic en + New Datasource
  3. Selecciona PostgreSQL (u otra)
  4. Ingresa credenciales y Test conexión
  5. Save

Paso 2: Listar registros (Read)​

Crear query​

  1. Clic en + New Query
  2. Nombre: getProducts
  3. Query:
SELECT * FROM products ORDER BY created_at DESC
  1. Run para probar

Mostrar en tabla​

  1. Arrastra widget Table al canvas
  2. En propiedades, Table Data: {{getProducts.data}}

Paso 3: Crear registro (Create)​

Query de inserción​

INSERT INTO products (name, price, stock)
VALUES ('{{Input1.text}}', {{Input2.text}}, {{Input3.text}})

Formulario​

  1. Arrastra: Input (nombre), Input (precio), Input (stock)
  2. Arrastra: Button "Crear"
  3. Button onClick: Execute query → insertProduct
  4. onSuccess: Execute query → getProducts (refrescar tabla)

Paso 4: Editar registro (Update)​

Query de actualización​

UPDATE products
SET name = '{{Input1.text}}', price = {{Input2.text}}
WHERE id = {{Table1.selectedRow.id}}

UI de edición​

  1. Usa un Modal para el formulario de edición
  2. Al seleccionar fila en tabla, llena los inputs
  3. Button "Guardar" ejecuta updateProduct

Paso 5: Eliminar registro (Delete)​

Query de eliminación​

DELETE FROM products WHERE id = {{Table1.selectedRow.id}}

Botón eliminar​

  1. Agrega columna de botón en la tabla
  2. onClick: Show confirmation → Execute deleteProduct

Validaciones​

Agrega validaciones en los inputs:

  • Required: {{Input1.text.length > 0}}
  • Numérico: {{!isNaN(Input2.text)}}
  • Rango: {{Input3.text >= 0}}

Resultado final​

Tu app debe tener:

  • ✅ Tabla con datos
  • ✅ Formulario para crear
  • ✅ Modal para editar
  • ✅ Botón para eliminar con confirmación
  • ✅ Validaciones en inputs