Novedades: App Builder con acciones de datos condicionales, detalles maestros de cuadrícula y más

Nuestro lanzamiento App Builder en junio presenta una nueva ola de funciones de productividad diseñadas para acelerar el desarrollo de aplicaciones y optimizar las interacciones con los usuarios. Después de haber App Builder con las acciones de datos condicionales, ahora puede crear una lógica más inteligente en sus flujos de trabajo en función del éxito o el fracaso de las llamadas a la API, sin necesidad de código. La nueva plantilla de detalle maestro de cuadrícula le permite enriquecer visualmente los datos de fila con vistas expandibles y contextuales. Y para los equipos globales, estamos introduciendo la localización al español en toda la plataforma. En combinación con la nueva función de enrutamiento a nivel secundario, las mejoras en el tiempo de diseño y las variantes ampliadas de la interfaz de usuario, como los botones de icono delineados y contenidos, esta versión pone más potencia de diseño y control lógico al alcance de su mano.

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

• Un creador de aplicaciones visuales: la plataforma unificada para ejecutivos de nivel C, arquitectos empresariales, líderes de equipos de desarrollo, 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 genera código listo para producción para Angular, React, Web Components y Blazor, y convierte Figma diseños en código.

¿Qué hay de nuevo en esta versión App Builder?

Mejore su cuadrícula con plantillas de detalles maestros

Las plantillas maestro-detalle en App Builder aportan una potente interactividad a sus cuadrículas de datos. Al habilitar las filas expandibles, puede permitir que los usuarios revelen más detalles vinculados a cada registro, como los pedidos recientes de un cliente, el rendimiento de un empleado o el historial de viajes de un vehículo, directamente dentro de la cuadrícula.

Con el soporte intuitivo en tiempo de diseño de App Builder, puede arrastrar y soltar componentes como tarjetas o bloques de texto en el área de detalles expandida y vincularlos al contexto de datos de la fila actual. Es una forma rápida y flexible de crear interfaces de usuario informativas que van más allá de las tablas planas.

Para usarlo, simplemente habilite la opción Detalles de la cuadrícula desde el panel Propiedades, agregue sus componentes y vincúlelos a los datos de la fila.

Echemos un vistazo a la siguiente demostración.

La demostración anterior muestra un diseño maestro-detalle en acción, aplicado dentro de una aplicación CRM. Demuestra cómo al seleccionar un cliente se revelan sus pedidos asociados y, además, cómo cada pedido carga dinámicamente sus detalles de pedido relacionados.

En esta configuración:

• La vista principal muestra una lista de clientes y, al seleccionar un cliente, puede ver sus pedidos.
• Se ha agregado una cuadrícula de detalles de pedido secundaria, que está vinculada al contexto de fila del pedido seleccionado.
• Este enlace basado en el contexto garantiza que, cuando un usuario selecciona un pedido específico, la cuadrícula de detalles del pedido se actualiza para mostrar solo la información relevante.

Esto demuestra la facilidad con la que se puede crear una experiencia de exploración en profundidad mediante el enlace de datos contextual, lo que permite a los usuarios explorar las relaciones jerárquicas de datos sin cableado manual ni código adicional.

Obtenga una vista previa de todo en vivo y exporte su aplicación con el código generado. Tenga en cuenta que los enlaces avanzados específicos, como los orígenes de datos con parámetros por fila o los componentes de superposición, como los cuadros de diálogo, no se admiten actualmente en la generación de código. Echa un vistazo al tema de ayuda completo aquí.

Flujos de trabajo más inteligentes: App Builder con acciones de datos condicionales

Con esta versión, App Builder presenta las acciones de datos condicionales, una forma eficaz de controlar el comportamiento de las aplicaciones en función del resultado de una solicitud de datos. Ahora puede definir acciones de seguimiento que se desencadenen solo si la acción inicial se realiza correctamente o no. Por ejemplo, muestre un banner de éxito después de un envío de formulario correcto o solicite un mensaje de error si se produce un error.

Esta función mantiene las cosas limpias y enfocadas: las condiciones actualmente se limitan solo a acciones de datos y admiten una evaluación simple de aprobación/falla sin necesidad de verificar códigos HTTP específicos. También puede usar variables dentro de las condiciones y beneficiarse de los menús desplegables contextuales que ayudan a aclarar si está haciendo referencia a una entrada, un resultado o una variable definida por el usuario. Es un paso fundamental hacia una lógica de aplicaciones más inteligente y receptiva, sin necesidad de codificación.

La siguiente demostración muestra el resultado de las acciones condicionales en acción dentro de una aplicación de panel de RRHH. Demuestra cómo puedes mejorar el flujo de tu aplicación controlando dinámicamente el proceso de agregar un nuevo empleado y ofreciendo navegación contextual basada en el resultado.

Esto es lo que sucede:

1. Cuando se agrega una nueva fila a la cuadrícula de empleados, una acción condicional desencadena una solicitud PUT al backend.
2. Si la solicitud se realiza correctamente, suceden dos cosas:
3. Se establece una variable para almacenar el objeto employee recién creado.
4. Aparece una notificación en la barra de aperitivos, que confirma el éxito y ofrece un botón de navegación a una vista de formulario detallada precargada con los datos del nuevo empleado.
5. Si se produce un error en la solicitud, se muestra una ventana de diálogo para notificar al usuario del problema.
6. Después de editar al empleado en la Vista de formulario y enviar actualizaciones, aparece una segunda barra de bocadillos que guía al usuario a la Vista de equipo, donde puede ver la lista completa de empleados, ahora incluyendo el recién agregado o actualizado.

Este flujo ilustra cómo las acciones condicionales pueden orquestar una experiencia de usuario (UX) fluida y de varios pasos, desde la creación de datos hasta la fácil navegación en la aplicación, sin necesidad de una sola línea de código.

¡Hola! App Builder ahora es compatible con el español

App Builder ahora ofrece localización al español, lo que facilita a los usuarios de habla hispana la navegación por la superficie de diseño, la caja de herramientas, los paneles de propiedades y más. Esta actualización garantiza una experiencia más accesible e inclusiva al adaptar automáticamente la interfaz en función de la configuración de idioma o las preferencias de su navegador.

Introducción al enrutamiento de nivel secundario con parámetros de ruta y consulta

Nos complace anunciar una mejora importante en el enrutamiento en App Builder: compatibilidad total con el enrutamiento a nivel secundario con parámetros de ruta y consulta. Esta característica introduce la capacidad de configurar contenedores de vistas anidados (salidas de enrutador) dentro de la jerarquía de aplicaciones, lo que permite a los desarrolladores diseñar estructuras de navegación de varios niveles sin esfuerzo. Ya sea que esté creando una experiencia maestro-detalle (por ejemplo) Customers → Orders → OrderDetails o una interfaz de usuario profundamente anidada, ahora admite jerarquías de enrutamiento de hasta cinco niveles de profundidad, App Builder completo con mejoras en la interfaz de usuario para la navegación y los selectores de destino para una configuración más intuitiva.

Parámetros de consulta, lógica de navegación y comportamiento en tiempo de ejecución
Además de los parámetros de ruta, ahora App Builder incluye una sólida compatibilidad con parámetros de consulta para todas las plataformas, incluidas estrategias para controlar varios parámetros con el mismo nombre. La lógica de generación de código se ha actualizado para reflejar el uso correcto de los parámetros de consulta y se integra sin problemas con las acciones de enrutamiento. Además, se ha mejorado el comportamiento de la navegación: la navegación a la raíz (/) ahora profundiza automáticamente hasta la ruta válida más profunda, deteniéndose solo cuando un parámetro requerido no está definido. Este comportamiento de enrutamiento inteligente mejora la experiencia de vista previa de la aplicación y sienta las bases para crear flujos de navegación complejos y basados en datos con confianza.

Nuevas variantes de botones de iconos: contenidos y delineados

App Builder ahora admite variantes contenidas y delineadas para el componente Botón de icono, alineándolo con las opciones disponibles en nuestros sistemas de diseño y kits de interfaz de usuario Figma. Estos nuevos estilos ofrecen una mayor flexibilidad para adaptarse al tono visual de tu aplicación, ya sea que busques un aspecto llamativo y relleno o un contorno minimalista. La actualización proporciona soporte completo en toda la plataforma, incluida la configuración en tiempo de diseño en la interfaz de usuario de App Builder, la generación de código precisa con definiciones de componentes actualizadas y la importación sin problemas desde Figma para mantener un flujo coherente de diseño a código.

Terminando

El lanzamiento de junio refleja nuestro compromiso continuo de ofrecer experiencias de aplicaciones modernas y escalables en App Builder. Ya sea que esté diseñando cuadrículas de datos complejas, aplicando reglas de validación sólidas o optimizando los flujos de trabajo de DevOps, esta actualización le brinda las herramientas para moverse más rápido y construir mejor.

Pruebe las nuevas funciones hoy mismo en appbuilder.dev

App Builder cambia las reglas del juego en el proceso de desarrollo de aplicaciones. Con su constructor visual basado en la nube, capacidades low-code y nuevas funciones, es 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.

Para experimentar todo lo que hay en las últimas actualizaciones App Builder, visite su portal de clientes y obtenga la última versión. Como de costumbre, siempre estamos emocionados de recibir sus comentarios y escuchar lo que desea agregar o recomendar. Así que, por favor, envíame un correo electrónico a zkolev@appbuilder.dev y hazme saber cómo podemos ayudarte a seguir aportando valor a tus clientes con Infragistics.