Linha Microsiga Protheus

Árvore de páginas

Versões comparadas

Versão antiga 29

changes.mady.by.user Diego da Silva Domingos

Gravado em

comparado com

Nova versão 30

changes.mady.by.user Diego da Silva Domingos

Gravado em

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.

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
titleBrowse
Expandir
titleLegendas / 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
titleColunas

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
titleBusca / 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
titleBusca / 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
titlePosicionamento- 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
titleCores
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
titleTabela de Cores Padrão

Tons de Cinza

CorCódigo HexadecimalCódigo RGBACódigo PO-UIId Dashboard

#c8c8d2200, 200, 210, 1-12

#c0c0c0

192, 192, 192, 1-11

#708090112, 128, 144, 1-27

Tons de Azul

CorCódigo HexadecimalCódigo RGBACódigo PO-UIId Dashboard

#32a5ff50, 165, 255, 1-

10

#0078ff0, 120, 255, 1-

9

#0c9abe12, 154, 190, 1color-01-

#2c85c8

44, 133, 200, 1

color-02-

#2c43c844,  67, 200, 1color-03-

#5843c888,  67, 200, 1color-04-

#0000cd0, 0, 205, 1-20

#19197025, 25, 112, 1-19


Tons de Verde

CorCódigo HexadecimalCódigo RGBACódigo PO-UIId Dashboard

#abc249171, 194, 73, 1color-09-

#56b96b86, 185, 107, 1color-10-

#00b28e0, 178, 142, 1color-111

#06a6a56, 166, 165, 1color-12-

#00c9a10, 201, 161, 1-2

#adff2f173, 255, 47, 1-23

#228b2234, 139, 34, 1-22

#0064000, 100, 0, 1-21

Tons de Marrom

CorCódigo HexadecimalCódigo RGBACódigo PO-UIId Dashboard

#a05028160, 80, 40, 1-16

#800000128, 0, 0, 1-15

Tons de Roxo

CorCódigo HexadecimalCódigo RGBACódigo PO-UIId Dashboard

#ab43c8171, 67, 200, 1color-05-

#ab4391171, 67, 145, 1color-06-

#b923b9185, 35, 185, 1-14

#800080128, 0, 128, 1-13

Tons de Rosa

CorCódigo HexadecimalCódigo RGBACódigo PO-UIId Dashboard

#ff78ff255, 120, 255, 1-18

#ff00ff255, 0, 255, 1-17

Tons de Vermelho


CorCódigo HexadecimalCódigo RGBACódigo PO-UIId Dashboard

#fa8072250, 128, 114, 1-24

#c64840198, 72, 64, 1color-073

#e34940227, 73, 64, 1-4

Tons de Laranja

CorCódigo HexadecimalCódigo RGBACódigo PO-UIId Dashboard

#ffa236255, 162, 54, 1-8

#ea9b3e234, 155, 62, 1color-087

Tons de Amarelo

CorCódigo HexadecimalCódigo RGBACódigo PO-UIId Dashboard

#fccb4c252, 203, 76, 1-5

#ffd464255, 212, 100, 1-6

Tons de Pastel

CorCódigo HexadecimalCódigo RGBACódigo PO-UIId Dashboard

#d2b48c210, 180, 140, 1-25

#f5deb3245, 222, 179, 1-26

#ffe4e1255, 228, 225, 1-28
Expandir
titleCores 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)
CorCódigo HexadecimalCódigo RGBAExemplo Cor
color-07#c64840rgba( 198, 72,  64, 1)

color-10#56b96brgba( 86, 185, 107, 1)

Painel
titleExibição de Dados
Expandir
titleLGPD

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
titleTraduçã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
titleSeleçã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:

Painel
titleNova versão do .app
Expandir
titleComo 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
titlePipelines 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

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
titlePróximo Tópico
Expandir
titleA 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>