Editor Visual de Vistas de Utilizador

O editor visual permite compor uma vista arrastando widgets para um canvas. As modificações são guardadas em rascunho e o estado de salvamento é mostrado na barra superior.

Barra de Ferramentas

As ações principais são:

• Desfazer e Refazer;
• Página, para adicionar uma nova página;
• Dados, para gerir as fontes;
• Widget de Vista, para encontrar e controlar os widgets já inseridos;
• Pré-visualizar;
• seleção e comparação de Versões;
• Publicar.

Antes de fechar o editor, aguarde que o estado confirme o salvamento.

Páginas

Uma vista pode conter várias páginas. As abas acima do canvas permitem:

• selecionar a página atual;
• adicionar uma página;
• renomeá-la;
• reordená-la;
• eliminá-la quando não for mais necessária.

O widget Navegador de Páginas torna disponível a mesma navegação na vista publicada.

Canvas e Grade

O canvas usa uma grade de 48 colunas, para tornar o posicionamento mais preciso. As vistas criadas com a grade anterior de 24 colunas são atualizadas automaticamente sem alterar o espaço visual dos widgets. Arraste um widget da paleta e solte-o na posição desejada.

Cada widget pode ser:

• movido;
• redimensionado;
• duplicado;
• eliminado;
• configurado no painel Propriedades.

Os comandos de zoom permitem reduzir ou aumentar o canvas, restaurar 100% ou usar Ajustar para mostrar toda a área disponível.

Para cada página, é possível configurar largura, altura, ajuste automático ao viewport, fundo, visibilidade da grade e política de atualização de dados.

A opção Atualização de Dados oferece três modos:

• Apenas no carregamento inicial da vista, padrão: ao abrir, todas as páginas são carregadas e os dados são depois reutilizados durante a navegação;
• Em cada abertura da página: ao regressar à página, os widgets executam novamente as queries;
• Automático enquanto a página está visível: a página ativa é atualizada no intervalo configurado, que não pode ser inferior a 30 segundos.

Filtros, drill, comandos de atualização e atualizações solicitadas pelas ações Workflow continuam a carregar os dados interessados mesmo no modo padrão.

Paleta de Widgets

A paleta é dividida por famílias.

Família	Exemplos
Dados	Gráficos de barras, linhas, área, pizza e donut; KPI; gauge; tabela; detalhe de registo; mapas.
Conteúdo	Texto, título de secção, imagem, HTML seguro e, se ativado, widget personalizado.
Layout	Separador, painel, painel colapsável, barra lateral (sidebar), abas e drawer.
Navegação	Link Sybot e navegador de páginas.
Controles	Atualização, filtros, filtros ativos, reset e visibilidade do widget.
Workflow	Início, ações em registo, ações múltiplas, estado, log e console Workflow.
Diagnóstico	Estado da vista, das fontes e das operações disponíveis.

O campo Pesquisar widget filtra a paleta por nome.

Catálogos Reutilizáveis

Os botões Widget personalizado e Imagens, acima da pesquisa, abrem os catálogos partilhados. É possível passar da vista de pré-visualização para a lista detalhada, pesquisar os elementos e selecionar mais de um para importar ou exportar. O painel à direita mostra o proprietário, os utilizadores autorizados e as Vistas onde o elemento já foi usado.

• um Visualizador pode usar o elemento numa Vista que pode editar;
• um Editor pode também sobrescrever o elemento do catálogo com uma nova revisão;
• o Proprietário gere partilhas e exclusão.

A exclusão resume os utilizadores e Vistas afetados, mas não remove as cópias já inseridas: cada Vista permanece autónoma. Pelo mesmo motivo, modificar uma cópia local não atualiza silenciosamente o catálogo. O proprietário gere os acessos pesquisando o utilizador individual por nome, username ou email e atribuindo-lhe o grant Visualizador ou Editor; o painel não carrega a anagrafe completa de utilizadores.

No editor relativo, Promover para o catálogo torna um Widget personalizado reutilizável. Imagens locais podem ser promovidas a partir do Catálogo de imagens da Visão; ao selecionar uma imagem partilhada, é criada uma cópia local. No catálogo de imagens, é possível selecionar ou arrastar vários ficheiros de uma só vez. A pré-visualização de um Widget personalizado no catálogo é estática quando o componente requer JavaScript ou dados: a execução completa ocorre após a inserção na Visão.

Propriedades da visão

A secção Visão controla:

• descrição;
• tema claro, escuro ou do sistema;
• fonte;
• densidade;
• espaçamento;
• disponibilidade de filtros avançados em tempo de execução.

As propriedades do widget selecionado dependem do seu tipo e incluem conteúdo, fonte de dados, formatos, estilo, comportamento e interações.

Para Filtro de categorias, é possível escolher separadamente o modo de inserção e a seleção única ou múltipla. Para widgets que iniciam Workflows, a secção Interações mostra os parâmetros não ficheiro do Workflow selecionado: cada parâmetro pode usar o valor padrão do Workflow, um valor padrão guardado no widget ou uma fórmula fx. A opção dedicada estabelece se o painel de parâmetros deve aparecer antes do início e na Pré-visualização.

Para gráficos de linhas e de área, Dados e visualização inclui também o grupo dedicado à aparência da linha. É possível escolher espessura, tamanho e forma do indicador dos pontos — nenhum, círculo, losango, triângulo, linha vertical ou X — e usar uma linha Tracejada ou uma Curva suavizada. As definições aplicam-se a todas as séries do widget, enquanto a cor permanece configurável por série.

Conteúdos

Painéis, sidebars, abas e drawers podem conter outros widgets.

• Painel: agrupa elementos com uma grade interna.
• Painel colapsável: pode ser aberto ou fechado pelo utilizador e usa toda a altura atribuída ao widget, deixando aos conteúdos o espaço disponível abaixo do cabeçalho.
• Sidebar: ancora-se à esquerda ou à direita e pode iniciar fechada.
• Abas: dividem os widgets em visões locais do mesmo conteúdo.
• Drawer: mostra informações num painel sobreposto, muitas vezes em resposta a uma seleção.

O painel Widget de visão ajuda a localizar widgets aninhados e a controlar a sua visibilidade no design e em tempo de execução sem os eliminar. Cada item usa o mesmo ícone com que o tipo de widget é identificado na paleta; as réguas e linhas mostram, em vez disso, a relação entre conteúdos e filhos.

Estilo e formatação

Cada widget pode herdar o estilo da visão ou usar definições específicas para:

• cores e tipografia;
• fundo e borda;
• espaçamento e alinhamento;
• sombra e raio dos cantos;
• cabeçalho e ícone;
• formato de números, datas e moeda; o local e a moeda são escolhidos em listas de valores suportados e usam, respetivamente, it-IT e EUR como valores padrão.

A formatação condicional aplica um estilo quando uma regra sobre os dados resulta verdadeira. As condições são avaliadas na ordem mostrada e prevalece a primeira satisfeita.

A visibilidade dinâmica mostra um widget apenas quando a fórmula configurada retorna verdadeiro. A regra aplicada a um conteúdo envolve também os seus filhos.

HTML e widgets personalizados

O widget HTML seguro aceita conteúdo HTML controlado; os elementos não permitidos são removidos.

O Widget personalizado, quando ativado pelo administrador, usa um editor separado para HTML, CSS, JavaScript, fallback PDF e Pré-visualização isolada. O código é executado numa área isolada e pode interagir com a visão apenas através das funções disponibilizadas pelo editor.

Quando o widget usa uma Fonte de dados, o contexto inicial passado ao código já contém o primeiro conjunto de resultados tanto na Pré-visualização quanto na Visão publicada. As variações subsequentes são comunicadas como atualizações do contexto.

Não insira credenciais ou informações confidenciais no código: o conteúdo publicado pode ser consultado pelo navegador.

Importação e exportação de catálogos

Ambos os catálogos permitem seleção múltipla e produzem pacotes JSON importáveis. Na presença de um elemento já existente, a importação propõe reutilização, sobrescrita quando autorizada, duplicação com novo nome ou exclusão.

A exportação de uma Visão também propõe widgets personalizados e imagens como dependências opcionais. Durante a importação da Visão, o Sybot mostra as dependências incluídas e permite aplicar a política desejada a cada uma. Quando um duplicado é criado, as referências são atualizadas automaticamente. As cópias já incorporadas na Visão permanecem disponíveis mesmo que a dependência de catálogo correspondente seja ignorada.

Melhores práticas

• projetar primeiro a hierarquia das informações;
• limitar o número de gráficos simultâneos;
• usar títulos e mensagens sem dados compreensíveis;
• verificar sempre tema claro e escuro;
• testar layout, filtros e contêineres em Pré-visualização;
• usar o widget Diagnóstico em uma área dedicada quando a visão combina muitas fontes ou Workflows.