Componentes paramétricos

Tipo

Como fazer

Para

Desenvolvedor

Na tela

DataViz › Aplicação › Editar › Dashboards · HEC › Recursos e Permissões › Biblioteca de Widgets

Com um componente paramétrico, o código de um Widget Svelte vira um tipo de Widget da biblioteca. Quem programa escreve o código uma vez e declara no contrato quais campos ficam configuráveis. Quem monta Dashboards põe o componente na grade e preenche os campos, sem ver o código.

Antes de começar

Um Widget Svelte que já funciona. Em vez de fixar tabela, coluna e textos no código, leia tudo de config.

Criar o componente

1. No editor do Widget Svelte, clique em Transformar em paramétrico.
2. Na aba Contrato, declare os campos, no modo Visual (campo a campo) ou JSON. Todo campo que o código lê de config precisa estar no contrato.
3. Em Aparência do widget, defina fundo transparente e crescimento com o conteúdo. Isso vale para todas as instâncias.
4. Clique em Salvar como componente e dê nome, ícone e categoria.

O Widget que você editava vira a primeira instância do componente.

O painel de IA do editor também gera o código e o contrato juntos, a partir de uma descrição, no modo Paramétrico.

O código

O componente recebe app e config:

<script>
  import { onMount } from 'svelte';
  export let app;
  export let config; // { titulo, cor, valor, meta, ... }

  let total = '…';

  onMount(async () => {
    const coluna = app.columnFromString(config.valor);
    const dados = await app.fetchMatrix({ columns: [coluna] });
    total = app.formatValue(dados.Result?.[0]?.[0], coluna);
  });
</script>

<div class="p-4">
  <h3 style="color: {config.cor}">{config.titulo}</h3>
  <span class="text-3xl font-bold">{total}</span>
</div>

Campos com fórmula precisam ser avaliados pelo código; veja Fórmula por campo.

Testar

Enquanto o editor está aberto, o Widget de onde você o abriu mostra as mudanças na hora, com o selo Prévia da edição. As outras instâncias continuam na versão delas.

Para testar um rascunho salvo num Dashboard real, escolha o canal da instância no configurador, em Canal desta instância: Publicado (no ar) ou Rascunho (teste). O canal só aparece para quem pode editar o componente. O rascunho de um componente é um só: toda instância em rascunho, em qualquer Dashboard, mostra o mesmo código. Instâncias em rascunho mostram o selo Rascunho no editor do Dashboard.

Um componente que nunca foi publicado mostra o rascunho onde foi instanciado, e não aparece na biblioteca para os outros.

Publicar

Ação	O que faz
Publicar	Leva o rascunho para todas as instâncias, em todos os Dashboards, e volta todas ao canal publicado
Desfazer publicação	Volta o publicado à versão anterior, um nível. O rascunho não muda
Descartar rascunho	Troca o rascunho por uma cópia do publicado

Mudança de código ou de contrato só chega a quem usa depois de Publicar. Afeta N dashboard(s) mostra onde o componente está, em colunas Tenant, App, Dashboard e Canal.

Usar um componente

1. No Catálogo de widgets, escolha o componente. Aparecem só os publicados.
2. Ponha na grade.
3. Na aba Configurar, preencha os campos.

Biblioteca de Widgets no HEC

Em Recursos e Permissões › Biblioteca de Widgets, o HEC lista os componentes com o status de cada um (se há versão publicada e se há mudança no rascunho), as mesmas ações de publicar, desfazer e descartar, Onde está e a busca Buscar por nome ou categoria.

Quem vê e quem mexe

Um componente pertence a um Tenant ou a um Cliente. Cada pessoa vê os componentes do seu Tenant e os do Cliente dele.

Escopo	Quem edita, publica e troca o canal
Cliente	Usuários do Cliente com nível Superadministrador, Implantador ou Operador, e a equipe da HorusBI
Tenant	Quem tem a função de editar Aplicações no Tenant dono (os administradores têm), e a equipe da HorusBI

Um componente novo nasce no escopo do Cliente quando quem cria é da equipe da HorusBI ou usuário do Cliente com um desses níveis (e o Tenant pertence a um Cliente); nos outros casos, no do Tenant. Configurar os campos de uma instância só exige poder editar o Dashboard.

Relacionado

• Contrato do componente
• Widget Svelte
• Objeto app