Expandir |
---|
| 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.
|
Expandir |
---|
| 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
|
Expandir |
---|
title | Búsqueda / Filtro avanzado |
---|
| Se definió que para la opción de filtro avanzado se debe utilizar el estándar del slide, según el siguiente modelo propuesto:
|
Expandir |
---|
title | Busca Búsqueda / Comportamiento del filtro |
---|
| 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:
|
Expandir |
---|
title | Ubicación- Botones y filtro |
---|
| - 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:
|
Expandir |
---|
| Aviso |
---|
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.
Expandir |
---|
title | Lista de colores estándar |
---|
| Tonos de color grisColor | Código Hexadecimal | Código RGBA | Código PO-UI | Id Dashboard |
---|
| #c8c8d2 | 200, 200, 210, 1 | - | 12 | | | 192, 192, 192, 1 | - | 11 | | #708090 | 112, 128, 144, 1 | - | 27 |
Tonos de color azulColor | Código Hexadecimal | Código RGBA | Código PO-UI | Id Dashboard |
---|
| #32a5ff | 50, 165, 255, 1 | - | | | #0078ff | 0, 120, 255, 1 | - | | | #0c9abe | 12, 154, 190, 1 | color-01 | - | | #2c85c8 | 44, 133, 200, 1 | color-02 | - | | #2c43c8 | 44, 67, 200, 1 | color-03 | - | | #5843c8 | 88, 67, 200, 1 | color-04 | - | | #0000cd | 0, 0, 205, 1 | - | 20 | | #191970 | 25, 25, 112, 1 | - | 19 |
Tonos de color verdeColor | Código Hexadecimal | Código RGBA | Código PO-UI | Id Dashboard |
---|
| #abc249 | 171, 194, 73, 1 | color-09 | - | | #56b96b | 86, 185, 107, 1 | color-10 | - | | #00b28e | 0, 178, 142, 1 | color-11 | 1 | | #06a6a5 | 6, 166, 165, 1 | color-12 | - | | #00c9a1 | 0, 201, 161, 1 | - | 2 | | #adff2f | 173, 255, 47, 1 | - | 23 | | #228b22 | 34, 139, 34, 1 | - | 22 | | #006400 | 0, 100, 0, 1 | - | 21 |
Tonos de color marrónColor | Código Hexadecimal | Código RGBA | Código PO-UI | Id Dashboard |
---|
| #a05028 | 160, 80, 40, 1 | - | 16 | | #800000 | 128, 0, 0, 1 | - | 15 |
Tonos de color violetaColor | Código Hexadecimal | Código RGBA | Código PO-UI | Id Dashboard |
---|
| #ab43c8 | 171, 67, 200, 1 | color-05 | - | | #ab4391 | 171, 67, 145, 1 | color-06 | - | | #b923b9 | 185, 35, 185, 1 | - | 14 | | #800080 | 128, 0, 128, 1 | - | 13 |
Tonos de color rosaColor | Código Hexadecimal | Código RGBA | Código PO-UI | Id Dashboard |
---|
| #ff78ff | 255, 120, 255, 1 | - | 18 | | #ff00ff | 255, 0, 255, 1 | - | 17 |
Tonos de color rojo
Color | Código Hexadecimal | Código RGBA | Código PO-UI | Id Dashboard |
---|
| #fa8072 | 250, 128, 114, 1 | - | 24 | | #c64840 | 198, 72, 64, 1 | color-07 | 3 | | #e34940 | 227, 73, 64, 1 | - | 4 |
Tonos de color naranjaColor | Código Hexadecimal | Código RGBA | Código PO-UI | Id Dashboard |
---|
| #ffa236 | 255, 162, 54, 1 | - | 8 | | #ea9b3e | 234, 155, 62, 1 | color-08 | 7 |
Tonos de color amarilloColor | Código Hexadecimal | Código RGBA | Código PO-UI | Id Dashboard |
---|
| #fccb4c | 252, 203, 76, 1 | - | 5 | | #ffd464 | 255, 212, 100, 1 | - | 6 |
Tonos de color pastelColor | Código Hexadecimal | Código RGBA | Código PO-UI | Id Dashboard |
---|
| #d2b48c | 210, 180, 140, 1 | - | 25 | | #f5deb3 | 245, 222, 179, 1 | - | 26 | | #ffe4e1 | 255, 228, 225, 1 | - | 28 |
|
|
Expandir |
---|
| 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)
Color | Código Hexadecimal | Código RGBA | Ejemplo color |
---|
color-07 | #c64840 | rgba( 198, 72, 64, 1) | | color-10 | #56b96b | rgba( 86, 185, 107, 1) | |
|
|