Histórico da Página

Com o lançamento do novo Portal do Professor, surgiu a necessidade de adicionar novas telas no sistema através das customizações. Para esse fim, foi desenvolvido um componente customizado que permite exibir novas páginas, via iframe, dentro do novo portal do professor, com os menus sendo carregados a partir do banco de dados (tabela GMENUHTML).

Nesse documento, será detalhado o passo a passo para criar novas customizações no Portal.

Pré-requisitos

O portal do professor é desenvolvido utilizando o framework Angular com a biblioteca PO UI. Portanto, as customizações também devem ser desenvolvidas nessa tecnologia, para que diversas funcionalidades possam ser reaproveitadas, como segurança, autenticação, uso de APIS como contexto do educacional entre outros.

Para iniciar o desenvolvimento, é necessário que seja instalado o Node.js na máquina.

Passo a passo para criação

Após a instalação do Node.Js, deve ser instalado o framework Angular:

npm install -g @angular/cli

Após isso, podemos criar o projeto customizado, que no exemplo será Agenda Inteligente.

ng new agenda-inteligente

Em seguida, devemos adicionar a biblioteca angular PO UI

ng add @po-ui/ng-components

Após isso, devemos instalar e configurar tema padrão TOTVS para PO UI (https://github.com/totvs/po-theme-totvs)

npm i @totvs/po-theme

E atualizar o arquivo angular.json do projeto para carregar o css do tema TOTVS:

"styles": [

  "node_modules/@totvs/po-theme/css/po-theme-default-variables.min.css",

  "node_modules/@totvs/po-theme/css/po-theme-default.min.css",

  "node_modules/@po-ui/style/css/po-theme-core.min.css",

]

Com o projeto criado, devemos adicionar o menu customizado na tabela GMENUHTML

INSERT INTO GMENUHTML (ID,PARENTID,CODSISTEMA,CAPTION,PATH, SECURITYID, IDPORTAL)VALUES('CST_GOOGLE_ACOMPMENTORIA', 'CUSTOMIZATION', 'S', 'Acompanhamento Mentoria', 'customizacao/agendainteligente/#/acompanhamento-mentoria/', 0, 2)

No exemplo acima, o projeto deve ser copiado para a pasta customizacao/Agenda Inteligente e a rota que será exibida é acompanhamento-mentoria.

Seção com links importantes:

Configuração do novo portal professor

Página PO UI

Página Angular