Dashboards

Os dashboard sao páginas para construir visões consolidadas para os usuários.

Definindo o layour de Grid

O primeiro passo para construção de um dashboard é definir o layout de grid que será usado para incluir posteriormente os elemntos. Para definir o código do grid clique aqui utilize essa ferramenta online cpmo referência.

Exemplo de código CSS do layout grid:

display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 0px 0px;
grid-template-areas: 'kpi1 kpi1 kpi2' 'chart map map' 'chart map map';

INFO

Mesmo sendo um código CSS não devemos incluir chaves ({}), nem o nome da classe nesse campo, somente as tags de configuração.

Uma vez definido o código CSS do layout grid basta acessar a página onde vai ser construído o novo dashboard e entrar no "Modo de Edição Visual" clicando no switch no canto superior direito, confirme a imagem a baixo.

Agora clique no ícone de configuração da aba onde vai estar o dashboard para abrir as configurações.

Com o popup de configurações da aba aberto basta colar o código CSS do layout grid no campo Estilo para que a plataforma definir como a plataforma vai se comportar.

INFO

Para que o código CSS do layout grid funcione corretamente o atributo "Modo de Exibição" deve ser definido como "FLEX".

Caso seja necessário definir layouts de grid diferentes para cada resolução dos usuários você deve selecionar ativar o atributo "Layout Responsivo" e colar em casa um dos campos o layout correspondente a resolução.

Após essa etapa de configuração dos campos da Aba onde vai estar o dashboard basta clicar no botão de salvar.

Incluir slots Placeholder

Para preparar o dashboard e visualizar se o código do layout de grid está como deveria, devemos incluir agora Slots do tipo Placeholder para marcar a posição de cada elemento irá ocupar no futuro.

Para isso devemos entrar no "Modo de Edição Visual" e clicar nos controles da seção no último icone para criar um novo Slot.

Com o popup de configurações do Slot aberto basta selecionar no campo Tipo a opção Placeholder e informar no campo estilo o código da grid área que esse slot vsai ocupar no nosso layout que foi definido anteriormente.

Exemplo de código css para definir a área do layout para o Slot:

grid-area: chart;

INFO

Lembre-se de publicar as configurações para que seja possível visualizar o novo layout fora do "Modo de Edição Visual".

Widgets e Fontes de Dados

Após preparação do grid e do posicionamento dos slots devemos ir trocando o tipo do slot de placeholder para widget e selecionar qual widget vamos utilizar em cada slot. Para saber mais como configurar os slots do tipo widget clique aqui.