App Builder Release: Two-Way Data Binding, Datasource OpenAPI Schema Update & More

Versión App Builder: enlace de datos bidireccional, actualización del esquema OpenAPI de la fuente de datos y más

Hoy sale otro emocionante lanzamiento App Builder. Ahora avanza en el desarrollo de su aplicación con el enlace de datos bidireccional, el esquema OpenAPI de origen de datos actualizado y otros.

6 minutos de lectura

El App Builder lanzamiento en mayo ya está aquí, trayendo una serie de nuevas características y mejoras. Los usuarios ahora pueden actualizar las fuentes de datos existentes al esquema OpenAPI más reciente, con la capacidad de ver cualquier diferencia. Las mejoras también incluyen la compatibilidad con el enlace de datos bidireccional para los componentes Entrada, Casilla de verificación, Conmutador, Selector de fecha, Calendario, Clasificación y Control deslizante.

¿Qué más? Las acciones de datos para crear, actualizar y eliminar filas ahora están disponibles en el componente Cuadrícula de árbol, y las variables se pueden actualizar en función de los eventos de selección de filas en el componente Cuadrícula de árbol. El componente Árbol se ha mejorado con propiedades para la expansión de un solo nodo y la alternancia al hacer clic en el elemento. Además, se ha añadido una nueva opción de estilo de búsqueda para el componente Entrada.

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

  • Un creador de aplicaciones visuales: la plataforma unificada para gerentes de productos, 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.
  • A herramienta de bajo código generando código Blazor listo para producción, código Angular y código Web Components de sus diseños Figma y Sketch.
Pruebe App Builder Pruebe App Builder Pruebe App Builder
Solicitar Demo

Compatibilidad con el enlace de datos bidireccional

En esta versión App Builder, hemos agregado compatibilidad con el enlace de datos bidireccional a los componentes Entrada, Casilla de verificación, Conmutador, Selector de fecha, Calendario, Clasificación y Control deslizante.

La compatibilidad con el enlace bidireccional permite marcar una propiedad de componente como twoWayBindable cuando la propiedad está enlazada a una variable. Pero, ¿qué es exactamente una unión bidireccional? Imagina mantener sincronizados la interfaz de usuario y los datos subyacentes. Por lo tanto, cuando cambia los datos, la interfaz de usuario se actualiza automáticamente y cuando cambia la interfaz de usuario, los datos variables se actualizan automáticamente.

Como usuario, ahora puedes:

  • Establezca el contenido de entrada en algún valor y genere esto como un campo enlazado a datos bidireccional en el código generado.
  • Enlazar una propiedad de valor/contenido correspondiente de un componente a una variable.
  • Controle si este enlace se generará como un enlace bidireccional o no.
Two way binding demo

App Builder versión con la actualización del esquema OpenAPI de la fuente de datos

La interfaz de usuario de fuentes de datos de App Builder presenta al desarrollador una visualización de los esquemas y puntos de conexión de sus fuentes de datos. Las fuentes de datos evolucionan con el tiempo y su esquema cambia, por lo que la interfaz de usuario de la fuente de datos App Builder debe actualizarse en consecuencia.

Con esta versión App Builder, ahora tiene una forma de actualizar fácilmente las fuentes de datos existentes para usar la versión más reciente y actualizada del esquema de OpenAPI y mostrar las diferencias si están presentes.

Updating existing data sources in App Builder

¿Cuál es la esencia de esta nueva función? 

  • Esta característica le permite sincronizar su fuente de datos con su WebAPI de back-end mientras desarrolla su front-end en el App Builder.
  • Si actualiza el origen de datos y las propiedades del esquema de datos que ha utilizado para el enlace de datos permanecen sin cambios, los enlaces de datos estarán intactos.
  • Si actualiza el origen de datos y las propiedades del esquema de datos que ha usado para el cambio de enlace de datos, recibirá una notificación con una lista de enlaces de datos afectados para que pueda actualizar manualmente los componentes de la interfaz de usuario en consecuencia.

* En el futuro, planeamos introducir la actualización automática en segundo plano, que será útil cuando la URL de la API web de origen de datos no haya cambiado. También estará disponible una nueva función de asignaciones de datos, que proporciona una interfaz de usuario para que pueda actualizar los enlaces de forma más cómoda. 

Acciones de cuadrícula de árbol

Ahora puede configurar acciones de datos para crear, actualizar y eliminar filas en el componente Tree-grid con llamadas a la API web. Puede conectarlos a los botones de acción de edición de la cuadrícula de árbol y aprovechar las actualizaciones de la API web en tiempo real. Tras la generación del código, App Builder creará los servicios necesarios para controlar las llamadas API para crear, obtener, actualizar y eliminar un recurso a través de los métodos HTTP Post/Put/Delete disponibles.

Interacción de selección de fila de cuadrícula de árbol

Con esta versión App Builder, también puede actualizar una variable basada en el evento Selección de fila en el componente Cuadrícula de árbol.

Tree Grid Selection Change

Como recordatorio, en una versión importante de App Builder el año pasado expusimos varios controladores de eventos de componentes, que son fundamentales en el contexto de la gestión de variables.

Los eventos clave incluyen: 

  • Evento de cambio de selección: se utiliza en el componente Combo.
  • Evento de cambio de selección de fila: se emplea en los componentes de cuadrícula y cuadrícula de árbol.
  • Evento de clic: Disponible para todos los componentes, este evento se utiliza en el contexto de la configuración de una variable tras una acción de clic.
  • Eventos de componentes específicos. El componente Stepper, por ejemplo, expone las siguientes acciones: Paso siguiente/anterior, Restablecer e Ir al paso (x).

Consulte este tema para obtener más información: Trabajar con eventos y acciones en App Builder.

También se han añadido nuevas propiedades de componentes de árbol en esta versión App Builder

Se agregaron propiedades de componente de árbol para la expansión de un solo nodo y alternar al hacer clic en el elemento.

  • Expansión de un solo nodo: si está habilitado, solo se expandirá un nodo de árbol a la vez. Al intentar abrir un segundo, el primero colapsará.
  • Alternar elemento al hacer clic: esta es una propiedad que alterna el estado de expansión/contracción al hacer clic en los nodos, no solo en el icono de expansión/contracción.
Tree Component new properties

Otras mejoras

Envolver

En conclusión, App Builder cambia las reglas del juego en el proceso de desarrollo de aplicaciones. Con su creador visual basado en la nube, capacidades de código bajo y nuevas funciones, es una herramienta imprescindible para cualquier organización. ¡Pruébalo hoy! Si necesita más detalles, le recomendamos que consulte nuestro:

Para experimentar todo, 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 cuéntame cómo podemos ayudarte a seguir ofreciendo valor a tus clientes con Infragistics.

App Builder Release: Two-Way Data Binding, Datasource OpenAPI Schema Update & More
Desarrollo Web Código bajo
Creador de aplicaciones Lanzamiento de App Builder Código bajo Desarrollo Low Code Lanzamiento del producto
Reserve una demostración
Facebook Instagram Twitter Linkedin Youtube