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 da página
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", ] |
Após isso, deverão ser criadas os componentes e rotas normalmente. Um detalhe é que não deverão ser exibidos menus laterais, apenas o conteúdo principal, como no exemplo abaixo:
Criação do menu customizado
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, após realizar a compilação (build) do projeto os arquivos gerados na pasta "dist" deverão ser copiados para a pasta customizacao/AgendaInteligente e a rota que será exibida é acompanhamento-mentoria.
Exemplo caminho completo na versão de desenvolvimento 12.1.2302:
C:\RM\Legado\12.1.2302\FrameHTML\web\app\Edu\PortalDoProfessor\customizacao\agendainteligente
E na pasta de instalação do TOTVS RM:
C:\TOTVS\CorporeRM\FrameHTML\web\app\Edu\PortalDoProfessor\customizacao\agendainteligente
Ao abrir o menu no Portal do Professor, a página será carregada via iframe customizado:
Seção com links importantes:
Configuração do novo portal professor