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*'. ```SQL 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 [](http://wiki.agilityflow.io/uploads/images/gallery/2019-03-Mar/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; ##### Link da Linha É 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. [](http://wiki.agilityflow.io/uploads/images/gallery/2019-03-Mar/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: ```SQL 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.