Visando aprimorar a usabilidade das telas do sistema, buscou-se uma nova maneira de elaboração/desenvolvimento de tais telas. Com esse propósito, chegou-se à tecnologia "HTML5".
HTML5 ("Hypertext Markup Language", versão 5), é uma linguagem para estruturação e apresentação de conteúdo para a "World Wide Web"; é a quinta versão da linguagem HTML. Sua essência tem sido melhorar a linguagem com o suporte para as mais recentes multimídias, enquanto a mantém facilmente legível por seres humanos e consistentemente compreendida por computadores e outros dispositivos.
Tomando primeiramente o Cadastro de Parceiros como exemplo, vejamos como o sistema irá se portar diante das configurações acerca do HTML5:
Comportamento do parâmetro UTILIZAHTML5
Para utilização das telas desenvolvidas na linguagem HTML5, se faz necessário na tela Preferências, definir-se o parâmetro "Utiliza telas em HTML5? - UTILIZAHTML5"; sua configuração, permite a utilização de algumas telas, cujo desenvolvimento se deu na linguagem HTML5. Pode-se configurá-lo dentre as seguintes opções:
- Ligado: Com esta definição, as telas já desenvolvidas em HTML5 serão apresentadas normalmente assim que esta for aberta:
- Preferir: Ao definir esta opção, você poderá selecionar o novo layout por meio da opção "Layout da tela" do menu
se este já estiver disponível para a respectiva tela, sendo que por meio da opção você também pode optar pelo layout antigo (esta é a opção definida como padrão):
Nota: caso a marcação "Lembrar minha escolha para esta tela" seja efetuada, ao acessar a tela novamente, a opção de utilização será sempre considerada e esta mensagem de questionamento sobre o uso do novo layout não será mais apresentada. Lembrando que, apenas o usuário SUP poderá definir qual o layout vai ser usado como padrão. Porém, este poderá ligar o parâmetro "Usuário pode salvar layout escolhido? - USUSALVALAYOUT" para que outros usuários possam escolher qual layout utilizar.
O parâmetro USUSALVALAYOUT precisa ser criado e habilitado pela tela Preferências do sistema, de acordo com as seguintes regras:
Chave: USUSALVALAYOUT
Descrição: Usuário pode salvar layout escolhido?
Módulos do Sistema: Configurações
Aba: Diversas
Tipo: Lógico
Ligado/Desligado: Ligado
Tela inicial
Ao realizar o acesso às telas desenvolvidas no formato HTML5, tem-se a princípio a seguinte tela:
Nos tópicos abaixo, tem-se detalhadamente o comportamento de cada uma das opções apresentadas na tela inicial.
Observação: os campos informativos das abas são exibidos dinamicamente, conforme o termo pesquisado. Se determinado campo da tabela contém o valor informado no campo de pesquisa (descrição), este campo será exibido na referida aba.
Novo registro
Ao clicar no botão "+ Novo registro", a tela é posicionada de modo a receber um novo cadastro, onde da mesma forma que no formato de tela antigo, preenche-se todos os campos que irão compor um cadastro entendível e completo para as rotinas que fará parte.
Layout do Formulário
Para este layout você poderá também definir um layout padrão para os formulário das telas por meio do parâmetro "Configuração de Formulários HTML5 - CONFIGFORMHTML5", neste teremos as opções:
- Por usuário (Padrão);
- Coluna única normal;
- Coluna única compacta;
- Multi-Colunas.
Observação: temos também o parâmetro "Utiliza telas Beta em HTML5? - HTML5BETA", que quando ligado permitirá aos usuários o uso de telas em HTML5 que ainda estejam em versão beta. Se este for definido como "Desligado", estas referidas telas abrirão no layout antigo do sistema.
A opção apresenta a tela em modo grade, contendo todos os cadastros já realizados, caso nenhum filtro tenha sido criado na tela; existindo algum filtro, os dados serão apresentados em grade seguindo a filtragem configurada:
Passando-se o cursor com o mouse, à frente da nomenclatura de cada coluna, será exibido o ícone (Opções da Coluna), que ao ser acionado, apresenta as seguintes opções:
- Ordenar Ascendente: Realiza a ordenação dos dados da tela de forma crescente, com base na coluna em que a opção foi acionada.
- Ordenar Descendente: Efetua a ordenação dos dados da tela de forma decrescente, com base na coluna em que a opção foi acionada.
- Filtrar: Ao acionar esta opção, é aberta um pequeno pop-up onde pode-se marcar ou desmarcar os registros que serão exibidos na tela. Os registros desmarcados, não serão visualizados.
- Agrupar: Esta opção realiza o agrupamento das demais colunas, apenas na coluna a qual a opção foi acionada. Será apresentado um sinal de "+" que expande os dados do registro.
- Fixar Coluna: Esta opção quando acionada, torna a coluna em questão imóvel perante as demais, ou seja, ao movimentar as colunas na horizontal, a coluna fixada, irá assim permanecer, enquanto que as outras irão se mover.
Caso a tela seja composta por muitos cadastros, o sistema automaticamente divide todos os registros em páginas, de modo que pode-se visualizar no rodapé da tela, a página em se está localizado e navegar entre elas, através dos botões de navegação: Posiciona o foco para a primeira página; Vai para a página anterior; Apresenta a página seguinte e Exibe os registros da última página.
Observação: algumas configurações, se efetuadas afetam diretamente as telas iniciais do sistema quando estas são abertas no layout HTML5. São elas:
- O parâmetro "Mostra aviso ao carregar tudo na pág. Inicial - MOSTAVISPAGINI" estar ligado;
- Nenhum filtro personalizado da tela em questão deve estar ativado;
- Nenhum campo do painel de filtros deve estar preenchido; configuração esta, realizada na tela Construtor de Telas > Botão Outras opções > Painel de Filtros.
Com as referidas configurações efetuadas, clicando-se na opção "Mostrar grade", será apresentada a mensagem abaixo:
"Não existe nenhum tipo de filtro ativo, portanto essa operação pode levar vários minutos. O que deseja fazer?"
Importante: para manter-se a compatibilidade das grades da tela Flex (layout normal) com as telas em formato HTML5 tem-se as seguintes regras:
1.Primeiramente, busca-se encontrar a configuração de grade do usuário que encontra-se logado na tela em modo HTML5. Caso encontre, será utilizada esta configuração e, posteriormente, retorna-se a mesma na grade;
2.Na hipótese de falhar a regra acima, o sistema tentará identificar a configuração realizada no usuário SUP para a tela HTML5. Localizando esta configuração, retorna-se a mesma para a grade. Caso não encontre, o sistema buscará identificar a configuração da tela em modo Flex;
3.Não encontrando nenhuma das configurações acima, o sistema buscará as configurações conforme o Dicionário de Dados e retornará para a grade.
Ajuda
Assim como ocorre no layout antigo, acessando-se a opção , será aberta a Central de Ajuda referente a tela que está aberta.
Iniciar Tour
A opção apresenta as informações a respeito do novo layout das telas do sistema de modo a orientar o usuário sobre o comportamento de cada uma das opções disponíveis. Um "Tour" pode ser iniciado partindo-se de três locais distintos na tela. São eles:
1) Tela inicial:
2) Ao dar início a configuração de "Filtros":
3) Ao realizar a "Configuração da Tela":
Independente do local que o Tour for iniciado, o seu propósito e comportamento é o mesmo. A diferença envolvida entre os em que ele pode ser iniciado, é a orientação passada ao usuário em cada um deles. A saber:
- Iniciando-se o Tour pela "Tela Inicial", serão apresentadas informações acerca da própria tela inicial, da tela em modo grade e sua visualização em modo formulário;
- Através da construção dos "Filtros", o Tour exibe considerações sobre a construção dos filtros personalizados;
- Finalmente, por meio da "Configuração da Tela", o Tour apresenta os recursos que abrangem este procedimento de estruturação da tela;
- Sob a influência do parâmetro "Mostrar tour nas novas telas HTML5? - SHOWHTML5TOURH", caso seja feito o acesso a uma tela no layout HTML5, sendo esta composta por um Cadastro hierárquico, ao realizar-se um Tour na tela, serão apresentados também dados a respeito das funcionalidades obtidas com o uso das hierarquias.
Todo o Tour possui a aparência do exemplo exibido na imagem abaixo, ou seja, a descrição de onde se está posicionado, bem como sua funcionalidade, os botões "Anterior" e "Próximo" que permitem retroceder alguma instrução ou avançar para a orientação seguinte, respectivamente, bem como o botão "Fechar" que permite o encerramento do Tour a qualquer instante que for julgado necessário.
Configuração de Filtros
Para pesquisar pelos registros cadastrados utilizando diferentes informações do card, para isso, clique em "Configurações de Filtros" e selecione as opções desejadas nas abas "Campos" e "Relacionamentos", sabendo que, a primeira aba apresenta os campos da tabela correspondente a rotina e a aba seguinte exibe os campos cujo essa tabela faz 'ligações' (conforme Dicionário de Dados).
Exemplo: na tela Aviso Prévio, ao marcar somente a opção "Funcionário" da aba Campos, o filtro irá pesquisar na tabela TFPAVI o funcionário somente pelo código (CODFUNC), se marcar a opção Funcionário da aba Relacionamentos o filtro buscará o funcionário pelo Nome (NOMEFUNC).
Facilidade de utilização
As telas utilizadas em HTML5 são de fácil navegação/utilização. Para um melhor entendimento, inserimos uma legenda na imagem abaixo, de modo que o significado de cada ponto, pode-se visualizar logo em seguida:
A - Os botões/componentes presentes na barra de ferramentas estão dispostos de uma maneira mais simples para os usuários, onde gostaríamos de destacar a possibilidade de Pesquisa de Registros sem a necessidade de retorna-se à Tela inicial. Pode-se notar o espaço para digitação denominado Pesquisar registros... onde pode-se inserir as iniciais do código ou descrição do registro desejado.
B - As telas em HTML5 que apresentarem um painel principal, a medida que for feita a navegação entre as abas, este painel é mantido fixo na tela, de modo que será sempre possível visualizar os dados básicos do cadastro, ou seja, no exemplo do Cadastro de Parceiros, serão sempre apresentados o Código, o Nome, o Tipo de Pessoa, e se o Parceiro está ou não Ativo. Além disso, por meio do botão Configuração da tela, pode-se realizar também a conformação do Painel Principal, inserindo ou retirando algum campo que não seja necessário ao processo da empresa.
C - As telas compostas por abas, terão estas exibidas na horizontal (de maneira similar ao que ocorria nas telas em modelo antigo). Além disso, pressionando-se o ícone presente no início da disposição das abas, todas estas serão listadas, sendo possível ainda pesquisar pela aba desejada. Mais detalhes vide tópico Pesquisa de abas e campos.
Pesquisa de abas e campos
Como mencionado resumidamente no tópico Facilidade de utilização, é possível através do ícone verificar as abas presentes em cada tela e ainda buscar pela aba desejada, digitando seu nome no campo Pesquisar que é apresentado ao pressionar-se o referido ícone:
Soma-se a esta funcionalidade, a influência do parâmetro "Ordenar abas por ordem alfabética? - ORDENARABAS", que ao ser ativado, clicando-se no ícone citado, as abas são listadas em ordem alfabética.
Além da busca de abas, tem-se a pesquisa de campos disponíveis na tela; esta é acionada pelo botão Configuração da Tela, opção Pesquisar campos... ou ainda, pelas teclas de atalho no teclado "Ctrl + F".
Pesquisa de registros
A Tela inicial de uma rotina no formato de layout HTML5, conta com o espaço para pesquisa de registros denominado "Pesquisar registros", em destaque na imagem abaixo:
Ao realizar a pesquisa de cadastros, informando-se um trecho que porventura seja equivalente à vários registros, os campos correspondentes a estes registros que tiverem sido alimentados com o fragmento digitado, serão evidenciados nos resultados obtidos na consulta, facilitando sua localização.
Nota: para encontrar registros na barra de pesquisa das telas do sistema mesmo que estes sejam escritos com espaço entre as letras, habilite o parâmetro "Mantm espaos entre palavras filtro de pesquisa? - MNTESPFILTPESQ".
Tomaremos como exemplo, o Cadastro de Parceiros. Vejamos uma pesquisa realizada onde informou-se o trecho "emp":
Observemos que foram apresentados os registros que possuem o trecho digitado, e este mesmo trecho foi destacado em amarelo nos campos que o possuem.
Importante: para a apresentação dos resultados nesse campo de busca, o sistema segue a regra abaixo:
- Limite de 5 campos;
- O componente considera como maior prioridade os campos que combinaram com o termo pesquisado, apresentando os 5 primeiros;
- Caso existam registros que tenham a mesma descrição do campo pesquisado, o sistema leva em consideração a data em que o registro entrou na tabela, por exemplo:
Registro da tabela X:
A - Data de entrada 01/01/2020
AB - Data de entrada 02/01/2020
B - Data de entrada 02/01/2020
ABC - Data de entrada 01/01/2020
Sendo assim, ao realizar a pesquisa com "A", o sistema trará a seguinte ordem de apresentação:
A - Data de entrada 01/01/2020
A - Data de entrada 02/01/2020
AB - Data de entrada 02/01/2020
ABC - Data de entrada 01/01/2020
A pesquisa se aplica aos termos digitados, excluindo campos do tipo "Texto" com tamanho menor ou igual a 3 no banco de dados, como, por exemplo, marcações s/n, campo de situação da entidade "OrdemCarga", entre outros.
Scroll (rolagem) de página inteira
Nas telas no formato de layout HTML5, tem-se um recurso denominado Scroll (rolagem), que consiste em mais uma facilidade de navegação quando pensamos nas telas na vertical. Em outras palavras, a medida que a tela é deslizada para baixo, e esta conta com uma grande quantidade de campos, na parte superior da tela em questão, serão sintetizadas os dados principais da tela, de modo que estes dados irão acompanhar a navegação, podendo serem acionados quando necessário.
Esta funcionalidade pode ser perfeitamente visualizada, quando na tela de Cadastro de Parceiros, acessa-se a Aba Contatos:
Deslizando-se a barra de rolagem tela para baixo, pode-se notar em sua parte superior, os ícones (que podem ser clicados quando necessário):
Painel de Filtros
O sistema é composto por telas que possuem painel de filtros e outras que não possuem. Nosso exemplo até então, vinha sendo a tela de Cadastro de Parceiros, porém esta tela não possui o painel de filtros que iremos destacar neste tópico. Com base nisso, tomaremos como exemplo a tela Pagamento de Frete por O.C.
Observemos na imagem abaixo, no lado esquerdo da tela os espaços Filtro personalizado e Filtros rápidos:
No espaço Filtros rápidos, tem-se os campos fixos relacionados a tela que irão auxiliar na busca dos registros desejados.
Já o espaço Filtro personalizado, possui uma nova característica: a medida que filtros personificados forem sendo criados, estes também serão exibidos na tela, de modo que pode-se acioná-los individual ou simultaneamente sempre que necessário, ou seja, pode-se trabalhar com uma combinação de filtros personalizados e rápidos, visando refinar ainda mais a busca.
Como descrito inicialmente neste tópico, algumas telas do sistema não possuem os painéis de filtros rápidos ou personalizados posicionados no lado esquerdo da tela.
Nestas situações, tem-se no alto das telas o botão Filtros , que permite a criação de filtragens personalizadas; a medida que novos filtros são construídos, estes poderão ser apresentados juntamente ao botão mencionado, sendo possível ainda ativar ou desativar algum deles, caso necessário (quando tem-se um ou mais filtros ativos, será apresentado na coloração vermelha, a quantidade daqueles que estão ativos):
Observação: passando-se o cursor do mouse sobre um filtro personalizado, pode-se visualizar os campos e condições que fazem parte de sua composição.
Cadastro hierárquico em HTML5
Para um melhor entendimento do Cadastro hierárquico feito em HTML5, tomaremos como exemplo neste tópico, o Cadastro de Natureza de Receitas e Despesas;
Na página inicial, o cadastro hierárquico apresenta a opção "Mostrar hierarquia" conforme imagem acima. Sua funcionalidade é direcionar a tela para o modo formulário carregando toda a hierarquia já cadastrada. Vejamos abaixo a tela em seu layout antigo:
Agora a mesma tela no layout HTML5:
No cadastro hierárquico utilizado em HTML5, tem-se a navegação exclusiva em cada nível, ou seja, ao acessar um registro pai, os cadastros sintéticos e analíticos que fazem parte desse registro poderão ser visualizados distintamente, podendo-se avançar ou retroceder os níveis de acordo com a composição de cada cadastro. Vejamos abaixo as formas disponíveis de navegação:
- Através dos ícones <<, < e > posicionados no início e ao final de cada descrição, respectivamente;
- Por meio das setas ï ð ñ ò localizadas no teclado, respectivamente;
- Com um duplo clique sobre o registro pai, pode-se somente avançar para os cadastros sintéticos e analíticos contidos no mesmo;
Vejamos o exemplo deste comportamento no cadastro da Natureza Despesas comerciais:
No exemplo representado nesta imagem, pode-se notar os cadastros de segundo nível Comissões, Bonificações/Quebras e Marketing/Publicidade, sendo estes dois primeiros analíticos e o último sintético, possuidor de um terceiro nível de cadastros, o qual pode ser acessado por meio das funcionalidades descritas anteriormente.
No decorrer da navegação entre os cadastros sintéticos e analíticos, é possível visualizar no topo da tela em seu lado esquerdo, outra forma de retroceder entre os níveis. A cada nível percorrido os atalhos são disponibilizados posteriormente, após o terceiro nível será apresentado o atalho representado por uma seta, que tem por finalidade retornar ao início dos cadastros.
Modo de apresentação dos campos do layout
Utilizando-se as telas no layout HTML5 em modo formulário, é possível modificar a disposição dos campos que as constituem, tanto em relação as abas, quanto em relação aos painéis principais. Esta configuração é realizada através do parâmetro "Configuração de Formulários HTML5 - CONFIGFORMHTML5"; este parâmetro pode ser definido dentre quatro opções:
- Padrão;
- Coluna única normal;
- Coluna única compacta;
- Por usuário.
Vejamos as particularidades de cada opção:
Padrão - O modo de apresentação Padrão consiste na disposição da descrição dos campos em um alinhamento e logo abaixo, o espaço de preenchimento e/ou marcação de cada um, distribuídos em duas ou mais colunas. Ou seja:
Coluna única normal - Já o modo de apresentação Coluna única normal, dispõe os campos do formulário em uma única coluna, mantendo a descrição de cada um acima de seu respectivo espaço de preenchimento. Vejamos:
Coluna única compacta - O modo de apresentação Coluna única compacta, de maneira semelhante à opção anterior, também organiza os campos do formulário em uma única coluna, diferenciando-se pela descrição dos campos, que neste caso será apresentada no mesmo alinhamento de seu espaço para preenchimento/marcação. Vejamos a imagem abaixo:
Por usuário - Já o modo de apresentação Por usuário, permite que cada usuário configure a disposição dos campos de acordo com sua preferência, dentre as três opções acima mencionadas; será habilitada em cada tela, no botão "Configuração da tela", a opção Layout do Formulário, que ao ser acionada, exibe um pop-up com esta mesma nomenclatura:
Neste pop-up pode-se determinar qual será a disposição do formulário correspondente a tela em questão. Além disso, por meio da marcação "Aplicar configuração à todas as telas", a opção aqui definida será considerada também para todas as outras telas em HTML5 que o usuário logado tiver acesso.
Você também poderá editar a apresentação das colunas no modo grade das telas, para isso, clique na opção "Modo Dinâmico" do botão "Opções da Grade", assim, será possível selecionar ou realocar os campos disponíveis nas telas no momento de seu uso. Caso queira que o sistema grave a disposição que você escolher, realize esta configuração na opção
"Configurar grade".
Botão "Exportar grade para" no layout HTML5
Nas telas em HTML5 o botão "Exportar para grade" permite a configuração de um limite de registros a serem exibidos no processo de exportação das três opções que o mesmo disponibiliza. Essa configuração é efetuada por meio do parâmetro "Qtd. máx. de reg. para export. de PDF, XLS e Cubo - QTDMAXREGEXPORT", estando o mesmo apontado com o valor zero serão apresentados todos os registros pertinentes a pesquisa. Ao se informar um valor acima de zero, a exportação acatará essa limitação.
Ao se realizar uma exportação que apresente um número de linhas maior que o configurado no referido parâmetro, será apresentada a seguinte mensagem:
"Atenção: os 2 primeiros registros a partir da primeira página serão exportados. Deseja continuar?
Dica: Para exportar uma quantidade muito grande de registros, utilize um extrator de dados através de um relatório personalizado."
Optando-se pela opção "Sim" será exportada a quantidade especificada no parâmetro. Caso seja acionada a opção "Não", será executado o cancelamento da exportação.
Geração de Gráficos
Além das funcionalidades já descritas até aqui, as telas em HTML5 no Modo Grade possibilitam a geração de gráficos que visam auxiliar em análises rápidas de dados, como por exemplo o limite de crédito mensal que seus parceiros possuem. Vejamos um exemplo utilizando o "Gráfico de colunas" no Cadastro de Parceiros:
Para realizar a geração dos gráficos, é necessário selecionar as colunas com os dados desejados e assim clicar com o botão direito do mouse sobre elas.
Dentro da opção "Gráficos" tem-se os tipos de gráficos disponibilizados pelo sistema.
Com exceção do "Gráfico de linhas", todos os outros gráficos disponibilizam outras formas de exibição.
Deste modo, basta selecionar o tipo de gráfico que melhor atenda a sua necessidade.
Configurando o Gráfico
O gráfico permite que sejam realizadas configurações em sua estrutura, de acordo com o usuário logado, a tela que está sendo acessada e o tipo de gráfico utilizado. Deste modo, quando este usuário acessar esta tela e solicitar a visualização deste gráfico, essas configurações serão mantidas.
Ao acionar o botão "Configurar gráfico", tem-se a exibição das abas que permitem as configurações na estrutura do gráfico. Inicialmente, tem-se a aba "Config." que é responsável por dizer qual será a forma de exibição do gráfico, ou seja, pode-se alternar de um gráfico de Barras para um gráfico de Pizza.
A aba "Dados" permite incluir informações no gráfico, bem com, retirar dados que não devem ser apresentados.
Além disso, tem-se a aba "Formatação" que possibilita editar as configurações de formatação do gráfico, inserir uma legenda, modificar os eixos e alterar as suas medidas.
Ao final, pode-se utilizar o botão "Salvar" para guardar as configurações realizadas, bem como, o botão
"Redefinir formatação do gráfico" para restaurar a formatação padrão do gráfico.
Marcar um registro como Favorito
Marcar um registro (cadastro) como "Favorito" tem a finalidade de permitir que este cadastro seja acessado de forma mais rápida; você poderá fazê-lo por exemplo, em registros que são visualizados com mais frequência, ou que costumeiramente servem de padrão para realização de outros cadastros. Um cadastro pertencente à própria tela, pode ser marcado como Favorito de duas maneiras. Observe:
1º: Qualquer registro pode ser assinalado como Favorito a qualquer momento que esteja-se navegando nas abas de seu cadastro. Como exemplo, iremos utilizar a tela Cadastro de Parceiros; ao lado da apresentação do nome do Parceiro, tem o ícone representado por uma estrela; ao marcá-lo, o referido ícone ficará na coloração "amarela", o que define um registro Favorito:
2º: Uma vez posicionado na tela inicial, ao digitar o código ou descrição do Parceiro de modo a identificá-lo, os registros apresentados exibem no lado direito de sua descrição o ícone representado por uma estrela; ao marcá-lo, o referido ícone ficará na coloração "amarela", o que caracteriza um registro Favorito:
3º: Já posicionado em algum registro, caso seja necessário localizar algum outro cadastro pelo campo de pesquisa presente no lado superior direito da tela, informando-se o código ou descrição de algum Parceiro, nos registros apresentados tem-se também no lado direito de sua descrição o ícone reproduzido por uma estrela; ao marcá-lo, assim como na alternativa anterior, o referido ícone ficará na coloração "amarela", o que qualifica um registro como Favorito:
É possível ainda, marcar um registro pertencente à outra tela como "Favorito". Por exemplo, ao cadastrar o Endereço de um Parceiro, você pode assinalar sua respectiva cidade como Favorita; ao clicar no ícone representado pela lupa visando procurar pela cidade desejada, já no pop-up de busca que é aberto, pode-se assinalar a cidade em questão como Favorita assim como mencionado nas opções anteriores.
| |
Confira também o artigo Identificação de Lançadores e Personalizações. |
Comentários
0 comentário
Por favor, entre para comentar.