01. VISIÓN GENERAL

Este documento tiene la finalidad de definir el estándar de desarrollo para los productos de la Línea BackOffice Protheus que utilicen componentes en PO UI, con la finalidad de crear una experiencia de uso única a los usuarios para que no necesiten adaptarse a cada nueva pantalla creada.

02. DEFINICIONES


Browse

Todas las leyendas o estatus utilizados en un Browse deben cumplir las siguientes orientaciones:

  • Alineación a la izquierda de la tabla.
  • Utilizar preferencialmente el formato “labels”.
  • Evitar leyendas/estatus largos
    • Utilización de tooltip para detallar el estatus, si es necesario.
  • Tamaño del label fijo, considerando el texto de mayor tamaño.




Las columnas de un browse, deben seguir el mismo formateo y nombre del Protheus.

  • Títulos de campos utilice del diccionario SX3
  • Ordenación, lista de campos de la SX3



Se definió que para la opción de filtro avanzado se debe utilizar el estándar del slide, según el siguiente modelo propuesto:


Para el comportamiento del filtro del Browse en PO UI, se definió que este ocurrirá automáticamente, es decir, cuando el usuario no digite en el campo de búsqueda por un intervalo superior a 3 segundos, se debe ejecutar una nueva búsqueda en el Back-End automáticamente, y se interrumpe si el usuario continua digitando, esperando así un nuevo intervalo sin digitación para que la búsqueda se realice nuevamente. Vea el siguiente ejemplo del comportamiento de búsqueda automática, sin la necesidad de informar el código completo ni activar el botón de búsqueda:



  • Los botones de un browser que definen las actividades iniciales, se ubican a la izquierda seguido de un filtro con la opción de búsqueda avanzada.



  • Un Browser que no tenga en sus definiciones iniciales botones, pero muestra la opción de Búsqueda y Búsqueda Avanzado, se alinean junto al título.
  • Los botones ubicados en el footer (pie de página) se alinean a la derecha, y si hubieran muchas opciones utilice dropdown con acciones de la pantalla en un único lugar, para no perder el dinamismo de la pantalla. 


Referencias:



Cuando sea necesario definir algún color manualmente por medio de algún componente, card o gráfico, se deben priorizar los colores estándar del PO UI.


Para rutinas donde haya una mayor necesidad de colores o variaciones de tonalidad, se podrán utilizar los colores estándar en el método GetColorChart de la clase CoreDash, según el detalle de la clase. Si es necesario un número mayor de colores, se deben alinear previamente e incluir los nuevos colores en la siguiente paleta de colores para utilizar todo el BackOffice.


Tonos de color gris

Color

Código Hexadecimal

Código RGBA

Código PO-UI

Id Dashboard

#c8c8d2200, 200, 210, 1-12

#c0c0c0

192, 192, 192, 1-11

#708090112, 128, 144, 1-27

Tonos de color azul

Color

Código Hexadecimal

Código RGBA

Código PO-UI

Id Dashboard

#32a5ff50, 165, 255, 1-

10

#0078ff0, 120, 255, 1-

9

#0c9abe12, 154, 190, 1color-01-

#2c85c8

44, 133, 200, 1

color-02-

#2c43c844,  67, 200, 1color-03-

#5843c888,  67, 200, 1color-04-

#0000cd0, 0, 205, 1-20

#19197025, 25, 112, 1-19


Tonos de color verde

ColorCódigo HexadecimalCódigo RGBACódigo PO-UIId Dashboard

#abc249171, 194, 73, 1color-09-

#56b96b86, 185, 107, 1color-10-

#00b28e0, 178, 142, 1color-111

#06a6a56, 166, 165, 1color-12-

#00c9a10, 201, 161, 1-2

#adff2f173, 255, 47, 1-23

#228b2234, 139, 34, 1-22

#0064000, 100, 0, 1-21

Tonos de color marrón

ColorCódigo HexadecimalCódigo RGBACódigo PO-UIId Dashboard

#a05028160, 80, 40, 1-16

#800000128, 0, 0, 1-15

Tonos de color violeta

ColorCódigo HexadecimalCódigo RGBACódigo PO-UIId Dashboard

#ab43c8171, 67, 200, 1color-05-

#ab4391171, 67, 145, 1color-06-

#b923b9185, 35, 185, 1-14

#800080128, 0, 128, 1-13

Tonos de color rosa

ColorCódigo HexadecimalCódigo RGBACódigo PO-UIId Dashboard

#ff78ff255, 120, 255, 1-18

#ff00ff255, 0, 255, 1-17

Tonos de color rojo


ColorCódigo HexadecimalCódigo RGBACódigo PO-UIId Dashboard

#fa8072250, 128, 114, 1-24

#c64840198, 72, 64, 1color-073

#e34940227, 73, 64, 1-4

Tonos de color naranja

ColorCódigo HexadecimalCódigo RGBACódigo PO-UIId Dashboard

#ffa236255, 162, 54, 1-8

#ea9b3e234, 155, 62, 1color-087

Tonos de color amarillo

ColorCódigo HexadecimalCódigo RGBACódigo PO-UIId Dashboard

#fccb4c252, 203, 76, 1-5

#ffd464255, 212, 100, 1-6

Tonos de color pastel

ColorCódigo HexadecimalCódigo RGBACódigo PO-UIId Dashboard

#d2b48c210, 180, 140, 1-25

#f5deb3245, 222, 179, 1-26

#ffe4e1255, 228, 225, 1-28

A pesar de las particularidades de cada proyecto, reservamos algunos colores de leyenda que se deben utilizar, siempre y cuando sea necesario representar el estatus atribuido a esta. Los demás estatus que no se definieron en este estándar tendrán sus colores atribuidos por el producto de manera individual, considerando sus necesidades.

Los estatus definidos son:

  • "Inhabilitado" o "Finalizado"  - Color rojo (color-10)
  • "Habilitado" y "Pendiente"     - Color verde (color-07)
ColorCódigo HexadecimalCódigo RGBAEjemplo color
color-07#c64840rgba( 198, 72,  64, 1)

color-10#56b96brgba( 86, 185, 107, 1)

Presentación de datos

LGPD - Ofuscamiento de los campos

Se definió que el estándar de ofuscamiento de los campos para la LGPD será la presentación de una TAG con la palabra RESTRINGIDO.

Componente: po-tag, color-07, p-inverse=true

Ejemplo de uso:





Acceso por medio del Protheus:


El idioma que se presentará en las rutinas debe ser el mismo seleccionado en el acceso realizado en el SmartClient, según la siguiente imagen:


Acceso por el Mingle:


Al utilizar las rutinas en PO UI por medio del navegador, utilizando el Acceso del Mingle, también se debe presentar el idioma que se seleccionó en el Acceso, de  acuerdo con lo siguiente, aunque el idioma del navegador sea diferente:



OBS: El idioma seleccionado previamente en la pantalla de Acceso del Mingle, debe estar de acuerdo con lo que está configurado en el navegador, si hubiera un idioma traducido equivalente, y si no hubiera traducción para el idioma del navegador, se debe utilizar el estándar Portugués, pero si se modifica manualmente se utilizará el idioma que seleccionó el usuario.



La presentación de campos numéricos y/o monetarios deben seguir el mismo estándar utilizado en aplicaciones del ERP Protheus, es decir, siguiendo las definiciones utilizadas en la configuración de los entornos respectivos por medio de la clave PICTFORMAT, cuando la misma esté configurada como ESTÁNDAR el formato de presentación debe ser ',' (coma) como separador de decimal y '.' (punto) como separador de millar, cuando esté configurado como AMERICAN el formato de presentación debe ser '.' (punto) como separador de decimal y ',' (coma) como separador de millar, aun cuando en el diccionario de datos del campo correspondiente, el picture (X3_PICTURE) esté definido como '@E'.


OBS: Para verificar el contenido de claves del AppServer dentro de las API, se puede utilizar la función GetSrvProfString.


Selección/Cambio de sucursales

Esta solución se debe utilizar solamente en aplicaciones externas, aplicaciones embarcadas en el Protheus deben utilizar la empresa y sucursal que fue estándar.


  • Al acceder a la aplicación, se debe utilizar la empresa y sucursal registrada como estándar en el TOTVS Mingle.
  • La selección o cambio de sucursales debe ocurrir solo después de que el usuario Acceda (Entrar) a la aplicación.
  • La opción de Cambio de Sucursales debe ser una opción del Toolbar y debe seguir el siguiente modelo:



Nueva versión del .app

Objetivo: Dejar registrado en esta página la documentación oficial y algunas sugerencias para implementar el pipeline-poui.

Pipelines de CI/CD

El objetivo de una pipeline es automatizar el proceso de entrega de software en producción de manera rápida, al mismo tiempo garantizando su estabilidad, calidad y resiliencia.


Documentación completa del equipo de DEVOPS sobre el pileline-poui

https://code.engpro.totvs.com.br/engpro-devops/pipeline-poui


Expedición del .app

Ejemplo de generación de una nueva versión estable en el gitea

Ubicado en su repositorio remoto, en la Branch en que se basará su nueva versión, ejecute los siguientes comandos (utilice el terminal git de su preferencia):


Accediendo al repositorio en el gitea, en la solapa Versiones, tendremos una nueva tag con el estatus de versión previa:

Antes de cambiar la versión al estatus de Estable, es importante verificar si todos los pasos del drone se ejecutaron con éxito:


Para cambiar el estatus de la versión a Estable, haga clic en Editar en el título de la versión:


En la pantalla que se presentará, desmarque la opción "Marcar como registro previo":


Después de este último paso, la versión quedará con el estatus de Estable y lista para compilarla en el D-1, si su webhook (consulte la documentación) ya está configurado:






Documentación API

El estándar para la documentación de las API utilizado es el OpenAPI v3.

Para agilizar la documentación tenemos la herramienta de la Ingeniería con interfaz gráfica en el enlace:  OpenAPI-GUI v3

Otra herramienta es la extensión OpenAPI del VSCode. En esta podemos escribir el archivo yml y visualizar utilizando el Swagger UI.



Definición...

Ejemplo:





Vea los siguientes enlaces de acceso a los documentos de las FAQ de Productos del BackOffice, desarrollados en el PO UI con el  público objetivo general, es decir, se destina a Desarrolladores, Soporte Técnico y también a Clientes:


FAQ - Dashboard BackOffice


FAQ - Portal Gestión de Ventas


FAQ - Seguimiento de Costos (OBS: Al final de la página)


Vea los siguientes enlaces de acceso a los documentos de una FAQ destinada al equipo de Soporte Técnico, para apoyo a la atención de tickets de clientes:


PO UI - Documento de apoyo al soporte




Próximo Tópico

Definición...

Ejemplo:





03. LAS API DESARROLLADAS