Padrões de design - Grids

Esse documento estabelece os padrões e fornece um guia para a definição do layout e da interface para os grids com o usuário do sistema. O layout padrão do sistema contará o grid principal do módulo, onde o usuário poderá realizar agrupamentos, realizar filtros e incluir novos registros, assim como realizar exportação dos dados para um arquivo.

O grid principal de cada módulo deve conter algumas funcionalidades específicas para facilitar o trabalho do dia a dia do usuário, sendo elas as seguintes:

• Barra de ferramentas do grid, com um botão para inclusão de um novo registro e de exportação dos dados do grid para arquivo XLSX e PDF;
• Barra para agrupamento das colunas;
• Colunas no grid que representem os dados do cadastro em aberto;
• Opção de filtrar os dados do grid;
• Possibilidade de agrupar as colunas na barra de agrupamento;
• Possibilidade de ordenar as colunas do grid;
• Possibilidade de ocultar as colunas;
• Possibilidade de paginar entre as páginas do cadastro;
• Possibilidade de exportar para .pdf;;
• Possibilidade de exportar para .xlsx;
• Possibilidade de salvar os estados das colunas da forma que o usuário deixou da ultima vez;

• A escrita do botão de inclusão e dos ícones da barra de ferramentas do grid devem seguir a cor #FFFFFF;
• A cor da barra de ferramentas do grid e da barra de agrupamentos deve ser a mesma cor, sendo a cor #585859;
• A cor da linha do menu do grid deve ser #9E9E9E;
• A cor do texto da barra de agrupamento deve ser #999999;
• O ícone de inclusão, e exportação para um arquivo PDF ou XLSX devem estar centralizados e a direita em relação a barra de ferramentas do grid;
• O botão de inclusão deve seguir do ícone de inclusão e o texto de inclusão;
• O botão de inclusão deve seguir o seguinte padrão, Ícone + [Novo(a)] + [cadastro], EX.: Nova pessoa, Novo ponto de atendimento;
• O sistema deve possibilitar que o usuário inclua um novo registro a partir do botão de inclusão na barra de ferramentas do grid;
• As linhas do grid devem ser mais estreitas e devem ter a largura de .929em 1.286em;
• O tamanho do texto do grid devem ter o tamanho de 14 px;
• A fonte padrão dos textos do grid devem ser DejaVu Sans, Arial, sans-serif;
• Ao dar um clique no registro do grid, o sistema deve leva-lo para a página de edição dos dados, onde o usuário poderá visualizar os as informações já cadastradas, editar o cadastro ou excluí-la, conforme suas permissões.

Este é um exemplo da estrutura que todos os grids devem seguir.

A filtragem permite especificar quais dados o usuário deseja exibir na tela. Clicando no botão com três pontinhos no cabeçalho da coluna, um menu de opções se abrirá. A opção filtrar exibe uma série de possibilidades para filtrar os dados na tela e então, exibir aqueles desejados pelo usuário. A filtragem dos dados é específica para cada tipo. São eles:

• Texto
• Número
• Data
• Lógico (Sim/Não)
• Enumerado

Cada um dispõe de opções próprias para cada intenção de filtragem. Ao aplicar o filtro, os dados correspondentes à especificação do usuário serão exibidos. A aplicação do filtro se dá pelo clique no botão Filtrar. Para remover o filtro, exibindo todos os dados novamente, basta clicar no botão Limpar.

O agrupamento dos dados permite que o usuário forme grupos com dados semelhantes. O agrupamento é realizado com base nos dados de determinada coluna selecionada pelo usuário. Para tanto, ele deve clicar e arrastar o cabeçalho de uma coluna para a área logo a cima com a descrição “Arraste uma coluna para agrupar”. Isto fará com que os valores semelhantes se agrupem na tela. Logo abaixo de cada agrupamento, haverá um somatório do número de registros para cada grupo. É possível agrupar, combinando várias colunas, afim de que se tornem mais específicos os agrupamentos. Para desfazer o agrupamento, basta clicar no botão com um “X” no cabeçalho da coluna selecionada pelo usuário. Fazendo isto, o grid volta ao seu formato original.

A ordenação organiza os registros exibidos na tela seguindo uma ordem crescente ou decrescente. A ordenação segue a ordem alfabética e irá ordenar, tanto valores textuais, quanto numéricos. A ordenação é aplicada a apenas uma coluna, não sendo possível ordenar duas colunas ao mesmo tempo. Um ícone de seta exibirá o sentido da ordenação, se crescente ou decrescente. Para desfazer a ordenação, basta clicar novamente no cabeçalho da coluna ordenada, até que o ícone da seta não seja mais exibido. A ordenação pode ser aplicada, mesmo tendo feito um agrupamento ou filtragem dos dados.

Ocultar uma coluna significa torná-la não visível no grid. A ocultação das colunas é individual, sendo necessário ocultar uma a uma. Uma coluna oculta por se tornar visível novamente, procedendo da mesma maneira como na ocultação. Para isto, basta clicar no botão com três pontinhos no cabeçalho da coluna, um menu de opções se abrirá e opção “Colunas” exibirá todas as colunas que fazem parte do grid em questão. Para ocultar ou exibir a coluna desejada, basta clicar sobre o nome desta coluna e ela será oculta ou exibida imediatamente. As colunas podem permanecer exibidas ou ocultas, apenas mantendo-as assim. O estado delas é salvo automaticamente, sem a necessidade de clicar em algum botão para tal. Ao atualizar a página, as colunas exibidas e ocultas continuarão como foram deixadas. Note que não é possível ocultar todas as colunas. Ao tentar fazê-lo, a última a ser ocultada será bloqueada, impedindo que o grid fique sem colunas exibidas.

A movimentação de colunas permite reposicioná-las no grid. Para isto, basta clicar e arrastar horizontalmente o cabeçalho da coluna, posicionando-a onde desejar. Tal como na ocultação de colunas, é possível salvar o posicionamento mantido. Ao retornar à página, as colunas estarão posicionadas como anteriormente deixadas.

Foi adotado o scroll infinito como forma de paginação. O grid carrega apenas os 20 primeiros dados de cada módulo, e conforme o usuário desce a barra de rolagem ele carrega os próximos resultados, essa busca é feita sempre de 20 em 20 registros, e a ação de carregar mais registro é feita automaticamente caso o módulo possua mais de 20 registros.

A exportação do grid para um arquivo com a extensão .pdf gera um documento contendo as colunas e registros exibidos naquele momento, isto é, apenas os registros filtrados. É possível ocultar as colunas que não se deseja exportar. Para exportar o grid, basta clicar no botão “Exportar como .pdf”. Imediatamente será gerado um documento para download automático ou solicitando que uma pasta seja escolhida e selecionada para salvar.

A exportação do grid para um arquivo com a extensão .xlsx gera um documento contendo as colunas e registros exibidos naquele momento, isto é, apenas os registros filtrados. Como na exportação para .pdf, é possível ocultar as colunas que não se deseja exportar. Para exportar o grid, basta clicar no botão “Exportar como .xlsx. Imediatamente será gerado um documento para download automático ou solicitando que uma pasta seja escolhida e selecionada para salvar. O documento exportado com a extensão .xlsx pode ser aberto em aplicativos de pacote office, como o Excel (Microsoft Office), o Calc (Libre Office), o Spreadsheets (WPS Office) ou o Planilhas (Google Docs).

Ao movimentar uma coluna ou mudar a visibilidade, o sistema irá salvar as configurações de exibição do grid do usuário, essas configurações devem ser aplicadas sempre que usuário voltar a tela de listagem do grid, sendo alterada automaticamente toda vez que o usuário faz alguma modificação no grid.

Os dados são salvos por usuário e módulo.

As configurações gravas são a ordem das colunas, e a visibilidade delas.

Nenhuma.