| Expandir |
|---|
| Todas as legendas ou status utilizados em um Browse devem seguir seguintes orientações: - Alinhamento a esquerda da tabela;
- Utilizar preferencialmente o formato “labels”;
- Evitar legendas/status compridos
- Utilização de tooltip para detalhar o status, caso necessario.
- Tamanho do label fixo, considerando o texto de maior comprimento.
 Image Modified
|
| Expandir |
|---|
| As colunas de um browse, devem seguir a mesma formatação e nome do Protheus. • Títulos de campos utilizar do dicionário SX3 • Ordenação, lista de campos da SX3
|
| Expandir |
|---|
| title | Busca / Filtro Avançado |
|---|
| Foi definido que para a opção de filtro avançado deve ser utilizado o padrão de slide, conforme modelo proposto abaixo:  Image Modified
|
| Expandir |
|---|
| title | Posicionamento- Botões e filtro |
|---|
| - Os botões de um browser que definem as ações iniciais, posiciona-se a esquerda seguido de um filtro com a opção de busca avançada.
 Image Modified
- Um Browser que não tenha em suas definições iniciais botões porem apresenta a opção de busca e busca avançada alinhamos junto ao titulo.
- Os botões posicionado no footer (rodapé) alinhar a direita e caso tenha muitas opções utilizar dropdown dropdown com ações relacionadas porem não colocar todas as ações da tela em um único para não perder o dinamismo da tela.
 Image Modified
Referencias:
|
| Expandir |
|---|
| Quando for necessário definir alguma cor manualmente através de algum componente, card ou gráfico. Deverão ser priorizadas as cores padrão do PO UI que são:  Image Modified
| Expandir |
|---|
| | Cor | Código Hexadecimal | Código RGBA | Exemplo Cor |
|---|
| color-01 | #0c9abe | rgba( 12, 154, 190, 1) |  Image Modified
| | color-02 | #2c85c8 | rgba( 44, 133, 200, 1) |  Image Modified
| | color-03 | #2c43c8 | rgba( 44, 67, 200, 1) |  Image Modified
| | color-04 | #5843c8 | rgba( 88, 67, 200, 1) |  Image Modified
| | color-05 | #ab43c8 | rgba( 171, 67, 200, 1) |  Image Modified
| | color-06 | #ab4391 | rgba( 171, 67, 145, 1) |  Image Modified
| | color-07 | #c64840 | rgba( 198, 72, 64, 1) |  Image Modified
| | color-08 | #ea9b3e | rgba( 234, 155, 62, 1) |  Image Modified
| | color-09 | #abc249 | rgba( 171, 194, 73, 1) |  Image Modified
| | color-10 | #56b96b | rgba( 86, 185, 107, 1) |  Image Modified
| | color-11 | #00b28e | rgba( 0, 178, 142, 1) |  Image Modified
| | color-12 | #06a6a5 | rgba( 6, 166, 165, 1) |  Image Modified
|
|
Para rotinas onde haja uma necessidade maior de cores ou variações de tonalidade poderá ser utilizadas as cores padronizadas no método GetColorChart da classe CoreDash, conforme detalhamento da classe. Caso haja a necessidade de um número maior de cores, deverá ser alinhado previamente e incluídas as novas cores na paleta de cores abaixo para utilização de todo o BackOffice.
| Expandir |
|---|
| Sintaxe:CoreDash():GetColorChart() Descrição:Método responsável por retornar em um array todas as cores padronizadas para uso de gráficos DASH. Se for passado ao metodo o ID da cor, será retornado somente a cor solicitada. CoreDash():GetColorChart(X); Onde X é o ID da cor solicitada. Parâmetros: | Cor (Variável) | Descrição da Cor | ID | Código RGBA | Posição Array | Exemplo Cor |
|---|
| cGreenDk | Verde Escuro | 1 | rgba( 0,178,142, 1) | aArray[1][3] |  Image Modified
| | cGreenLht | Verde Claro | 2 | rgba( 0,201,161, 1) | aArray[2][3] |  Image Modified
| | cRedDk | Vermelho Escuro | 3 | rgba(198, 72, 64, 1) | aArray[3][3] |  Image Modified
| | cRedLht | Vermelho Claro | 4 | rgba(227, 73, 64, 1) | aArray[4][3] |  Image Modified
| | cYellDk | Amarelo Escuro | 5 | rgba(252,203, 76, 1) | aArray[5][3] |  Image Modified
| | cYellLht | Amarelo Claro | 6 | rgba(255,212,100, 1) | aArray[6][3] |  Image Modified
| | cOrangeDk | Laranja Escuro | 7 | rgba(234,155, 62, 1) | aArray[7][3] |  Image Modified
| | cOrangeLht | Laranja Claro | 8 | rgba(255,162, 54, 1) | aArray[8][3] |  Image Modified
| | cBlueDk | Azul Escuro | 9 | rgba( 0,120,255, 1) | aArray[9][3] |  Image Modified
| | cBlueLht | Azul Claro | 10 | rgba( 50,165,255, 1) | aArray[10][3] |  Image Modified
| | cGreyDk | Cinza Escuro | 11 | rgba(192,192,192, 1) | aArray[11][3] |  Image Modified
| | cGreyLht | Cinza Claro | 12 | rgba(200,200,210, 1) | aArray[12][3] |  Image Modified
| | cPurpleDk | Roxo Escuro | 13 | rgba(128, 0,128, 1) | aArray[13][3] |  Image Modified
| | cPurpleLht | Roxo Claro | 14 | rgba(185, 35,185, 1) | aArray[14][3] |  Image Modified
| | cBrownDk | Marron Escuro | 15 | rgba(128, 0, 0, 1) | aArray[15][3] |  Image Modified
| | cBrownLht | Marron Claro | 16 | rgba(160, 80, 40, 1) | aArray[16][3] |  Image Modified
| | cFuchsiaDk | Pink Escuro | 17 | rgba(255, 0,255, 1) | aArray[17][3] |  Image Modified
| | cFuchsiaLht | Pink Claro | 18 | rgba(255,120,255, 1) | aArray[18][3] |  Image Modified
| | cMnightBlue | Azul Meia Noite | 19 | rgba( 25, 25,112, 1) | aArray[19][3] |  Image Modified
| | cMediumBlue | Azul Médio | 20 | rgba( 0, 0,205, 1) | aArray[20][3] |  Image Modified
| | cDGreen | Verde | 21 | rgba( 0,100, 0, 1) | aArray[21][3] |  Image Modified
| | cFGreen | Verde Floresta | 22 | rgba( 34,139, 34, 1) | aArray[22][3] |  Image Modified
| | cGreenYel | Verde Limão | 23 | rgba(173,255, 47, 1) | aArray[23][3] |  Image Modified
| | cSalmon | Salmão | 24 | rgba(250,128,114, 1) | aArray[24][3] |  Image Modified
| | cTan | Rosa Queimado | 25 | rgba(210,180,140, 1) | aArray[25][3] |  Image Modified
| | cWheat | Rosa Trigo | 26 | rgba(245,222,179, 1) | aArray[26][3] |  Image Modified
| | cSlateGray | Cinza Ardósia | 27 | rgba(112,128,144, 1) | aArray[27][3] |  Image Modified
| | cMistyRose | Rosa Claro | 28 | rgba(255,228,225, 1) | aArray[28][3] |  Image Modified
|
|
|
| Expandir |
|---|
| Apesar de cada projeto ter suas particularidades, reservamos algumas cores de legenda que devem ser utilizadas sempre que for necessário representar o status a ela atribuído. Demais status que não foram definidos nessa padronização terão suas cores atribuídas pelo produto de maneira individual, considerando suas necessidades. Os status definidos são: "Habilitado" e "Em aberto" - Cor Verde (color-07) "Desabilitado" e "Encerrado" - Cor Vermelha (color-10) | Cor | Código Hexadecimal | Código RGBA | Exemplo Cor |
|---|
| color-07 | #c64840 | rgba( 198, 72, 64, 1) | Image Added | | color-10 | #56b96b | rgba( 86, 185, 107, 1) | Image Added |
|
|
