Criando Widgets Customizados no EPM Portal

Para adicionar um novo Widget de usuário, deve-se clicar com o botão direito sobre a pasta Private e selecionar a opção Add. Também é possível importar um Widget previamente salvo para edição ou evolução.

O Editor funciona como um verdadeiro playground de criação. Trata-se de um ambiente completo no qual o desenvolvedor:

• escreve o código do Widget;

• define dependências de bibliotecas externas (como bibliotecas gráficas ou de processamento de dados);

• visualiza, em tempo real, o comportamento do componente.

Nesse ambiente, são definidos principalmente:

• Propriedades de configuração: campos que poderão ser editados pelo usuário final, como cores, limites de escala ou tags de dados.

• Comportamento dinâmico: regras de atualização do Widget conforme mudanças nos dados em tempo real.

• Testes unitários e visuais: validação do funcionamento antes da distribuição.

2. Anatomia de um Widget (padrão Angular)

A arquitetura de Widgets no EPM Portal é baseada em Angular, garantindo desempenho, modularidade e facilidade de manutenção. Para funcionar corretamente, um Widget é composto por três arquivos fundamentais:

• TypeScript (.ts)
  Representa o “cérebro” do Widget. Nele são definidas a lógica de negócio, o processamento das variáveis provenientes do EPM Server e o gerenciamento do estado do componente. Também é onde se utilizam os ciclos de vida do Angular, como o ngOnInit, para inicializar gráficos, tabelas ou outros elementos visuais.

• HTML (.html)
  Define a estrutura visual do Widget. É nesse arquivo que os elementos exibidos ao usuário são organizados, utilizando os mecanismos de data binding do Angular para apresentar os valores processados no TypeScript.

• SCSS (.scss)
  Responsável pela estilização avançada do Widget. O uso de SASS (Syntactically Awesome Style Sheets) permite trabalhar com estilos aninhados, variáveis e organização mais eficiente do código visual, garantindo uma aparência profissional e consistente com o tema do EPM Portal.

3. Distribuição e instalação: o Extension

Após o desenvolvimento, testes e refinamentos no Editor, o Widget pode ser empacotado para distribuição. Esse processo gera um arquivo que contém todos os recursos necessários para que o Widget funcione de forma independente.

A área Extension é o centro de gerenciamento dessas extensões no EPM Portal. Nela:

• o administrador realiza o upload do pacote do Widget;

• o Widget passa a integrar a biblioteca global do EPM Portal;

• novas versões podem ser instaladas para atualizar Widgets já utilizados em dashboards existentes.

Benefícios da criação de Widgets próprios

A possibilidade de desenvolver Widgets customizados traz vantagens estratégicas tanto para equipes de operação quanto para integradores e fornecedores de soluções:

• Personalização total: criação de visualizações que não existem nos Widgets nativos, adaptadas a necessidades específicas, como diagramas de processos complexos ou cálculos de KPIs proprietários.

• Escalabilidade e reuso: o Widget é desenvolvido uma única vez e pode ser instalado em múltiplos servidores EPM Portal por meio da área Extension, garantindo padronização técnica.

• Integração com terceiros: possibilidade de utilizar bibliotecas JavaScript externas, como D3.js, Chart.js ou Three.js para visualizações avançadas e até 3D. Atualmente, é necessário solicitar à Elipse a inclusão dessas bibliotecas no EPM Portal; entretanto, já está prevista a possibilidade de o próprio usuário gerenciar essas dependências em versões futuras.

• Propriedade intelectual: empresas de engenharia podem encapsular algoritmos, regras de negócio e lógicas de visualização em Widgets próprios, distribuindo-os como um diferencial competitivo.

Conclusão

A criação de Widgets customizados no EPM Portal amplia significativamente as possibilidades da plataforma, permitindo que ela se adapte a cenários industriais complexos e específicos. Ao combinar um ambiente de desenvolvimento robusto, baseado em Angular, com um modelo organizado de distribuição via Extensions, o EPM Portal se consolida como uma solução flexível, escalável e preparada para evoluções futuras.