App Builder Lanzamiento con acciones CRUD de cuadrícula, compatibilidad con enlaces de datos anidados, agregaciones de gráficos de categorías y más

La actualización de febrero de App Builder ^TM ya está aquí y está repleta de nuevas y emocionantes características. Si aún no has oído hablar de App Builder, déjame decirte por qué es una herramienta imprescindible para el proceso de desarrollo de aplicaciones de tu organización:

• Un creador de aplicaciones visual: la plataforma unificada para gerentes de productos, diseñadores y desarrolladores.
• 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 de bajo código que produce código brillante Angular, Blazor o Web Components (React next) a partir de sus archivos de diseño Sketch o Figma.

Todo lo nuevo y emocionante del App Builder Low-Code de Infragistics

Aquí hay un resumen rápido de las novedades y lo emocionante en App Builder

Funciones

• Configure los métodos de API REST POST/PUT/DELETE al crear una fuente de datos basada en la definición de OpenAPI.
• Nueva acción de datos para crear, actualizar y eliminar registros en el componente Cuadrícula.
• Utilice datos de tipo jerárquico en Tree-Grid y Tree component.
• Se ha agregado compatibilidad con el enlace de datos anidados al repetir componentes basados en datos jerárquicos.
• Agrupe y agregue datos en el gráfico de categorías cuando haya etiquetas repetidas.
• Se agregaron dos nuevas aplicaciones de ejemplo: Portal de aprendizaje y Gestión de inventario.

Mejoras

• Se agregó la propiedad Align-self para anular V.align y H.align definidos en el diseño principal (CSS Flex-box).
• Se ha añadido la propiedad Border-radius para establecer el redondeo de los componentes de diseño Fila/Columna/Absoluto​
• Mostrar el nombre de la aplicación como título de página en el navegador
• Seleccione todos los campos de datos al agregar una nueva colección de datos
• Se ha añadido una opción para maximizar el cuadro de diálogo Crear nueva aplicación​
• Corrección de errores y mejoras generales

Acciones CRUD de cuadrícula

Las funcionalidades de App Builder Grid están creciendo con otra más: acciones de creación, lectura, actualización y eliminación de cuadrícula con llamadas a la API web. Ahora puede conectarlos a los botones de acción de edición de cuadrícula y aprovechar las actualizaciones de la API web en tiempo real. Tras la generación del código, el App Builder creará los servicios necesarios para manejar las llamadas API para crear, obtener, actualizar y eliminar un recurso.

Si la cuadrícula está vinculada a una tabla de clientes (imagen 1 de la ruta de acceso de Swagger), la sección Interacciones de datos se cargará con los métodos disponibles para los clientes, al agregar dicha interacción (Imagen 2).

Imagen 1

Imagen 2

En el siguiente ejemplo, verá cómo usamos un servicio de API web de Northwind para obtener realmente todos los clientes, elegir un cliente específico con CustomerID "BERGS" y actualizar su CompanyName a "Probando la actualización". App Builder puede realizar una solicitud de datos real para modificar los datos remotos si el usuario final lo permite a través de la ventana de solicitud (activar la edición en vivo). Tenga en cuenta que hay dos estados de acceso a los datos en la vista previa de la aplicación. A la parte del editor/usuario autenticado del espacio de trabajo se le solicitarán directamente los estados de cambios en tiempo real (imagen a continuación). Se notificará al usuario del visor o que no forme parte del área de trabajo que no tiene acceso a la API web real y que usará datos ficticios en su lugar.

Se mostrará una barra de notificación en la parte inferior de la página advirtiendo al usuario final que cualquier cambio que se realice actualizará realmente los datos remotos. Puede desactivar esa función mediante el botón de acción Desactivar edición en vivo

Se mostrará una barra de notificación en la parte inferior de la página advirtiendo al usuario final que cualquier cambio que se realice actualizará los datos remotos:

Este es todo el proceso CRUD en acción:

Así es como se vería el código generado:

export class SwaggerNWindService {
  constructor(private http: HttpClient) { }

  public postCustomer(data: any): Observable<any> {
    const options = {
      headers: {
        Authorization: 'Bearer <auth_value>',
      },
    };
    const body = data;
    return this.http.post(`${API_ENDPOINT}/Customer`, body, options);
  }
  public putCustomer(data: any): Observable<any> {
    const options = {
      headers: {
        Authorization: 'Bearer <auth_value>',
      },
    };
    const body = data;
    return this.http.put(`${API_ENDPOINT}/Customer`, body, options);
  }
  public deleteCustomer(id: string): Observable<any> {
    const options = {
      headers: {
        Authorization: 'Bearer <auth_value>',
      },
    };
    return this.http.delete(`${API_ENDPOINT}/Customer/${id}`, options);
  }
  public getCustomer(): Observable<any> {
    const options = {
      headers: {
        Authorization: 'Bearer <auth_value>',
      },
    };
    return this.http.get(`${API_ENDPOINT}/Customer`, options);
  }
}

Compatibilidad con enlaces de iteradores jerárquicos

Aplicable a componentes como Árbol, Tarjetas y Contenedores. En el ejemplo siguiente se muestra cómo un árbol simple y una cuadrícula de árbol pueden vincularse a orígenes de datos con estructura jerárquica.

Revisemos el componente Árbol, notará cómo usamos la opción Repetir datos para vincular los elementos raíz y secundarios a un nivel jerárquico específico. Como el árbol es un componente declarativo y no tiene enlace de entrada de datos (en el nivel raíz del árbol), lo declaramos especificando la jerarquía de nodos e iterando a través del conjunto de datos jerárquico. Los nodos deben poder enlazarse a un modelo de datos para que sus estados expandidos y seleccionados también se reflejen en los datos subyacentes.

Función de agregación de gráficos

Ahora puede agrupar y agregar datos en el gráfico de categorías cuando hay etiquetas repetidas. La idea básica de esta función es muy similar a una cuadrícula. Supongamos que desea agrupar por Categoría (comestibles, hogar, restaurantes) y luego obtener el valor máximo de la columna Importe. Puede asignar esos datos al gráfico de categorías y, a continuación, especificar el grupo en Categoría y resúmenes para el importe máximo.

Otras capacidades:

• Permitir a los usuarios definir la agrupación (agregado) para los valores de campo de categoría de modo que solo se muestren etiquetas de categoría únicas en el eje horizontal
• Al seleccionar la opción Agregar, se aplicará automáticamente una agregación para todos los campos de valor seleccionados. El valor predeterminado es "SUM". Al eliminar la agregación de las etiquetas de categoría, se eliminará la agregación de todos los campos de valor.
• Los usuarios pueden cambiar individualmente la función de agregación de los campos de valor. Por ejemplo, SUMA de Cantidad -> AVG de Cantidad, pero no se puede eliminar individualmente
• Si bien la agregación está habilitada para el campo de categoría, cualquier campo de valor nuevo agregado, que no se haya incluido anteriormente, se agregará con una función de agregación predeterminada.
• Los campos de cadena de caracteres también se pueden agregar como valor, pero al hacerlo se habilitará automáticamente la agregación y se establecerá la función de agregación en COUNT para este campo
• Habilite SORT para cualquier campo (categoría o valor). Puede ascender/descender/ninguno. Solo se puede ordenar uno de los campos. Si un campo de valor se ordena como asc. y el usuario habilita la ordenación en un campo de valor o etiqueta de categoría diferente, se elimina la ordenación anterior y se aplica SORT en el campo seleccionado más recientemente. La ordenación sigue el orden SORT ASC -> SORT DESC. -> NINGUNO.
• Limitación: El mismo campo no se puede agregar más de una vez. Por lo tanto, los usuarios no podrán agregar SUMA de ProductSales y AVG de Product Sales juntas.

Nuevas aplicaciones de muestra

Se ha agregado una nueva aplicación de ejemplo que expone una interfaz de usuario para una variedad de funcionalidades.

Portal de aprendizaje

Aplicación de gestión del aprendizaje para realizar un seguimiento del progreso de los cursos basados en temas o instructores populares. Cuenta con listas personalizadas enlazadas a REST y diseños adaptables.

La gestión del inventario

Un panel de informes para administrar los niveles de inventario y revisar los productos en stock. Utiliza la navegación lateral personalizada para el enrutamiento y los gráficos de categorías para informar sobre el rendimiento.

Nueva versión local

App Builder Servidores de software locales que cada organización necesita con respecto a la seguridad de datos, el mantenimiento, el almacenamiento y el desarrollo de software. La versión local de AB proporciona una manera fácil para que las organizaciones accedan a dicha plataforma basada en la nube con facilidad, al permitirles usar su propia instancia y ejecutarla en su propia infraestructura, y ser accesible solo para el personal interno.

Requisitos previos e instalación locales.

Articulos interesantes

Consulta la lista de artículos en los que hemos estado trabajando últimamente:

• Reduzca la complejidad del software empresarial de misión crítica con herramientas de bajo código
• ¿Qué es el desarrollo rápido de aplicaciones?
• Soluciones de diseño a código explicadas
• Bibliotecas de componentes de UI: construir versus comprar

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:

• Canal Discord.
• Discusiones de GitHub.
• Mapa vial
• Canal de Youtube

Of course, if you feel we have missed anything or you have a question, just drop us a line on feedback@indigo.design.