Saltar al contenido

Introducción a Vinyl 3.3: Mejoras en la Interfaz de Usuario e Informes

Mejoras en la Interfaz de Usuario/ux

En esta sección revisaremos algunos métodos que se pueden utilizar para mejorar la apariencia general de una aplicación. La primera característica que revisamos son los conjuntos de control, que son grupos (o contenedores) que se pueden usar para agrupar información similar para que el usuario la entienda o interprete más fácilmente.

Agregar un Conjunto de Controles a la Página del Producto

Primero, creamos un conjunto de controles en la página Producto para Precio y Unidad de medida. Luego agregará un conjunto de controles similar a la página Productos.

Una imagen que muestra el conjunto de controles creado en la página Producto:

precio uom control establecido en la página del producto

  1. Navegue hasta la página de vista de aplicación Producto.

  2. Vaya al Cajón de acciones > Live Designer.

  3. Seleccione el botón Controles para el panel Producto.

  4. Haga clic en el botón + Control.

  5. Establezca Tipo de control en Grupo.

  6. Asigne el Nombre como Price / UOM.

  7. Establezca el Tipo de diseño en Lado a lado.

  8. Confirme que Método de tamaño esté configurado en Comprimir.

  9. Haga clic en el botón Siguiente.

  10. Confirme y haga clic en el botón Finalizar.

  11. Haga clic en la pestaña Todos los controles.

  12. Establezca el valor Padre para Precio en Precio / UOM (Grupo).

  13. Establezca el valor Padre para Unidad de medida en Precio / UOM (grupo).

  14. Cambie el valor de Pedido para Unidad de medida a 35, de modo que Precio se mostrará antes de UOM.

  15. Cambie el valor de Pedido para Está activo a 80, de modo que Está activo se mostrará después de Precio / UOM.

  16. Cierre Live Designer y confirme las actualizaciones.

Práctica: Agregue un Conjunto de Controles a la Página de Productos

Siguiendo el proceso utilizado para agregar un conjunto de controles a la página Producto, agregue un Conjunto de controles de precio / UOM a la página Productos.

Configure los Controles Según Sea Necesario

En esta sección, explicaremos cómo puede configurar manualmente un control para que sea Requerido para guardar un registro. Los controles obligatorios se indican en Vinyl mediante la aparición de una barra vertical azul en el lado izquierdo del campo correspondiente. Para este ejercicio usaremos la página Producto.

La página Producto con controles configurados en Obligatorio:

página del producto con controles configurados como obligatorios

  1. Navegue a la página Producto.

  2. Vaya a Cajón de acciones > Live Designer.

  3. Seleccione el panel Producto.

  4. Haga clic en la pestaña Todos los controles.

  5. Abra el detalle de control Producto.

  6. Haga clic en la pestaña Posición y ancho.

  7. Establezca Opciones de edición en Obligatorio.

  8. Haga clic en el botón Guardar.

  9. Repita los pasos para configurar todos los controles en el panel Producto para que sean Requeridos.

  10. Cierre Live Designer y confirme las actualizaciones haciendo clic en el botón Editar y revisando la apariencia del control.

Agregar Conjuntos de Controles a la Página de Clientes

En esta sección moveremos los controles Ciudad, Estado y Código postal a un conjunto de controles para la página Clientes.

  1. Navegue a la página Clientes.

  2. Vaya al Cajón de acciones > Live Designer.

  3. Seleccione el panel Clientes.

  4. Haga clic en la pestaña Todos los controles.

  5. Haga clic en el botón + Control.

  6. Establezca Tipo de control en Grupo.

  7. Asigne el Nombre como City State Postal Code.

  8. Haga clic en el botón Siguiente.

  9. Confirme y haga clic en Finalizar.

  10. Establezca el valor Padre para Ciudad en Código postal del estado de la ciudad (grupo).

  11. Establezca el valor Padre para Estado en Código postal del estado de la ciudad (grupo).

  12. Establezca el valor Padre para Código postal en Código postal de ciudad y estado (grupo).

  13. Abra los detalles de Ciudad y establezca el valor de Ancho en 20.

  14. Abra los detalles de Estado y establezca el valor de Ancho en 6.

  15. Abra los detalles de Postal y establezca el valor de Ancho en 9.

  16. Cambie el valor de Pedido para el control Código postal del estado de la ciudad establecido en 35, de modo que la información siga a la Dirección en la capa de interfaz de usuario de la aplicación.

  17. Cierre Live Designer y confirme las actualizaciones.

Práctica: Agregue Conjuntos de Controles Adicionales

Agregue un control Código postal de ciudad estado establecido en las páginas Cliente, Pedidos y Pedido.

Cambiar el Tipo de Panel de Productos a Mosaico

  1. Navegue a la página Productos.

  2. Vaya al Cajón de acciones > Live Designer.

  3. Seleccione el panel Productos.

  4. Establezca el Tipo de panel en Mosaico.

  5. Haga clic en el botón Guardar.

  6. Haga clic en la pestaña Todos los controles.

  7. Abra el detalle del conjunto de control Precio / UDM.

  8. Establezca Bordes de grupo en Oculto.

  9. Abre el detalle de Precio.

  10. Seleccione la pestaña Etiqueta.

  11. Establezca Visibilidad de etiquetas en Oculto.

  12. Haga clic en el botón Guardar.

  13. Abra el detalle de Unidad de medida.

  14. Seleccione la pestaña Etiqueta.

  15. Establezca Visibilidad de etiquetas en Oculto.

  16. Haga clic en el botón Guardar.

  17. Cierre Live Designer y confirme las actualizaciones.

Agregar una Dirección de Clasificación Ascendente

En esta sección explicamos cómo aplicar una Ordenación en un control. Aquí ordenaremos de forma ascendente en el control Producto para que los Productos mostrados se ordenen alfabéticamente de la A a la Z, según el valor del Producto.

La página Productos ahora está ordenada alfabéticamente por Producto:

la página de productos ahora está ordenada alfabéticamente por producto

  1. Desde la página Productos, navegue hasta Action Drawer > Live Designer.

  2. Seleccione el control Producto en el panel Productos.

  3. Haga clic en la pestaña Posición y ancho.

  4. Establezca la Dirección de clasificación en ASC.

  5. Haga clic en el botón Guardar.

  6. Cierre Live Designer y confirme las actualizaciones.

Agregar un Mapa de Google al Cliente

En esta sección agregaremos un mapa de Google a la página Cliente para mejorar la información que se muestra al usuario de la aplicación.

Nota

Google Maps requiere información de dirección válida para mostrar el mapa correctamente.

  1. Navegue hasta la página de vista de la aplicación Cliente.

  2. Vaya al Cajón de acciones > Live Designer.

  3. Haga clic en el botón + Panel.

  4. Seleccione el fichaFormulario.

  5. Haga clic en el botón Siguiente.

  6. Seleccione Cliente (objeto de negocio).

  7. Haga clic en el botón Siguiente.

  8. Seleccione Elegir manualmente.

  9. Haga clic en el botón Siguiente.

  10. Revise y haga clic en Finalizar.

  11. Seleccione el nuevo panel Cliente2.

  12. Modifique el Nombre del panel para que sea Map.

  13. Haga clic en el botón Guardar.

  14. Haga clic en el botón + Control.

  15. Establezca Tipo de control en Plantilla.

  16. Asigne el nombre como Map.

  17. Configure la modelo en Vista de mapa de Google Maps por dirección interactiva.

  18. Haga clic en el botón Siguiente.

  19. Revise y haga clic en Finalizar.

  20. Haga clic en el botón Encuadernación.

  21. Confirme que existen registros vinculantes que asignan la Dirección, Ciudad y el Estado del Parámetro de plantilla al Valor o Nombre.

  22. Haga clic en X para salir de la pantalla Enlaces.

  23. Seleccione el panel Cliente.

  24. Establezca el valor de tamaño de página Ancho en Grande.

  25. Haga clic en el botón Guardar.

  26. Cierre Live Designer y confirme las actualizaciones.

Mejoras Adicionales de UI / UX

En esta sección, analizaremos algunas mejoras adicionales de UI / UX que se pueden realizar en nuestra aplicación Global Imports. Primero, reordenaremos el control Está activo en la página Producto. Este control normalmente debería mostrarse como el último valor en una pantalla. En segundo lugar, veremos el uso del tipo de control Autocompletar, que brinda a los usuarios la opción de completar la sintaxis, el texto o los valores seleccionando en un menú desplegable.

  1. Navegue hasta la página de vista de la aplicación Cliente.

  2. Vaya a Cajón de acciones > Live Designer.

  3. Seleccione el panel Cliente.

  4. Seleccione la pestaña Todos los controles.

  5. Abra los detalles del control Estado.

  6. Cambie el valor de Tipo de control a Autocompletar.

  7. Haga clic en el botón Guardar.

  8. Cierre Live Designer y confirme las actualizaciones probando agregar un nuevo registro de Cliente.

Informes

Ahora que hemos desarrollado la base de nuestra aplicación, veremos algunas opciones de informes. Vinyl tiene opciones intuitivas y accesos directos disponibles para que los informes estén disponibles rápidamente en una aplicación.

Crear un Gráfico de Productos por Categoría

Un gráfico que muestra Productos por Categoría:

gráfico de productos por categoría

  1. Desde la aplicación, navegue hasta Action Drawer > Design Center.

  2. Haga clic en el botón + Página.

  3. Ingrese un Nombre para la página. Por ejemplo: Products by Category.

  4. Haga clic en el botón Siguiente.

  5. Seleccione Informes como menú.

  6. Haga clic en el botón Siguiente.

  7. Seleccione Página completa como diseño.

  8. Haga clic en el botón Siguiente.

  9. Confirme y haga clic en el botón Finalizar.

  10. Haga clic en el botón Continuar.

  11. Seleccione la opción de informe Gráfico.

  12. Haga clic en el botón Siguiente.

  13. Haga clic en el botón + Nueva fuente.

  14. Asigne el Nombre como Product (Count By Category).

  15. Establezca Tipo de gráfico en Columna.

  16. Establezca Objetivo en Producto.

  17. Haga clic en el botón Crear.

  18. Seleccione CategoryID y ProductID de la tabla Product.

  19. Haga clic en la pestaña Columnas.

  20. Confirme que CategoryID tenga Usage Type establecido en Category.

  21. En el campo Columna o Expresión para ProductID, ajuste el ID del producto con la expresión Count() para que aparezca como Count(ProductID):

    contar expresión alrededor de la columna de identificación del producto

  22. Haga clic en el botón Continuar.

  23. Confirme que Count(ProductID) tenga Tipo de uso establecido como Valor y Alias sea Productos.

  24. Haga clic en el botón Continuar.

  25. Seleccione Producto (Contar por categoría).

  26. Haga clic en el botón Siguiente.

  27. Confirme y haga clic en el botón Finalizar.

Práctica: Crear un Gráfico de Clientes por Estado

Siguiendo el proceso utilizado para crear el gráfico Productos por categoría, cree un gráfico Clientes por estado:

clientes por cuadro estatal

Crear un Mapa de Clientes

En este paso, cree una página llamada Mapa del cliente que se conecte al menú Informes. Las instrucciones para completar el panel Mapa se encuentran a continuación.

mapa de clientes

  1. Desde la aplicación, navegue hasta Cajón de acciones > Centro de diseño.

  2. Haga clic en el botón + Página.

  3. Introduzca un nombre para la página. Por ejemplo: Customer Count By State.

  4. Haga clic en el botón Siguiente.

  5. Seleccione Informes como Menú.

  6. Haga clic en el botón Siguiente.

  7. Seleccione Página completa como diseño.

  8. Haga clic en el botón Siguiente.

  9. Confirme y haga clic en el botón Finalizar.

  10. Haga clic en el botón Continuar.

  11. Seleccione el tipo de panel Mapa.

  12. Haga clic en el botón Siguiente.

  13. Haga clic en el botón + Nueva fuente.

  14. Asigne el nombre como Cliente (Contar por estado).

  15. Establezca el propósito como Mapa.

  16. Establezca el objetivo en Cliente.

  17. Seleccione Estado y luego ClienteID de la tabla Cliente.

  18. Haga clic en la pestaña Columnas.

  19. Confirme que el control Estado tenga Tipo de uso establecido en Categoría.

  20. En el campo Columna o Expresión para CustomerID, ajuste el ID del cliente con la expresión Count() para que aparezca como Count(“C.”CustomerID ).

  21. Haga clic en el botón Continuar.

  22. Confirme que Count(“C.”CustomerID) tenga Tipo de uso establecido como Valor y Alias como Clientes.

  23. Haga clic en el botón Continuar.

  24. Seleccione la regla comercial Cliente (Mapa).

  25. Haga clic en el botón Siguiente.

  26. Haga clic en el botón Finalizar.

  27. Confirme que ahora ve una página Mapa de clientes con un panel de mapa que muestra el recuento de clientes por estado.

Panel

En esta sección crearemos una página Panel en nuestra aplicación Importaciones globales. Los paneles se utilizan a menudo en las aplicaciones de Vinyl para transmitir datos de indicadores clave de rendimiento (KPI) a la gerencia y a los ejecutivos. El panel que construimos mostrará el mapa de clientes vinculado a una lista de clientes, una lista correspondiente de pedidos debajo de la lista de clientes y producto por categoría.

Nota

En este escenario, estamos reutilizando gráficos que ya se han creado y validado.

Crear los Paneles del Tablero

  1. Desde la aplicación, navegue hasta Cajón de acciones > Centro de diseño.

  2. Haga clic en el botón + Página.

  3. Asigne el Nombre de la página como Dashboard.

  4. Haga clic en el botón Siguiente.

  5. Seleccione Inicio como menú.

  6. Haga clic en el botón Siguiente.

  7. Seleccione el ficha 2x2 como opción Diseño de paneles múltiples.

  8. Haga clic en el botón Siguiente.

    Panel de cuadrícula de 2 por 2 para seleccionar el diseño de página

  9. Confirme y haga clic en el botón Finalizar.

  10. Haga clic en el botón Continuar en la cuadrícula superior izquierda.

  11. Haga clic para seleccionar el fichaMapa.

  12. Haga clic en el botón Siguiente.

  13. Seleccione la regla comercial Cliente (Mapa).

  14. Haga clic en el botón Siguiente.

  15. Confirme y haga clic en el botón Finalizar.

  16. Cambie el nombre del Nombre del panel a Map.

  17. Haga clic en el botón Continuar en la cuadrícula superior derecha.

  18. Haga clic para seleccionar el diseño del panel Mosaico.

  19. Haga clic en el botón Siguiente.

  20. Seleccione el objeto comercial Cliente.

  21. Haga clic en el botón Siguiente.

  22. Seleccione Elegir manualmente.

  23. Haga clic en el botón Siguiente.

  24. Seleccione los siguientes controles para agregar:

    1. Cliente

    2. Dirección

    3. Ciudad

    4. Estado

    5. Código postal

  25. Haga clic en el botón Siguiente.

  26. Confirme y haga clic en el botón Finalizar.

  27. Para que este panel esté conectado al mapa del cliente, necesitamos agregar información vinculante. Abra Live Designer y seleccione el panel Clientes.

  28. Haga clic en el botón Enlaces de Panel principal y enlaces.

  29. Haga clic en el botón + Encuadernación.

  30. Establezca la Columna secundaria en Estado.

  31. Establezca la Columna principal en Estado.

  32. Haga clic en el icono de marca de verificación para guardar.

  33. Haga clic en X para salir de la pantalla Columnas vinculantes.

  34. Haga clic en el botón Continuar en la cuadrícula inferior derecha.

  35. Seleccione el fichaCuadrícula.

  36. Haga clic en el botón Siguiente.

  37. Seleccione Pedido (objeto de negocio).

  38. Haga clic en el botón Siguiente.

  39. Seleccione Elegir manualmente.

  40. Haga clic en el botón Siguiente.

  41. Seleccione los controles Dirección y FechaPedido.

  42. Haga clic en el botón Siguiente.

  43. Confirme y haga clic en el botón Finalizar.

  44. Confirme que Panel principal y enlace esté configurado en Clientes (mosaico).

  45. Haga clic en el botón Enlaces.

  46. Confirme que existe un registro vinculante que asigna CustomerID a CustomerID.

  47. Haga clic en X para salir de la pantalla Columnas vinculantes.

  48. Haga clic en el botón Continuar en la cuadrícula inferior izquierda.

  49. Seleccione el tipo de panel Gráfico.

  50. Haga clic en el botón Siguiente.

  51. Seleccione Producto (Contar por categoría).

  52. Haga clic en el botón Siguiente.

  53. Confirme y haga clic en el botón Finalizar.

  54. Revise la página Panel.

Mejoras en el Panel

Si observamos la página actual del Panel, podemos hacer algunas mejoras:

  • Eliminar capacidades de edición, eliminación y creación para que la información sea de solo lectura.

  • Reposicione el botón Panel para que esté en la parte superior.

Página del Panel de la aplicación Global Imports:

página del panel de la aplicación de importaciones globales

  1. Desde la vista de diseño de la página Panel, haga clic para seleccionar el panel Pedidos.

  2. Haga clic en la pestaña Métodos de actualización.

  3. Establezca el método Editar en No.

  4. Establezca el método Insertar en No.

  5. Establezca el método Eliminar Compatible en No.

  6. Haga clic en el botón Guardar.

  7. Regrese a la página de inicio de la aplicación, actualice el navegador y confirme las actualizaciones.

  8. Regrese a la vista de diseño de la página Panel.

  9. Haga clic para seleccionar el panel Pedidos.

  10. Haga clic en la pestaña Métodos de actualización.

  11. Configure Enlace a página como Pedido.

  12. Haga clic en el botón Guardar.

  13. Desde la página de inicio de la vista de aplicaciones, vaya a Action Drawer > Design Center.

  14. Haga clic en el botón Menús.

  15. Haga clic en el ícono de edición de lápiz para el menú de la página de inicio.

  16. Cambie el Pedido de Panel a 5.

  17. Regrese a la página de inicio de la aplicación, actualice el navegador y confirme las actualizaciones.