{"id":17371,"date":"2026-01-21T11:40:13","date_gmt":"2026-01-21T14:40:13","guid":{"rendered":"https:\/\/kb.elipse.com.br\/?p=17371"},"modified":"2026-02-10T11:47:52","modified_gmt":"2026-02-10T14:47:52","slug":"criando-widgets-customizados-no-epm-portal","status":"publish","type":"post","link":"https:\/\/kb.elipse.com.br\/en\/criando-widgets-customizados-no-epm-portal\/","title":{"rendered":"Criando Widgets Customizados no EPM Portal"},"content":{"rendered":"<div id=\"model-response-message-contentr_c523236be5b77eb8\" class=\"markdown markdown-main-panel stronger enable-updated-hr-color\" dir=\"ltr\">\n<p data-start=\"214\" data-end=\"462\">Este artigo detalha o fluxo de desenvolvimento de <strong data-start=\"264\" data-end=\"302\">Widgets customizados no EPM Portal<\/strong>, um recurso avan\u00e7ado que transforma a plataforma em um <strong data-start=\"358\" data-end=\"411\">ecossistema extens\u00edvel e altamente personaliz\u00e1vel<\/strong> para a visualiza\u00e7\u00e3o e gest\u00e3o de dados industriais.<\/p>\n<hr data-start=\"464\" data-end=\"467\" \/>\n<h2 data-start=\"469\" data-end=\"539\">Criando Widgets customizados no EPM Portal: do Editor ao Deployment<\/h2>\n<p data-start=\"541\" data-end=\"844\">O <strong data-start=\"543\" data-end=\"557\">EPM Portal<\/strong> oferece total liberdade para desenvolvedores e integradores que desejam ir al\u00e9m dos componentes nativos. Por meio de um ambiente de desenvolvimento integrado, \u00e9 poss\u00edvel criar ferramentas de visualiza\u00e7\u00e3o e controle sob medida, utilizando <strong data-start=\"796\" data-end=\"843\">tecnologias modernas de desenvolvimento web<\/strong>.<\/p>\n<hr data-start=\"846\" data-end=\"849\" \/>\n<h2 data-start=\"851\" data-end=\"896\">1. O ambiente de desenvolvimento: o Editor<\/h2>\n<p data-start=\"898\" data-end=\"1059\">Ao acessar o menu <strong data-start=\"916\" data-end=\"926\">Editor<\/strong>, o usu\u00e1rio tem acesso \u00e0 lista de <strong data-start=\"960\" data-end=\"982\">Widgets de usu\u00e1rio<\/strong> dispon\u00edveis. Basta clicar sobre o nome de um Widget para iniciar sua edi\u00e7\u00e3o.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-17372\" src=\"https:\/\/kb.elipse.com.br\/wp-content\/uploads\/2026\/01\/17371\/UserWidgetEditor.png\" alt=\"\" width=\"1861\" height=\"952\" srcset=\"https:\/\/kb.elipse.com.br\/wp-content\/uploads\/2026\/01\/17371\/UserWidgetEditor.png 1861w, https:\/\/kb.elipse.com.br\/wp-content\/uploads\/2026\/01\/17371\/UserWidgetEditor-300x153.png 300w, https:\/\/kb.elipse.com.br\/wp-content\/uploads\/2026\/01\/17371\/UserWidgetEditor-1024x524.png 1024w, https:\/\/kb.elipse.com.br\/wp-content\/uploads\/2026\/01\/17371\/UserWidgetEditor-768x393.png 768w, https:\/\/kb.elipse.com.br\/wp-content\/uploads\/2026\/01\/17371\/UserWidgetEditor-1536x786.png 1536w\" sizes=\"(max-width: 1861px) 100vw, 1861px\" \/><\/p>\n<\/div>\n<p data-path-to-node=\"5\">Para adicionar um novo Widget de usu\u00e1rio, deve-se clicar com o bot\u00e3o direito sobre a pasta <strong data-start=\"1152\" data-end=\"1163\">Private<\/strong> e selecionar a op\u00e7\u00e3o <strong data-start=\"1185\" data-end=\"1192\">Add<\/strong>. Tamb\u00e9m \u00e9 poss\u00edvel importar um Widget previamente salvo para edi\u00e7\u00e3o ou evolu\u00e7\u00e3o.<\/p>\n<p data-path-to-node=\"5\"><img loading=\"lazy\" class=\"aligncenter size-full wp-image-17373\" src=\"https:\/\/kb.elipse.com.br\/wp-content\/uploads\/2026\/01\/17371\/UserWidgetAdd.png\" alt=\"\" width=\"471\" height=\"200\" srcset=\"https:\/\/kb.elipse.com.br\/wp-content\/uploads\/2026\/01\/17371\/UserWidgetAdd.png 471w, https:\/\/kb.elipse.com.br\/wp-content\/uploads\/2026\/01\/17371\/UserWidgetAdd-300x127.png 300w\" sizes=\"(max-width: 471px) 100vw, 471px\" \/><\/p>\n<p data-path-to-node=\"5\">O <strong data-start=\"1277\" data-end=\"1287\">Editor<\/strong> funciona como um verdadeiro <em data-start=\"1316\" data-end=\"1328\">playground<\/em> de cria\u00e7\u00e3o. Trata-se de um ambiente completo no qual o desenvolvedor:<\/p>\n<ul>\n<li data-start=\"1400\" data-end=\"1431\">\n<p data-start=\"1402\" data-end=\"1431\">escreve o c\u00f3digo do Widget;<\/p>\n<\/li>\n<li data-start=\"1432\" data-end=\"1537\">\n<p data-start=\"1434\" data-end=\"1537\">define depend\u00eancias de bibliotecas externas (como bibliotecas gr\u00e1ficas ou de processamento de dados);<\/p>\n<\/li>\n<li data-start=\"1538\" data-end=\"1596\">\n<p data-start=\"1540\" data-end=\"1596\">visualiza, em tempo real, o comportamento do componente.<\/p>\n<\/li>\n<\/ul>\n<p data-path-to-node=\"5\"><img loading=\"lazy\" class=\"aligncenter size-full wp-image-17374\" src=\"https:\/\/kb.elipse.com.br\/wp-content\/uploads\/2026\/01\/17371\/UserWidgetEditor1.png\" alt=\"\" width=\"1864\" height=\"957\" srcset=\"https:\/\/kb.elipse.com.br\/wp-content\/uploads\/2026\/01\/17371\/UserWidgetEditor1.png 1864w, https:\/\/kb.elipse.com.br\/wp-content\/uploads\/2026\/01\/17371\/UserWidgetEditor1-300x154.png 300w, https:\/\/kb.elipse.com.br\/wp-content\/uploads\/2026\/01\/17371\/UserWidgetEditor1-1024x526.png 1024w, https:\/\/kb.elipse.com.br\/wp-content\/uploads\/2026\/01\/17371\/UserWidgetEditor1-768x394.png 768w, https:\/\/kb.elipse.com.br\/wp-content\/uploads\/2026\/01\/17371\/UserWidgetEditor1-1536x789.png 1536w\" sizes=\"(max-width: 1864px) 100vw, 1864px\" \/><\/p>\n<p data-start=\"1598\" data-end=\"1643\">Nesse ambiente, s\u00e3o definidos principalmente:<\/p>\n<ul data-start=\"1645\" data-end=\"1973\">\n<li data-start=\"1645\" data-end=\"1782\">\n<p data-start=\"1647\" data-end=\"1782\"><strong data-start=\"1647\" data-end=\"1679\">Propriedades de configura\u00e7\u00e3o<\/strong>: campos que poder\u00e3o ser editados pelo usu\u00e1rio final, como cores, limites de escala ou tags de dados.<\/p>\n<\/li>\n<li data-start=\"1783\" data-end=\"1889\">\n<p data-start=\"1785\" data-end=\"1889\"><strong data-start=\"1785\" data-end=\"1811\">Comportamento din\u00e2mico<\/strong>: regras de atualiza\u00e7\u00e3o do Widget conforme mudan\u00e7as nos dados em tempo real.<\/p>\n<\/li>\n<li data-start=\"1890\" data-end=\"1973\">\n<p data-start=\"1892\" data-end=\"1973\"><strong data-start=\"1892\" data-end=\"1922\">Testes unit\u00e1rios e visuais<\/strong>: valida\u00e7\u00e3o do funcionamento antes da distribui\u00e7\u00e3o.<\/p>\n<\/li>\n<\/ul>\n<hr data-start=\"1975\" data-end=\"1978\" \/>\n<h2 data-start=\"1980\" data-end=\"2024\">2. Anatomia de um Widget (padr\u00e3o Angular)<\/h2>\n<p data-start=\"2026\" data-end=\"2236\">A arquitetura de Widgets no EPM Portal \u00e9 baseada em <strong data-start=\"2078\" data-end=\"2089\">Angular<\/strong>, garantindo desempenho, modularidade e facilidade de manuten\u00e7\u00e3o. Para funcionar corretamente, um Widget \u00e9 composto por tr\u00eas arquivos fundamentais:<\/p>\n<ul data-start=\"2238\" data-end=\"3120\">\n<li data-start=\"2238\" data-end=\"2577\">\n<p data-start=\"2240\" data-end=\"2577\"><strong data-start=\"2240\" data-end=\"2260\">TypeScript (.ts)<\/strong><br data-start=\"2260\" data-end=\"2263\" \/>Representa o \u201cc\u00e9rebro\u201d do Widget. Nele s\u00e3o definidas a l\u00f3gica de neg\u00f3cio, o processamento das vari\u00e1veis provenientes do EPM Server e o gerenciamento do estado do componente. Tamb\u00e9m \u00e9 onde se utilizam os ciclos de vida do Angular, como o <code data-start=\"2502\" data-end=\"2512\">ngOnInit<\/code>, para inicializar gr\u00e1ficos, tabelas ou outros elementos visuais.<\/p>\n<\/li>\n<\/ul>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-17375\" src=\"https:\/\/kb.elipse.com.br\/wp-content\/uploads\/2026\/01\/17371\/UserWidgetTS.png\" alt=\"\" width=\"1027\" height=\"456\" srcset=\"https:\/\/kb.elipse.com.br\/wp-content\/uploads\/2026\/01\/17371\/UserWidgetTS.png 1027w, https:\/\/kb.elipse.com.br\/wp-content\/uploads\/2026\/01\/17371\/UserWidgetTS-300x133.png 300w, https:\/\/kb.elipse.com.br\/wp-content\/uploads\/2026\/01\/17371\/UserWidgetTS-1024x455.png 1024w, https:\/\/kb.elipse.com.br\/wp-content\/uploads\/2026\/01\/17371\/UserWidgetTS-768x341.png 768w\" sizes=\"(max-width: 1027px) 100vw, 1027px\" \/><\/p>\n<ul data-path-to-node=\"10\">\n<li>\n<p data-path-to-node=\"10,1,0\"><strong data-start=\"2581\" data-end=\"2597\">HTML (.html)<\/strong><br data-start=\"2597\" data-end=\"2600\" \/>Define a estrutura visual do Widget. \u00c9 nesse arquivo que os elementos exibidos ao usu\u00e1rio s\u00e3o organizados, utilizando os mecanismos de <em data-start=\"2737\" data-end=\"2751\">data binding<\/em> do Angular para apresentar os valores processados no TypeScript.<\/p>\n<\/li>\n<\/ul>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-17376\" src=\"https:\/\/kb.elipse.com.br\/wp-content\/uploads\/2026\/01\/17371\/UserWidgetHTML.png\" alt=\"\" width=\"623\" height=\"248\" srcset=\"https:\/\/kb.elipse.com.br\/wp-content\/uploads\/2026\/01\/17371\/UserWidgetHTML.png 623w, https:\/\/kb.elipse.com.br\/wp-content\/uploads\/2026\/01\/17371\/UserWidgetHTML-300x119.png 300w\" sizes=\"(max-width: 623px) 100vw, 623px\" \/><\/p>\n<ul data-path-to-node=\"10\">\n<li>\n<p data-path-to-node=\"10,2,0\"><strong data-start=\"2820\" data-end=\"2836\">SCSS (.scss)<\/strong><br data-start=\"2836\" data-end=\"2839\" \/>Respons\u00e1vel pela estiliza\u00e7\u00e3o avan\u00e7ada do Widget. O uso de <strong data-start=\"2899\" data-end=\"2944\">SASS (Syntactically Awesome Style Sheets)<\/strong> permite trabalhar com estilos aninhados, vari\u00e1veis e organiza\u00e7\u00e3o mais eficiente do c\u00f3digo visual, garantindo uma apar\u00eancia profissional e consistente com o tema do EPM Portal.<\/p>\n<\/li>\n<\/ul>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-17377\" src=\"https:\/\/kb.elipse.com.br\/wp-content\/uploads\/2026\/01\/17371\/UserWidgetSCSS.png\" alt=\"\" width=\"671\" height=\"332\" srcset=\"https:\/\/kb.elipse.com.br\/wp-content\/uploads\/2026\/01\/17371\/UserWidgetSCSS.png 671w, https:\/\/kb.elipse.com.br\/wp-content\/uploads\/2026\/01\/17371\/UserWidgetSCSS-300x148.png 300w\" sizes=\"(max-width: 671px) 100vw, 671px\" \/><\/p>\n<hr data-start=\"3122\" data-end=\"3125\" \/>\n<h2 data-start=\"3127\" data-end=\"3171\">3. Distribui\u00e7\u00e3o e instala\u00e7\u00e3o: o Extension<\/h2>\n<p data-start=\"3173\" data-end=\"3398\">Ap\u00f3s o desenvolvimento, testes e refinamentos no Editor, o Widget pode ser empacotado para distribui\u00e7\u00e3o. Esse processo gera um arquivo que cont\u00e9m todos os recursos necess\u00e1rios para que o Widget funcione de forma independente.<\/p>\n<p data-path-to-node=\"12\"><img loading=\"lazy\" class=\"aligncenter size-full wp-image-17378\" src=\"https:\/\/kb.elipse.com.br\/wp-content\/uploads\/2026\/01\/17371\/UserWidgetExtension.png\" alt=\"\" width=\"1183\" height=\"792\" srcset=\"https:\/\/kb.elipse.com.br\/wp-content\/uploads\/2026\/01\/17371\/UserWidgetExtension.png 1183w, https:\/\/kb.elipse.com.br\/wp-content\/uploads\/2026\/01\/17371\/UserWidgetExtension-300x201.png 300w, https:\/\/kb.elipse.com.br\/wp-content\/uploads\/2026\/01\/17371\/UserWidgetExtension-1024x686.png 1024w, https:\/\/kb.elipse.com.br\/wp-content\/uploads\/2026\/01\/17371\/UserWidgetExtension-768x514.png 768w, https:\/\/kb.elipse.com.br\/wp-content\/uploads\/2026\/01\/17371\/UserWidgetExtension-272x182.png 272w\" sizes=\"(max-width: 1183px) 100vw, 1183px\" \/><\/p>\n<p data-start=\"3400\" data-end=\"3486\">A \u00e1rea <strong data-start=\"3407\" data-end=\"3420\">Extension<\/strong> \u00e9 o centro de gerenciamento dessas extens\u00f5es no EPM Portal. Nela:<\/p>\n<ul data-start=\"3488\" data-end=\"3710\">\n<li data-start=\"3488\" data-end=\"3545\">\n<p data-start=\"3490\" data-end=\"3545\">o administrador realiza o upload do pacote do Widget;<\/p>\n<\/li>\n<li data-start=\"3546\" data-end=\"3610\">\n<p data-start=\"3548\" data-end=\"3610\">o Widget passa a integrar a biblioteca global do EPM Portal;<\/p>\n<\/li>\n<li data-start=\"3611\" data-end=\"3710\">\n<p data-start=\"3613\" data-end=\"3710\">novas vers\u00f5es podem ser instaladas para atualizar Widgets j\u00e1 utilizados em dashboards existentes.<\/p>\n<\/li>\n<\/ul>\n<hr data-start=\"3712\" data-end=\"3715\" \/>\n<h2 data-start=\"3717\" data-end=\"3761\">Benef\u00edcios da cria\u00e7\u00e3o de Widgets pr\u00f3prios<\/h2>\n<p data-start=\"3763\" data-end=\"3926\">A possibilidade de desenvolver Widgets customizados traz vantagens estrat\u00e9gicas tanto para equipes de opera\u00e7\u00e3o quanto para integradores e fornecedores de solu\u00e7\u00f5es:<\/p>\n<ul data-start=\"3928\" data-end=\"4899\">\n<li data-start=\"3928\" data-end=\"4130\">\n<p data-start=\"3930\" data-end=\"4130\"><strong data-start=\"3930\" data-end=\"3954\">Personaliza\u00e7\u00e3o total<\/strong>: cria\u00e7\u00e3o de visualiza\u00e7\u00f5es que n\u00e3o existem nos Widgets nativos, adaptadas a necessidades espec\u00edficas, como diagramas de processos complexos ou c\u00e1lculos de KPIs propriet\u00e1rios.<\/p>\n<\/li>\n<li data-start=\"4131\" data-end=\"4321\">\n<p data-start=\"4133\" data-end=\"4321\"><strong data-start=\"4133\" data-end=\"4159\">Escalabilidade e reuso<\/strong>: o Widget \u00e9 desenvolvido uma \u00fanica vez e pode ser instalado em m\u00faltiplos servidores <strong data-start=\"4244\" data-end=\"4258\">EPM Portal<\/strong> por meio da \u00e1rea Extension, garantindo padroniza\u00e7\u00e3o t\u00e9cnica.<\/p>\n<\/li>\n<li data-start=\"4322\" data-end=\"4702\">\n<p data-start=\"4324\" data-end=\"4702\"><strong data-start=\"4324\" data-end=\"4352\">Integra\u00e7\u00e3o com terceiros<\/strong>: possibilidade de utilizar bibliotecas JavaScript externas, como <strong data-start=\"4418\" data-end=\"4427\">D3.js<\/strong>, <strong data-start=\"4429\" data-end=\"4441\">Chart.js<\/strong> ou <strong data-start=\"4445\" data-end=\"4457\">Three.js<\/strong> para visualiza\u00e7\u00f5es avan\u00e7adas e at\u00e9 3D. Atualmente, \u00e9 necess\u00e1rio solicitar \u00e0 Elipse a inclus\u00e3o dessas bibliotecas no EPM Portal; entretanto, j\u00e1 est\u00e1 prevista a possibilidade de o pr\u00f3prio usu\u00e1rio gerenciar essas depend\u00eancias em vers\u00f5es futuras.<\/p>\n<\/li>\n<li data-start=\"4703\" data-end=\"4899\">\n<p data-start=\"4705\" data-end=\"4899\"><strong data-start=\"4705\" data-end=\"4732\">Propriedade intelectual<\/strong>: empresas de engenharia podem encapsular algoritmos, regras de neg\u00f3cio e l\u00f3gicas de visualiza\u00e7\u00e3o em Widgets pr\u00f3prios, distribuindo-os como um diferencial competitivo.<\/p>\n<\/li>\n<\/ul>\n<hr data-start=\"4901\" data-end=\"4904\" \/>\n<h2 data-start=\"4906\" data-end=\"4918\">Conclus\u00e3o<\/h2>\n<p data-start=\"4920\" data-end=\"5335\">A cria\u00e7\u00e3o de <strong data-start=\"4933\" data-end=\"4971\">Widgets customizados no EPM Portal<\/strong> amplia significativamente as possibilidades da plataforma, permitindo que ela se adapte a cen\u00e1rios industriais complexos e espec\u00edficos. Ao combinar um ambiente de desenvolvimento robusto, baseado em Angular, com um modelo organizado de distribui\u00e7\u00e3o via Extensions, o EPM Portal se consolida como uma solu\u00e7\u00e3o flex\u00edvel, escal\u00e1vel e preparada para evolu\u00e7\u00f5es futuras.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Este artigo detalha o fluxo de desenvolvimento de Widgets customizados no EPM Portal, um recurso avan\u00e7ado que transforma a plataforma em um ecossistema extens\u00edvel e altamente personaliz\u00e1vel para a visualiza\u00e7\u00e3o&hellip;<\/p>\n","protected":false},"author":22,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0},"categories":[676],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Criando Widgets Customizados no EPM Portal<\/title>\n<meta name=\"description\" content=\"Aprenda como criar Widgets customizados no EPM Portal, do Editor ao Extension, utilizando Angular para desenvolver visualiza\u00e7\u00f5es industriais avan\u00e7adas.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kb.elipse.com.br\/criando-widgets-customizados-no-epm-portal\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Criando Widgets Customizados no EPM Portal\" \/>\n<meta property=\"og:description\" content=\"Aprenda como criar Widgets customizados no EPM Portal, do Editor ao Extension, utilizando Angular para desenvolver visualiza\u00e7\u00f5es industriais avan\u00e7adas.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kb.elipse.com.br\/criando-widgets-customizados-no-epm-portal\/\" \/>\n<meta property=\"og:site_name\" content=\"Elipse Knowledgebase\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/www.facebook.com\/elipsesoftware\" \/>\n<meta property=\"article:published_time\" content=\"2026-01-21T14:40:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-10T14:47:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kb.elipse.com.br\/wp-content\/uploads\/2026\/01\/17371\/UserWidgetEditor.png\" \/>\n<meta name=\"author\" content=\"Samir Lima\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Samir Lima\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kb.elipse.com.br\/criando-widgets-customizados-no-epm-portal\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kb.elipse.com.br\/criando-widgets-customizados-no-epm-portal\/\"},\"author\":{\"name\":\"Samir Lima\",\"@id\":\"https:\/\/kb.elipse.com.br\/#\/schema\/person\/6187f4add11d5e8b204dc7032d2f15cf\"},\"headline\":\"Criando Widgets Customizados no EPM Portal\",\"datePublished\":\"2026-01-21T14:40:13+00:00\",\"dateModified\":\"2026-02-10T14:47:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kb.elipse.com.br\/criando-widgets-customizados-no-epm-portal\/\"},\"wordCount\":801,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kb.elipse.com.br\/#organization\"},\"articleSection\":[\"Elipse Plant Manager\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kb.elipse.com.br\/criando-widgets-customizados-no-epm-portal\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kb.elipse.com.br\/criando-widgets-customizados-no-epm-portal\/\",\"url\":\"https:\/\/kb.elipse.com.br\/criando-widgets-customizados-no-epm-portal\/\",\"name\":\"[:pt]Criando Widgets Customizados no EPM Portal[:]\",\"isPartOf\":{\"@id\":\"https:\/\/kb.elipse.com.br\/#website\"},\"datePublished\":\"2026-01-21T14:40:13+00:00\",\"dateModified\":\"2026-02-10T14:47:52+00:00\",\"description\":\"Aprenda como criar Widgets customizados no EPM Portal, do Editor ao Extension, utilizando Angular para desenvolver visualiza\u00e7\u00f5es industriais avan\u00e7adas.\",\"breadcrumb\":{\"@id\":\"https:\/\/kb.elipse.com.br\/criando-widgets-customizados-no-epm-portal\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kb.elipse.com.br\/criando-widgets-customizados-no-epm-portal\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kb.elipse.com.br\/criando-widgets-customizados-no-epm-portal\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/kb.elipse.com.br\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Criando Widgets Customizados no EPM Portal\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kb.elipse.com.br\/#website\",\"url\":\"https:\/\/kb.elipse.com.br\/\",\"name\":\"Elipse Knowledgebase\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/kb.elipse.com.br\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kb.elipse.com.br\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kb.elipse.com.br\/#organization\",\"name\":\"Elipse Software\",\"url\":\"https:\/\/kb.elipse.com.br\/\",\"sameAs\":[\"http:\/\/www.facebook.com\/elipsesoftware\"],\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/kb.elipse.com.br\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kb.elipse.com.br\/wp-content\/uploads\/2019\/05\/schererelipse-com-br\/logoElipse.png\",\"contentUrl\":\"https:\/\/kb.elipse.com.br\/wp-content\/uploads\/2019\/05\/schererelipse-com-br\/logoElipse.png\",\"width\":161,\"height\":58,\"caption\":\"Elipse Software\"},\"image\":{\"@id\":\"https:\/\/kb.elipse.com.br\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/kb.elipse.com.br\/#\/schema\/person\/6187f4add11d5e8b204dc7032d2f15cf\",\"name\":\"Samir Lima\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/kb.elipse.com.br\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e9f438f26a32e9429a4f6073c6598fae?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e9f438f26a32e9429a4f6073c6598fae?s=96&d=mm&r=g\",\"caption\":\"Samir Lima\"},\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/samirlima\"],\"url\":\"https:\/\/kb.elipse.com.br\/en\/author\/samir\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Criando Widgets Customizados no EPM Portal","description":"Aprenda como criar Widgets customizados no EPM Portal, do Editor ao Extension, utilizando Angular para desenvolver visualiza\u00e7\u00f5es industriais avan\u00e7adas.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kb.elipse.com.br\/criando-widgets-customizados-no-epm-portal\/","og_locale":"en_US","og_type":"article","og_title":"[:pt]Criando Widgets Customizados no EPM Portal[:]","og_description":"Aprenda como criar Widgets customizados no EPM Portal, do Editor ao Extension, utilizando Angular para desenvolver visualiza\u00e7\u00f5es industriais avan\u00e7adas.","og_url":"https:\/\/kb.elipse.com.br\/criando-widgets-customizados-no-epm-portal\/","og_site_name":"Elipse Knowledgebase","article_publisher":"http:\/\/www.facebook.com\/elipsesoftware","article_published_time":"2026-01-21T14:40:13+00:00","article_modified_time":"2026-02-10T14:47:52+00:00","og_image":[{"url":"https:\/\/kb.elipse.com.br\/wp-content\/uploads\/2026\/01\/17371\/UserWidgetEditor.png"}],"author":"Samir Lima","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Samir Lima","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kb.elipse.com.br\/criando-widgets-customizados-no-epm-portal\/#article","isPartOf":{"@id":"https:\/\/kb.elipse.com.br\/criando-widgets-customizados-no-epm-portal\/"},"author":{"name":"Samir Lima","@id":"https:\/\/kb.elipse.com.br\/#\/schema\/person\/6187f4add11d5e8b204dc7032d2f15cf"},"headline":"Criando Widgets Customizados no EPM Portal","datePublished":"2026-01-21T14:40:13+00:00","dateModified":"2026-02-10T14:47:52+00:00","mainEntityOfPage":{"@id":"https:\/\/kb.elipse.com.br\/criando-widgets-customizados-no-epm-portal\/"},"wordCount":801,"commentCount":0,"publisher":{"@id":"https:\/\/kb.elipse.com.br\/#organization"},"articleSection":["Elipse Plant Manager"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kb.elipse.com.br\/criando-widgets-customizados-no-epm-portal\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kb.elipse.com.br\/criando-widgets-customizados-no-epm-portal\/","url":"https:\/\/kb.elipse.com.br\/criando-widgets-customizados-no-epm-portal\/","name":"[:pt]Criando Widgets Customizados no EPM Portal[:]","isPartOf":{"@id":"https:\/\/kb.elipse.com.br\/#website"},"datePublished":"2026-01-21T14:40:13+00:00","dateModified":"2026-02-10T14:47:52+00:00","description":"Aprenda como criar Widgets customizados no EPM Portal, do Editor ao Extension, utilizando Angular para desenvolver visualiza\u00e7\u00f5es industriais avan\u00e7adas.","breadcrumb":{"@id":"https:\/\/kb.elipse.com.br\/criando-widgets-customizados-no-epm-portal\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kb.elipse.com.br\/criando-widgets-customizados-no-epm-portal\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kb.elipse.com.br\/criando-widgets-customizados-no-epm-portal\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/kb.elipse.com.br\/en\/"},{"@type":"ListItem","position":2,"name":"Criando Widgets Customizados no EPM Portal"}]},{"@type":"WebSite","@id":"https:\/\/kb.elipse.com.br\/#website","url":"https:\/\/kb.elipse.com.br\/","name":"Elipse Knowledgebase","description":"","publisher":{"@id":"https:\/\/kb.elipse.com.br\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kb.elipse.com.br\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/kb.elipse.com.br\/#organization","name":"Elipse Software","url":"https:\/\/kb.elipse.com.br\/","sameAs":["http:\/\/www.facebook.com\/elipsesoftware"],"logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/kb.elipse.com.br\/#\/schema\/logo\/image\/","url":"https:\/\/kb.elipse.com.br\/wp-content\/uploads\/2019\/05\/schererelipse-com-br\/logoElipse.png","contentUrl":"https:\/\/kb.elipse.com.br\/wp-content\/uploads\/2019\/05\/schererelipse-com-br\/logoElipse.png","width":161,"height":58,"caption":"Elipse Software"},"image":{"@id":"https:\/\/kb.elipse.com.br\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/kb.elipse.com.br\/#\/schema\/person\/6187f4add11d5e8b204dc7032d2f15cf","name":"Samir Lima","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/kb.elipse.com.br\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e9f438f26a32e9429a4f6073c6598fae?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e9f438f26a32e9429a4f6073c6598fae?s=96&d=mm&r=g","caption":"Samir Lima"},"sameAs":["https:\/\/www.linkedin.com\/in\/samirlima"],"url":"https:\/\/kb.elipse.com.br\/en\/author\/samir\/"}]}},"_links":{"self":[{"href":"https:\/\/kb.elipse.com.br\/en\/wp-json\/wp\/v2\/posts\/17371"}],"collection":[{"href":"https:\/\/kb.elipse.com.br\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kb.elipse.com.br\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kb.elipse.com.br\/en\/wp-json\/wp\/v2\/users\/22"}],"replies":[{"embeddable":true,"href":"https:\/\/kb.elipse.com.br\/en\/wp-json\/wp\/v2\/comments?post=17371"}],"version-history":[{"count":6,"href":"https:\/\/kb.elipse.com.br\/en\/wp-json\/wp\/v2\/posts\/17371\/revisions"}],"predecessor-version":[{"id":17492,"href":"https:\/\/kb.elipse.com.br\/en\/wp-json\/wp\/v2\/posts\/17371\/revisions\/17492"}],"wp:attachment":[{"href":"https:\/\/kb.elipse.com.br\/en\/wp-json\/wp\/v2\/media?parent=17371"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kb.elipse.com.br\/en\/wp-json\/wp\/v2\/categories?post=17371"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kb.elipse.com.br\/en\/wp-json\/wp\/v2\/tags?post=17371"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}