¿Qué hay de nuevo? App Builder Lanzamiento con Form Builder

Permitirle crear aplicaciones de alto rendimiento y ricas en datos con poco código es el objetivo de nuestro compromiso con la mejora continua. Es por eso que siempre nos aseguramos de que las últimas capacidades de App Builder brinden una experiencia de desarrollo fluida y optimizada. Y ahora hemos agregado otra gran característica: Form Builder.

Antes de sumergirte en las nuevas características y todas las nuevas funcionalidades, si es la primera vez que aprendes sobre App Builder, permíteme compartir rápidamente por qué deberías considerarlo como una herramienta clave en el proceso de desarrollo de aplicaciones para tu organización:

• Un App Builder visual: la plataforma unificada para gerentes de producto, diseñadores, desarrolladores y partes interesadas.
• Herramienta de arrastrar y soltar WYSIWYG basada en la nube que ayuda a las empresas a diseñar y crear aplicaciones comerciales completas un 80 % más rápido que nunca.
• Una herramienta low-code que genera código Blazor, código Angular, código Web Components y código React listos para producción a partir de sus diseños de Figma y Sketch.

¿Qué es Form Builder en App Builder?

La funcionalidad Form Builder de App Builder permite a los desarrolladores diseñar formularios HTML a través de una experiencia de arrastrar y soltar. Hace hincapié en la generación automática de estructuras de formularios directamente desde los puntos finales de la API, lo que simplifica el proceso de creación y permite conexiones de datos fluidas con las fuentes de backend. Esta función ofrece una amplia flexibilidad en el diseño de formularios y la personalización de componentes, e incluye opciones para mostrar notificaciones de envíos, errores y validaciones del lado del servidor.

Y si quieres verlo todo en acción, puedes inscribirte en nuestro seminario web centrado en la demostración que se celebrará en diciembre. Encuentre los detalles aquí y regístrese.

Generación automática de formularios a partir de puntos finales de datos

Cuando un desarrollador arrastra un punto de conexión de datos a la superficie de diseño, se genera automáticamente un conjunto de componentes de formulario en función de las propiedades del punto de conexión.

• POST y PUT los métodos crean campos de entrada para el envío de datos.
• El manejo básico de eventos, me gusta OnSuccess e OnError interacciones, se configura automáticamente.

Creación y mapeo automático de controles de formularios

Los controles de formulario se crean en función del tipo de datos y los metadatos de cada campo, lo que garantiza entradas y etiquetas intuitivas (por ejemplo, los campos de fecha usan selectores de fecha, los campos booleanos usan interruptores). Los desarrolladores conservan el control total para modificar componentes, agregar validaciones o ajustar etiquetas directamente en el panel de propiedades.

Modificación de formulario

Una vez generado, el formulario se puede editar para incluir o excluir campos, personalizar etiquetas y establecer validaciones de entrada, lo que ofrece una experiencia de diseño intuitiva. App Builder permite a los desarrolladores adaptar tanto el diseño del formulario como los componentes:

• Agregue o elimine fácilmente elementos dentro del formulario.
• Ajuste las propiedades de control, como las validaciones obligatorias y deshabilitadas, la personalización de etiquetas y la asignación.

Creación manual de formularios

Los desarrolladores pueden crear formularios manualmente en App Builder arrastrando y soltando elementos como campos de entrada, botones y componentes de formulario en el contenedor del formulario. Este enfoque permite un control completo sobre la estructura y el diseño sin necesidad de enlaces inmediatos a las fuentes de datos.

Enlace de origen de datos

Una vez diseñado el formulario, los desarrolladores pueden enlazarlo a un punto de conexión desde orígenes de datos configurados. Esta flexibilidad garantiza la capacidad de refinar los elementos del formulario antes de definir las interacciones de datos.

Comportamiento de enlace y validaciones

• Cambiar entre puntos de conexión: si cambia de un punto de conexión entre uno y otro una vez creado el formulario, las entradas que no coincidan mostrarán una advertencia de enlace no válido y esas entradas no se generarán como enlaces rotos en la salida del código.
• Inicialización de variables: puede inicializar una nueva variable desde el cuadro de diálogo de enlace de punto de conexión de formulario con el punto de conexión de datos de API, lo que le proporciona el contexto necesario para la inicialización de formularios.
• Generación de código: los enlaces no válidos se excluyen del código generado, lo que garantiza que la aplicación se compile sin errores.

Para minimizar las interrupciones al cambiar los puntos de conexión, App Builder proporciona advertencias sobre posibles invalidaciones.

Interacción en vivo con el formulario

En el modo de vista previa de App Builder, los usuarios pueden interactuar con el formulario para ver:

• Validación de entradas en tiempo real.
• Envío de formularios, con notificaciones que indican éxito o errores de validación.

Nota: Tras el envío del formulario en modo de vista previa, se ejecuta la Post/Put acción, agregando o actualizando el registro a través del punto de conexión especificado.

Botones de acción configurables

Los botones de acción (Submit, Reset) ofrecen una personalización completa, admitiendo ubicaciones externas y en formulario. Esta flexibilidad es esencial para los desarrolladores que necesitan un control preciso sobre el comportamiento de los formularios en diseños más complejos.

Enviar notificaciones de acción

Los mensajes de éxito y error se muestran a través de Snackbars, que ofrecen comentarios no intrusivos sobre los envíos de formularios. Estas notificaciones están codificadas de forma rígida para la versión inicial, con planes para admitir el manejo flexible de interacciones en iteraciones futuras.

Compatibilidad con el control de formularios

El Creador de formularios admite una variedad de controles de interfaz de usuario asignados a tipos de datos específicos, lo que garantiza que los desarrolladores puedan crear formularios accesibles y receptivos de manera eficiente. A continuación se muestra un resumen de los controles admitidos y las limitaciones actuales. Todos los controles Form admiten el enlace bidireccional y están enlazados al contexto del formulario.

Control de formularios	Tipo predeterminado	Notas
Grupo Radiofónico	Booleano	Carece de validación de campo requerida
Caja	Booleano	Carece de validación de campo requerida
Interruptor	Booleano	–
control deslizante	Número	–
Seleccionar	Enumeración	–
Cuadro combinado	Enumeración	–
Selector de fecha	Fecha	–
Calendario	Fecha	Es posible que no se actualice la fecha seleccionada con precisión
Campo de entrada	Cadena, Número	–

Nota: Actualmente, los controles de formulario admiten propiedades de validación básicas (Required, Disabled).

Mejoras futuras

La hoja de ruta para el Creador de formularios de App Builder incluye avances en las opciones de validación, compatibilidad ampliada con metadatos y un mejor manejo de notificaciones e interacciones.

Las futuras mejoras de validación incluirán:

• Validación de enumeración para los controles de cuadro selectivo y combinado.
• Validación de rango (min, max).
• Validación de la longitud de la cadena (min length, max length).
• Validación de patrones (regex).

Problemas conocidos y limitaciones

Los siguientes problemas y limitaciones conocidos se aplican a la versión inicial de Form Builder:

• Discrepancia en el comportamiento de restablecimiento de formulario entre App Builder experiencia de tiempo de ejecución y el tiempo de ejecución de la aplicación generada:
  • En App Builder, al hacer clic en el botón Restablecer se vuelve a los valores iniciales al editar un registro y se borra el formulario al agregar un nuevo registro.
  • En la aplicación generada, al hacer clic en el botón Restablecer se borra el formulario estableciendo todos los controles de formulario en valores vacíos.

• Copiar y pegar formularios: Copiar y pegar un formulario actualmente hace que el formulario original pierda sus enlaces de datos, que se transfieren a la instancia del formulario recién pegado.
• Indicador booleano requerido: Existe ambigüedad en la implementación de un campo booleano obligatorio, especialmente para casos como "aceptar términos de servicio".
• Comportamiento de envío/restablecimiento: La funcionalidad de envío/restablecimiento se ha adaptado para funcionar tanto en la plantilla como en el formulario reactivo, pero aún puede experimentar inconsistencias.
• Generación de código:
  • Problemas de escritura con modelos de formulario: Pueden surgir inconsistencias de escritura, especialmente cuando se trabaja con estructuras o matrices anidadas, lo que complica la generación precisa de modelos de formulario en el código de salida.
  • igx-hint Elemento en vista previa: El igx-hint elemento está actualmente excluido de la vista previa ya que no se genera en el código final. Es posible que las actualizaciones futuras agreguen soporte para la funcionalidad de visualización de mensajes.
  • El calendario no se muestra en la aplicación generada cuando se encuentra en un formulario.
  • Comportamiento de clic del botón de reinicio: borra el formulario para los proyectos generados por React. En lugar de volver a los valores iniciales, los controles de formulario obtienen valores vacíos.
  • La propiedad deshabilitada no se representará para la entrada en un formulario generado por angular.

Preguntas de la encuesta

Siéntase libre de completar la siguiente encuesta. Sus comentarios son invaluables para dar forma al futuro de nuestro Creador de formularios y herramientas de bajo código. Nos comprometemos a abordar sus desafíos, como el diseño de formularios responsivos y la gestión de validaciones, al tiempo que mejoramos funciones como la experiencia de usuario de arrastrar y soltar y las integraciones de backend.

Conclusión

En conclusión, App Builder cambia las reglas del juego en el proceso de desarrollo de aplicaciones. Su constructor visual basado en la nube, sus capacidades low-code y sus nuevas funciones lo convierten en una herramienta imprescindible para cualquier organización. ¡Pruébalo hoy! Si necesitas más detalles, te animamos a que consultes nuestro:

• Canal Discord.
• Discusiones de GitHub.
• Hoja de ruta.

To experience everything, head to appbuilder.dev and start using the App Builder. If you want an exclusive preview of our latest developments, check our App Builder Preview environment. As usual, we are always excited to get your feedback and hear what you want to add or recommend. So, please email me at zkolev@appbuilder.dev and let me know how we can help you continue delivering value to your customers with Infragistics.

---

React Generación de código: guía paso a paso

Maximización de la agilidad empresarial con desarrollo low-code

App Builder IA: ¿Cómo agiliza el desarrollo de aplicaciones?

App Builder lanzamiento: IA, diseño de cuadrícula CSS y más

5 características clave a tener en cuenta a la hora de elegir una plataforma low-code