Histórico da Página

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.

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

Foi definido que para a opção de filtro avançado deve ser utilizado o padrão de slide, conforme modelo proposto abaixo:

• 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.

• 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 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. 

Referencias:

• https://po-ui.io/documentation/po-page-list
• https://po-ui.io/documentation/po-dropdown

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:

Código das cores:

/** #0c9abe rgba( 12, 154, 190, 1) */ Color01 = 'color-01',

/** #2c85c8 rgba( 44, 133, 200, 1) */ Color02 = 'color-02',

/** #2c43c8 rgba( 44,  67, 200, 1) */ Color03 = 'color-03',

/** #5843c8 rgba( 88,  67, 200, 1) */ Color04 = 'color-04',

/** #ab43c8 rgba( 171, 67, 200, 1) */ Color05 = 'color-05',

/** #ab4391 rgba( 171, 67, 145, 1) */ Color06 = 'color-06',

/** #c64840 rgba( 198, 72,  64, 1) */ Color07 = 'color-07',

/** #ea9b3e rgba( 234, 155, 62, 1) */ Color08 = 'color-08',

/** #abc249 rgba( 171, 194, 73, 1) */ Color09 = 'color-09',

/** #56b96b rgba( 86, 185, 107, 1) */ Color10 = 'color-10',

/** #00b28e rgba(  0, 178, 142, 1) */ Color11 = 'color-11',

/** #06a6a5 rgba(  6, 166, 165, 1) */ Color12 = 'color-12'

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.