5.1 - Como reorganizar cards no dashboard
Como reorganizar cards no dashboard
Depois de criar os itens, você raramente vai gostar da disposição inicial. O boardkit tem um modo de edição visual onde você arrasta, redimensiona e salva o layout sem mexer em código. Veja no GIF abaixo.
Como acessar o modo de edição
No canto superior direito do dashboard, há um botão com ícone (bloco). Clique nele para entrar no modo edit:
Caminho
- Abra o dashboard desejado.
- No topo direito, localize o botão com ícone .
- Clique. O sistema entra em modo de edição e mostra os controles.
- Faça as mudanças (arrastar, redimensionar, remover).
- Clique em Salvar como padrão ou Salvar para mim.
Apenas managers veem o botão
O botão só aparece para usuários com o grupo boardkit_dashboard.group_boardkit_manager. Usuários comuns podem visualizar o dashboard mas não editar o layout.
O que dá para fazer no modo edit
GIF abaixo mostra o fluxo completo — arrastar um card de posição:
GIF real do boardkit — arrastando o card "In Digitation" da primeira para a quarta posição.
3 ações disponíveis
Arrastar
Pega pelo cabeçalho do card (ícone +) e arrasta até a nova posição. Aparece um slot fantasma indicando onde vai cair.
Soltar fora do grid = cancela.
Redimensionar
Pega pelo canto inferior direito (marcador amarelo) e arrasta para esticar ou encolher. O grid tem 12 colunas.
Tiles usam 1-3 colunas; gráficos, 4-6.
Remover
Botão X no canto do card (aparece em modo edit). Atenção: remove só do dashboard atual, não do item em si.
Para excluir o item, use o menu ⋮.
Os 3 modos de salvar
Depois das mudanças, há 3 botões no topo direito do modo edit. A escolha depende do seu papel:
| Botão | Quem vê | O que faz |
|---|---|---|
| Save as Default | Apenas managers | Salva como layout padrão do dashboard. Todos os usuários passam a ver essa versão. |
| Save for Me | Apenas managers | Salva como layout pessoal do manager, sem afetar os outros usuários. |
| Save Layout | Todos os usuários | Salva como layout pessoal do usuário logado. O layout default do dashboard não muda. |
Layout default vs layout pessoal
Cada usuário vê primeiro o layout default do dashboard (definido pelo manager). Se ele editar e salvar, vira o layout pessoal dele — sem afetar ninguém mais. Para voltar ao default, basta Descartar.
Sobre o grid de 12 colunas
O boardkit usa um grid CSS de 12 colunas (mesmo padrão do Bootstrap). Cada card ocupa um número de colunas × linhas:
Tamanhos típicos
| Tipo | Tamanho sugerido | Por quê |
|---|---|---|
tile | 3×1 ou 4×1 | Número grande — não precisa de muito espaço. |
kpi | 3×1 | Semelhante ao tile, mas com mais detalhes visuais. |
bar, line, pie | 6×2 ou 12×2 | Gráfico precisa de largura para legibilidade. |
map | 12×3 | Mapa é melhor em tela cheia. |
list | 6×2 ou 12×2 | Tabelas longas pedem mais altura. |
Dicas práticas
Faça
- Comece com os KPIs mais importantes no topo (regra do Z).
- Deixe os detalhes (listas, mapas) na metade inferior.
- Use tamanhos proporcionais — um KPI "faturamento" merece 4 colunas, um "atrasadas" só 2.
- Salve como padrão depois de testar — é o que outros usuários verão.
Evite
- Sobrepor cards (o boardkit não permite, mas você verá um aviso).
- Redimensionar um tile para mais de 6 colunas — fica vazio.
- Editar e não salvar — ao sair do modo edit, perde tudo (clique Descartar também perde).
- Criar layouts muito diferentes para cada usuário (dificulta o suporte).
Como voltar ao layout default?
Para resetar seu layout pessoal, vá em Configuração → Meus layouts (ou peça ao manager para desmarcar o layout pessoal no seu perfil). O default reaparece imediatamente.
Capítulo 5 iniciado!
Você agora sabe reorganizar visualmente qualquer dashboard. No próximo passo, vamos entender como o layout pessoal se relaciona com o layout default do painel.
Agora que você sabe reorganizar visualmente, vamos entender como navegar pela biblioteca de dashboards.
Modo edit visual: como arrastar, redimensionar e salvar cards no grid de 12 colunas. Layout default vs pessoal.
Por enquanto não há comentários.