Histórico da Página

01. VISÃO GERAL

Esse documento tem a finalidade de definir padrões de desenvolvimento para os produtos da Linha BackOffice Protheus que utilizem componentes em PO UI, afim de criar uma experiência de uso única aos usuários para que não precisem se adaptar a cada nova tela criada.

02. DEFINIÇÕES

Painel

title	Browse

Expandir

title	Legendas / Status

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.

Expandir

title	Colunas

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:

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.

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:

Expandir

title	Cores

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:

Expandir

title	Paleta PO UI

Cor	Código Hexadecimal	Código RGBA
color-01	#0c9abe	rgba( 12, 154, 190, 1)
color-02	#2c85c8	rgba( 44, 133, 200, 1)
color-03	#2c43c8	rgba( 44, 67, 200, 1)
color-04	#5843c8	rgba( 88, 67, 200, 1)
color-05	#ab43c8	rgba( 171, 67, 200, 1)
color-06	#ab4391	rgba( 171, 67, 145, 1)
color-07	#c64840	rgba( 198, 72, 64, 1)
color-08	#ea9b3e	rgba( 234, 155, 62, 1)
color-09	#abc249	rgba( 171, 194, 73, 1)
color-10	#56b96b	rgba( 86, 185, 107, 1)
color-11	#00b28e	rgba( 0, 178, 142, 1)
color-12	#06a6a5	rgba( 6, 166, 165, 1)

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

title	GetColorChart()

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
cGreenDk	Verde Escuro	1	rgba( 0,178,142, 1)	aArray[1][3]
cGreenLht	Verde Claro	2	rgba( 0,201,161, 1)	aArray[2][3]
cRedDk	Vermelho Escuro	3	rgba(198, 72, 64, 1)	aArray[3][3]
cRedLht	Vermelho Claro	4	rgba(227, 73, 64, 1)	aArray[4][3]
cYellDk	Amarelo Escuro	5	rgba(252,203, 76, 1)	aArray[5][3]
cYellLht	Amarelo Claro	6	rgba(255,212,100, 1)	aArray[6][3]
cOrangeDk	Laranja Escuro	7	rgba(234,155, 62, 1)	aArray[7][3]
cOrangeLht	Laranja Claro	8	rgba(255,162, 54, 1)	aArray[8][3]
cBlueDk	Azul Escuro	9	rgba( 0,120,255, 1)	aArray[9][3]
cBlueLht	Azul Claro	10	rgba( 50,165,255, 1)	aArray[10][3]
cGreyDk	Cinza Escuro	11	rgba(192,192,192, 1)	aArray[11][3]
cGreyLht	Cinza Claro	12	rgba(200,200,210, 1)	aArray[12][3]
cPurpleDk	Roxo Escuro	13	rgba(128, 0,128, 1)	aArray[13][3]
cPurpleLht	Roxo Claro	14	rgba(185, 35,185, 1)	aArray[14][3]
cBrownDk	Marron Escuro	15	rgba(128, 0, 0, 1)	aArray[15][3]
cBrownLht	Marron Claro	16	rgba(160, 80, 40, 1)	aArray[16][3]
cFuchsiaDk	Pink Escuro	17	rgba(255, 0,255, 1)	aArray[17][3]
cFuchsiaLht	Pink Claro	18	rgba(255,120,255, 1)	aArray[18][3]
cMnightBlue	Azul Meia Noite	19	rgba( 25, 25,112, 1)	aArray[19][3]
cMediumBlue	Azul Médio	20	rgba( 0, 0,205, 1)	aArray[20][3]
cDGreen	Verde	21	rgba( 0,100, 0, 1)	aArray[21][3]
cFGreen	Verde Floresta	22	rgba( 34,139, 34, 1)	aArray[22][3]
cGreenYel	Verde Limão	23	rgba(173,255, 47, 1)	aArray[23][3]
cSalmon	Salmão	24	rgba(250,128,114, 1)	aArray[24][3]
cTan	Rosa Queimado	25	rgba(210,180,140, 1)	aArray[25][3]
cWheat	Rosa Trigo	26	rgba(245,222,179, 1)	aArray[26][3]
cSlateGray	Cinza Ardósia	27	rgba(112,128,144, 1)	aArray[27][3]
cMistyRose	Rosa Claro	28	rgba(255,228,225, 1)	aArray[28][3]

Painel

title	Exibição de Dados

Expandir

title	LGPD

LGPD - Ofuscamento dos campos

Status - Aguardando retorno de férias dos responsáveis para marcar agenda para conversa.

Expandir

title	Tradução

Login pelo Protheus:

O idioma que será apresentado nas rotinas deverá ser o mesmo selecionado no login realizado no SmartClient conforme imagem abaixo:

Login pelo Mingle:

Ao utilizar as rotinas em PO UI através do navegador utilizando o Login do Mingle, também deverá ser exibido o idioma que foi selecionado no Login conforme abaixo, mesmo que o idioma do navegador for diferente:

OBS: O idioma pré-selecionado na tela de Login do Mingle deve ser de acordo com o que está configurado no navegador caso tenha um idioma traduzido equivalente, se não houver tradução para o idioma do navegador deverá ser utilizado o default Português, porém caso seja alterado manualmente será utilizado o idioma que foi selecionado pelo Usuário.

Painel

title	Próximo Tópico

Expandir

title	A definir...

Definição...

Exemplo:

03. APIs DESENVOLVIDAS

Templatedocumentos

HTML

<style>
div.theme-default .ia-splitter #main {
    margin-left: 0px;
}
.ia-fixed-sidebar, .ia-splitter-left {
    display: none;
}
#main {
    padding-left: 10px;
    padding-right: 10px;
    overflow-x: hidden;
}

.aui-header-primary .aui-nav,  .aui-page-panel {
    margin-left: 0px !important;
}
.aui-header-primary .aui-nav {
    margin-left: 0px !important;
}

.aui-tabs.horizontal-tabs>.tabs-menu>.menu-item.active-tab a::after { 
	background: #FF9900; !important 
}

.menu-item.active-tab { 
	border-bottom: none !important; 
}

</style>

Árvore de páginas

Versões comparadas

Versão antiga 13

Nova versão 14

Chave

01. VISÃO GERAL

02. DEFINIÇÕES

Sintaxe:

Descrição:

03. APIs DESENVOLVIDAS