Manual de Customização » Devcenter - Customizar... » Widget
Export

Widget

Widget é um elemento gráfico de interação, e fornecem funcionalidades e/ou informações ao usuário.

No agilityflow, são os elementos que compõem um dashboard.

Ao se criar um widget, é necessário definir algumas informações básicas.

  • Tipo: existem dois tipos de widgets:
    • Nativo: o tipo Nativo é reservado para futuras implementações de widgets nativos do sistema, como o de rascunhos e o de pendências. Essa opção não deve ser utilizada.
    • Customizado: é a opção que permite criar um widget sob-medida. Essa é a opção que deve ser utilizada.
  • Nome: um nome para identificar o widget na montagem do dashboard.
  • Descrição: um nome para ajudar na identificação do widget na montagem do dashboard.
  • Categoria: escolha ou crie uma categoria, para organizar os widgets.
  • Subcategoria: escolhe ou crie uma subcategoria, para organizar os widgets.


Ao adicionar o widget no dashboard, como no exemplo acima, é possível identificar o widget pelo nome (Pendências para aprovação), pela categoria (Fluxo de Aprovação), pela subcategoria (Aprovação) e pela descrição no quadro maior (em cinza).

  • Ativo: é possível deixar um widget ativo ou inativo. Isso permite ao usuário não mais permitir o uso de um widget, sem a necessidade de removê-lo e posteriormente, caso necessário, ter que criá-lo novamente.
  • Url (Mvc Action), altura e largura do Widget: essas opção estão disponíveis para widgets do tipo nativo. Não devem ser utilizadas.

Montar o Widget

Quando se seleciona o tipo customizado, o botão 'Montar o Widget' fica disponível. Ao clicar, é possível configurar as características do widget.

Todo widget tem um título. Esse título pode ou não ser exibido, usando a opção 'Mostrar Título do Box'.

Outra opção, é a cor do tema. Ela pode ser escolhida na opção tema. As opções de cores são:

  • Branco (padrão)
  • Cinza
  • Azul
  • Verde
  • Roxo
  • Vermelho
  • Amarelo

Para alterar o tamanho de um widget

Adicionar elemento

Em um widget, é possível adicionar vários elementos, e de vários tipos.

Label

É um texto, que pode ser fixo ou dinâmico. Caso seja dinâmico, o texto deve ser o resultado de uma query SQL. Essa query vai ter seu resultado atribuído à variáveis. Para utilizá-las, basta escrever @ e selecionar a variável. É possível combinar textos com variáveis.

Caso seja fixo, basta digitar o texto normalmente.

Além disso, é possível formatar o texto de várias maneiras, como definir o alinhamento vertical e horizontal do texto, tamanho e fonte.

E por fim, é possível que ao clicar no texto, o usuário seja levado a um link. Basta preencher a URL.

Ao posicionar qualquer elemento no widget, é possível redimensioná-lo usando o ícone .

Ícone

É possível adicionar um ícone como elemento de um widget. Basta selecionar um ícone em uma das bibliotecas disponíveis. Ainda é possível editar alinhamento (vertical e horizontal), tamanho, cor e criar um link.

Imagem

Para fazer o upload de uma imagem, basta clicar no retângulo ou arrastar um arquivo até ele.

É possível formatar largura, altura e alinhamento (vertical e horizontal) e criar um link.

Gráfico

Ao se adicionar um gráfico, é possível escolher entre duas origem dos dados:

Criar uma tabela com dados Estáticos

Nessa opção, o usuário define os dados de maneira manual em uma tabela, como uma planilha. É possível adicionar dados em linhas e colunas, usando os botões .

Ao clicar na opção 'Editar tipo e propriedades do gráfico' ou no ícone , é possível definir o tipo do gráfico.

O sistema já sugere o gráfico mais recomendado na guia início. Clicando na aba Gráficos (ou em 'Mais »'), o sistema exibe todos os demais gráficos disponíveis.

Na aba Personalizar é possível editar as características do gráfico selecionado, como título, legenda, fonte, cores, entre outros.

Fonte de dados Dinâmica

Nesse caso, é necessário criar uma query para se obter os dados. As demais configurações, seguem o padrão do exemplo acima.

Tabela de Dados

Quando o elemento é a tabela de dados, a fonte para essa tabela, só pode ser dinâmica, ou seja, através de uma query.

Query

No exemplo abaixo, queremos uma tabela com a lista de autores cadastrados no sistema. A query está obtendo os campos 'id', 'nome', 'sexo' e 'nacionalidade' da tabela 'x_tbl_autor'.

select nome, sexo, nacionalidade from x_tbl_autor

Esse é um exemplo de um resultado dessa query:

Uma vez a query montada, é possível formatar a tabela.

Configuração das colunas da tabela
  • Ordem das colunas: clique no ícone image-1552335541995.png e arraste a coluna para a posição desejada;
  • Nome de apresentação: edite o nome da coluna;
  • Largura em %: deixe 'padrão' para uma divisão igual da largura entre as colunas. Caso contrário, informe em porcentagem a largura de cada coluna;
  • Visível: ligador por padrão, é possível ocultar uma coluna sem precisar alterar a query;
  • Prefixo: é possível incluir um texto antes dos valores dessa coluna;
  • Sufixo: é possível incluir um texto depois dos valores dessa coluna;
  • Informação no rodapé:
    • Cálculo: é possível fazer um cálculo (numérico ou hora) e informar no rodapé da coluna. Os valores nessa coluna precisam ser do tipo inteiro ou decimal (para cálculo numérico) ou estar no formato de hora HH:mm (para cálculo em hora)
    • Máscara: caso o cálculo seja numérico, escolha a máscara apropriada para o resultado. Para cálculo em hora, a máscara HH:mm é preenchida automaticamente.
Ordenação

Selecione o campo que será ordenada as informações, e escolha se a ordenação é crescente ou decrescente.

Paginação

Escolha a quantidade de registros por página.

Header

Permite mostrar ou não o cabeçalho da tabela;

É possível redirecionar o usuário caso haja um click na linha. Esse link pode ser interno no agilityflow ou externo. Caso seja interno, é possível escolher se o link será aberto como:

  • Um lightbox;
  • Na mesma janela;
  • Uma nova janela;
Tabelas de dados filha (Master e Detail)

Além de uma tabela, é possível agrupar uma tabela em cada linha dessa primeira tabela, configurada no exemplo acima.

tabela_filha_widget.gif

Para isso, basta adicionar uma tabela de dados filha. Ao fazer isso, o mesmo processo de configuração de uma tabela de dados comum é iniciado, mas com uma diferença.

Caso essa tabela filha tenha relação com a tabela principal, basta obter a coluna id na query da tabela principal. Esse valor, é passado para a tabela filha, em uma variável chamada @master_id.

No exemplo acima, ao clicar no nome do autor, é apresentado a lista de livros cadastradas no sistema relacionados com esse autor. A query ficaria assim:

select x_tbl_livro.nome as NomeLivro, x_tbl_livro.ano as Ano from x_autor_livro 
inner join x_tbl_livro on id_x_tbl_livro = x_tbl_livro.id
where id_x_tbl_autor = @master_id

A tabela filha, apesar de recomendado, não precisa ter relação com a tabela principal.

 

 

 

 

 

 

 

 

 

Back to top