Construir una gestión dinámica de Datos en la aplicación Qodly: crear, añadir, editar y eliminar

En nuestra serie sobre 4D Qodly Pro, hemos explorado cómo mostrar datos utilizando una tabla de datos. Hoy, daremos el siguiente paso: aprender a añadir, editar y borrar registros. Estas operaciones son esenciales para crear aplicaciones dinámicas e interactivas.

Para demostrar estas funcionalidades, continuaremos con nuestra aplicación de gestión de evaluación de rendimiento. El objetivo es diseñar una pantalla que permita a los usuarios añadir o modificar la información de los empleados. Este proyecto está disponible en GitHub como referencia.

Aplicación de evaluación de rendimiento

Añadiendo botones de creación y edición

Junto a la tabla de datos, añadimos dos botones: Create y Edit.

Tienes dos opciones para mostrar el formulario de entrada de datos:

• Mostrar formulario en línea: muestra el formulario de entrada junto a la tabla de datos cuando el usuario presiona los botones «Crear» o «Editar». El formulario puede activarse o desactivarse mediante estados. Los estados condicionales o no condicionales ofrecen flexibilidad, y dedicaremos un futuro blog a este tema. Por ahora, si quiere aprender más sobre los estados, consulte esta documentación sobre estados y este blog sobre Interfaces de usuario dinámicas con estados de página.
• Visualización de diálogo modal: abra el formulario en un diálogo modal cuando el usuario haga clic en los botones «Crear» o «Editar». Este es el enfoque que hemos elegido para este tutorial.

Crear un diálogo

Para crear un diálogo, haga clic en el botón «Dialogs» de la barra superior.

Dispone de varias propiedades para personalizar su diálogo:

• Overlay: activa una superposición de pantalla cuando se define en true.
• Draggable: permite el reposicionamiento controlado por el usuario. Incluye un icono de movimiento personalizable.
• Closable: integra una función de cierre, operable a través del botón o haciendo clic fuera del diálogo.
• Animated: implementa un efecto de parpadeo de apertura para dar énfasis visual.

 

Para más detalles, consulte la documentación de la caja de diálogo.

Creación de un formulario de entrada de datos

Ahora crearemos un formulario de entrada de datos para recoger la información de los empleados. Este formulario permitirá a los usuarios crear o actualizar entradas en la base de datos.

VinculaR el formulario a la fuente de datos

Como recordatorio, en el blog anterior, creamos una tabla de datos vinculada a la fuente de datos employees y conectamos el elemento seleccionado a la fuente de datos «theEmployee». Esta fuente de datos «theEmployee» rellenará el formulario de entrada.

Añadir campos de entrada

Para los campos básicos como nombre, apellido, correo electrónico y trabajo, utilizamos el componente de entrada de texto.

Ejemplo: configuración del campo Nombre

• Arrastre un componente de entrada de texto en el formulario.
• Defina la propiedad Qodly source en «theEmployee.Firstname».

 

Repita este proceso para los otros campos vinculándolos a los atributos apropiados de «theEmployee».

Configuración de campos de texto largos

Para campos de texto más largos como la descripción, también utilizamos el componente Entrada de Texto pero lo configuramos como un área de texto:

• Arrastre un componente Input text al formulario.
• Cambie la propiedad Type a text area.
• Defina la fuente Qodly en «theEmployee.Description».

 

Menús Desplegables para Departamentos y Gerentes

Para campos como departamento y gerente, utilizamos el componente Select Box, que permite a los usuarios seleccionar valores predefinidos.

• Cree la fuente de datos «departement» de tipo entidad,
• Arrastre un componente Select Box,
• Defina «theEmployee.Departement» como fuente Qodly y «departement» como elemento seleccionado.

 

• Defina la propiedad placeholder con el texto «Departement»,
• Arrastre un componente de entrada de texto dentro de la caja de selección,
• Vincule la entrada de texto a la fuente «$This.Name».

 

Casilla de verificación con aspecto de interruptor

Para campos booleanos como «isActive», utilizamos el componente Check box. Para tener una apariencia moderna, usamos la apariencia Switch.

• Coloque un componente Check Box en el formulario,
• Cambie la propiedad Variant a Switch,
• Definir la fuente Qodly en «theEmployee.isActive».

 

Gestión de Acciones

4D Qodly Pro simplifica la creación, guardado y borrado de registros ofreciendo acciones estándar integradas, similares a las de 4D.

Ejemplo DE Acción Guardar

• Agregue un botón y etiquételo Guardar.
• En el panel Eventos, bajo la acción Al hacer clic, haga clic en Agregar una acción estándar.
• Introduzca la fuente de datos (en este caso, el empleado) y seleccione la acción Guardar.
• Active la casilla de verificación Dar comentarios para personalizar el manejo de mensajes de error inesperados, determinando lo que se mostrará a los usuarios finales.

 

Funciones personalizadas para la lógica empresarial

Además de las acciones estándar, puede llamar funciones personalizadas para operaciones como crear, eliminar o guardar registros. Por ejemplo:

• Validar los datos antes de guardarlos.
• Realizar cálculos para llenar campos adicionales.

 

En esta aplicación, hemos mantenido las cosas simples confiando en las acciones estándar, puede explorar todas las posibilidades de las acciones estándar en la documentación de Qodly.

Actualizar la tabla de datos

Después de añadir o editar un registro, es importante actualizar la tabla de datos para reflejar los cambios. Esto se consigue fácilmente con la acción Recargar.

Para actualizar la tabla de datos después de guardar:

• Añada la acción Reload a la fuente de datos employees vinculada a la tabla de datos.
• Asigne esta acción al botón Guardar junto con la acción Guardar.

Abrir y cerrar el diálogo modal

Para mejorar la interacción del usuario, asocie las acciones de diálogo apropiadas al diálogo modal:

• En los botones Editar y Crear, añada la acción Abrir diálogo.

 

• Dentro de la caja de diálogo, en los botones Save y Cancel, añada la acción Cerrar caja de diálogo.

 

Pasos siguientes

¡Enhorabuena! Ahora dispone de un sistema totalmente funcional para añadir, editar y eliminar datos. Para explorar más a fondo la amplia gama de componentes disponibles para construir páginas Qodly, consulte la documentación completa sobre los componentes Qodly.

Háganos saber sus opiniones y comparta sus progresos en el foro 4D. Esté atento a nuestro próximo blog, donde discutiremos los estados para controlar dinámicamente su interfaz de usuario.