Histórico da Página

...

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	Seleção/Filtros de filiais.

Ao criar uma interface de seleção de filiais tanto para filtro de relatório quanto um CRUD de uma rotina, devemos colocar o código e a descrição da filial para melhor localização dos registro e também com o intuito de respeitar o legado do sistema Protheus.

Image Added

Expandir

title	Busca / Comportamento do Filtro

Para o comportamento do filtro do Browse em PO UI, ficou definido que o mesmo ocorrerá de forma automática, ou seja, quando o usuário ficar sem digitar no campo de busca por um intervalo superior a de 3 segundos deverá ser executada uma nova busca no Back-End automaticamente, sendo interrompida caso o usuário continuar a digitação, aguardando assim um novo intervalo sem digitação para que a busca seja realizada novamente. Segue abaixo exemplo do comportamento de pesquisa automática sem a necessidade de informar o código completo e de acionar o botão de busca:

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

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

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	Tabela de Cores Padrão

Tons de Cinza

Código Hexadecimal	Código RGBA	Código PO-UI	Id Dashboard
#c8c8d2	200, 200, 210, 1	-	12
#c0c0c0	192, 192, 192, 1	-	11
#708090	112, 128, 144, 1	-	27

Tons de Azul

Código Hexadecimal	Código RGBA	Código PO-UI	Id Dashboard
#32a5ff	50, 165, 255, 1	-	10
#0078ff	0, 120, 255, 1	-	9
#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

Tons de Verde

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

Tons de Marrom

Cor	Código Hexadecimal	Código RGBA	Código PO-UI	Id Dashboard
	#a05028	160, 80, 40, 1	-	16
	#800000	128, 0, 0, 1	-	15

Tons de Roxo

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

Tons de Rosa

Cor	Código Hexadecimal	Código RGBA	Código PO-UI	Id Dashboard
	#ff78ff	255, 120, 255, 1	-	18
	#ff00ff	255, 0, 255, 1	-	17

Tons de Vermelho

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

Tons de Laranja

Cor	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

Tons de Amarelo

Cor	Código Hexadecimal	Código RGBA	Código PO-UI	Id Dashboard
	#fccb4c	252, 203, 76, 1	-	5
	#ffd464	255, 212, 100, 1	-	6

Tons de Pastel

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

title	Cores e legenda

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:

"Desabilitado" e "Encerrado" - Cor Vermelha (color-10)
"Habilitado" e "Em aberto" - Cor Verde (color-07)

Cor	Código Hexadecimal	Código RGBA	Exemplo Cor
color-07	#c64840	rgba( 198, 72, 64, 1)
color-10	#56b96b	rgba( 86, 185, 107, 1)

Expandir

title	Ações da linha

Ficou definido em reuniao que as telas que possuem a coluna de ações da linha, devem posicionar essa coluna à esquerda, conforme exemplo:

Image Added

Painel

title	Exibição de Dados

Expandir

title	LGPD

LGPD - Ofuscamento dos campos

Foi definido que o padrão de ofuscamento dos campos para a LGPD será a exibição de uma TAG com a palavra RESTRITO.

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

Exemplo de uso:

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.

Expandir

title	Decimais

A exibição de campos numéricos e/ou monetários deverão seguir o mesmo padrão utilizado em aplicações do ERP Protheus, ou seja, seguindo as definições utilizadas na configuração dos ambientes respectivos através da chave PICTFORMAT, quando a mesma estiver configurada como DEFAULT o formato de exibição deverá ser ',' (vírgula) como separador de decimal e '.' (ponto) como separador de milhar, quando estiver configurado como AMERICAN o formato de exibição deverá ser '.' (ponto) como separador de decimal e ',' (vírgula) como separador de milhar, mesmo quando no dicionário de dados do campo correspondente o picture (X3_PICTURE) estiver definido como '@E'.

OBS: Para verificar o conteúdo de chaves do AppServer dentro das APIs pode ser utilizada a função GetSrvProfString.

Expandir

title	Grupo de Perguntas (SX1)

Quando precisamos acessar os dados referente ao Grupo de Perguntas (SX1) do Protheus através de rotinas do Back-End utilizamos a classe FWSX1Util para que o metadado não seja acessado diretamente sem uma padronização.

Para acessar o conteúdo das Perguntas através de rotinas com Interface em PO-UI, foi criada uma nova classe que retorna os dados através de uma API REST o PergunteService. Dessa forma não é mais necessário a criação de APIs para retornar esses dados.

OBS: Para APIs ou rotinas do Back-End que necessitem acessar os dados referente ao dicionário SX1, permanece a mesma regra atual de utilização da classe FWSX1Util.

Painel

title	Seleção/Troca de Filiais

Expandir

title	Seleção/Troca de Filiais

Informações
Esta solução deve ser utilizada somente em aplicações externas, aplicações embarcadas no Protheus devem utilizar a empresa e filial que foi padrão.

Ao acessar a aplicação, deve ser utilizada a empresa e filial cadastrada como padrão no TOTVS Mingle.
A seleção ou Troca de Filiais devem ocorrer somente após o usuário efetuar o Login (Entrar) na aplicação;
A opção de Troca de Filiais deve ser uma opção de toolbar e deve seguir o modelo abaixo:

Image Modified

Painel

title	Nova versão do .app

Expandir

title	Como gerar uma nova versão do .app

Objetivo: Deixar registrado nesta págia a documentação oficial e algumas dicas para a implementação do pipeline-poui.

Dica

title	Pipelines de CI/CD

O objetivo de uma pipeline é automatizar o processo de entrega de software em produção de forma rápida, ao mesmo tempo garantindo sua estabilidade, qualidade e resiliência.

Documentação completa do time de DEVOPS sobre o pileline-poui

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

Expedição do .app

Expedição do arquivo .app: Expedição THF(.APP)
Expedição do arquivo .app pelo Spool de Compilação: Processo de expedição de arquivos THF(.App) pelo Spool de compilação

Exemplo de geração de uma nova versão estável no gitea

Posicionado em seu repositório remoto, na branch em que será baseada sua nova versão, execute os seguintes comandos (utilize o terminal git de sua preferência):

Acessando o repositório no gitea, na aba Versões,teremos uma nova tag com status de versão prévia:

Antes de alterar a versão para o status de estável, é importante conferir se todos os passos do drone foram executados com sucesso:

Para alterar o status da versão para estável, basta clicar em editar no título da versão:

Na tela que será apresentada, desmarcar a opção "Marcar como pré-lançamento":

Após este último passo, a versão ficará com status de Estável e pronta para ser compilada no D-1, caso o seu webhook (consulte a documentação) já esteja configurado:

Painel

title	Documentação API

Expandir

title	Padrão de documentação

O padrão para a documentação das APIs utilizado é o OpenAPI v3.

Para agilizar a documentação temos a ferramenta da engenharia com interface gráfica no link: OpenAPI-GUI v3

Image Added

Outra ferramenta é a extensão OpenAPI do VSCode. Nela podemos escrever o arquivo yml e visualizar utilizando o Swagger UI.

Image Added

Expandir

title	Repositório de API

Definição...

Exemplo:

Expandir

title	Solução de Problemas

Segue abaixo os links de acesso as documentações de FAQs de Produtos do BackOffice desenvolvidos em PO UI com público-alvo geral, ou seja, é destinado a Desenvolvedores, Suporte Técnico e também para Clientes:

FAQ - Dashboard BackOffice

FAQ - Portal Gestão de Vendas

FAQ - Acompanha Custos (OBS: No final da página)

Segue abaixo o link de acesso a documentação de uma FAQ destinada a equipe de Suporte Técnico para apoio ao atendimento de tickets de Clientes:

PO UI - Documento de apoio ao suporte

Painel

title	Personalização

Expandir

title	Adicionar campos em formulários

Expandir

title	Quando utilizar?

Este modelo de personalização pode ser utilizado em produtos que possuem um escopo de campos fixos e que não utilize o dicionário de dados do TOTVS Backoffice (Linha Protheus) como provedor de campos do formulario.

Expandir

title	Como adicionar campos?

Expandir

title	Protheus (backend)

O Protheus (backend) deve enviar os campos para a aplicação através de uma API REST, está poderá utilizar um parâmetro (SX6) ou um ponto de entrada onde o usuario poderá informar quais campos deseja adicionar no formulario.

Esta API será responsavel por prover uma lista de campos personalizados, onde os campos devem ser retornados da interface PoDynamicFormField do componente

Dynamic Form, podendo utilizar o dicionário de dados (SX3) do Protheus como base da estrutura.

Bloco de código

language	js
linenumbers	true

{
	"fields": [
		{
			"property": "c5_recfaut",
			"label": "Pag.Fret.Aut",
			"help": "Pagto do frete autonomo",
			"gridSmColumns": 12,
			"gridMdColumns": 6,
			"gridLgColumns": 4,
			"gridXlColumns": 4,
			"forceOptionsComponentType": "ForceOptionComponentEnum.select",
			"options": [
				{
					"value": "1",
					"label": "Emitente"
				},
				{
					"value": "2",
					"label": "Transportador"
				}
			],
			"disabled": false,
			"required": false,
			"showRequired": true,
			"clean": true,
			"default": false
		}
	]
}

Exemplo de ponto de entrada:

PE GVFLDC5 - Adicionar na interface do PGV campos

Expandir

title	Aplicação (frontend)

Para personalizar os formulários podem ser utilizados os componentes do dynamic form e o dynamic view da biblioteca PO-UI estes componentes permite criar um formulario ou uma visualização dinâmica, podendo exibir os campos em um container ou widget.

Informações

title	Sugestão

Para reduzir o tempo de carregamento da tela, os campos podem ser carregados previamente e serem armazenados na aplicação.

Exemplo de uso:

Image Added

Expandir

title	Remover campos

Definição...

Exemplo:

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 29

Nova versão Atual

Chave

Tons de Cinza

Tons de Azul

Tons de Verde

Tons de Marrom

Tons de Roxo

Tons de Rosa

Tons de Vermelho

Tons de Laranja

Tons de Amarelo

Tons de Pastel

03. APIs DESENVOLVIDAS