Com o lançamento do novo Portal Meu RH, surgiu a necessidade de alterar e/ou adicionar novas telas no sistema através das customizações. Para esse fim, foi desenvolvido um método para carregar as paginas customizadas dinamicamente com os menus sendo carregados a partir do banco de dados (tabela PCUSTOMMENUS).

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

Pré-requisitos

O Portal Meu RH é 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  entre outros.

Para iniciar o desenvolvimento, é necessário já ter 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 novo projeto de customização:

ng new projeto-customizado

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 PCUSTOMMENUS

INSERT INTO PCUSTOMMENUS (ID, LABELKEYSHORT, LABELKEYLONG, URL, IMAGEPATH, FEATURED, OPERATORSONID, CHECKPERMISSION, ONLYLARGESCREEN, ONLYSMALLSCREEN, HIDEONIOSIONIC3, ONLYMOBILE, GROUPER, REMOVEMENUITEM, CHILDOF, INSERTATINDEX, RECCREATEDBY, RECCREATEDON, RECMODIFIEDBY, RECMODIFIEDON, MODULE, SECURITYID, EXECUTIONID) 
VALUES ('vacation', 'im-vacation', 'im-vacation', 'https://localhost/FrameHTML/web/app/Cst/PortalMeuRH/#/vacation', 'ico-sun', NULL, 0, 0, 0, 0, 0, 0, 0, 0, NULL, NULL, 'customizacao',  GETDATE(),'customizacao', GETDATE(), 'P', '890004021', '0');
GO;

Além disso é necessário habilitar o Meu RH para carregar os menus customizados no momento da carga dos menus da aplicação. Isso é feito através do arquivo properties.json localizado em C:\RM\Atual\Release\FrameHTML\web_src\app\RH\PortalMeuRH\.

Ao abrir o arquivo deve-se adicionar as seguintes tags ao final do documento:

"USE_TOKEN": true,
"USE_CUSTOM_MENU": true

Após implementação do projeto, o mesmo deve ser compilado para a pasta que estão sendo publicados os novos portais. Por padrão os novos projetos de portal estão sendo disponibilizados na pasta C:\RM\Atual\Release\FrameHTML\web\app\[SiglaProduto]\. Por este motivo os novos projetos de customização devem ser publicados na pasta:  C:\RM\Atual\Release\FrameHTML\web_src\app\Cst\.

A criação da API segue o modelo padrão da TOTVS, com os controllers herdando das classes da Lib.

A geração do instalador com o projeto compilado ainda é feita usando o tipo Cópia de arquivos no Hefesto posterior mente esse processo deve ser alterado para usar o novo gerador de instaladores da Fabrica.

Limitações

As customizações no Portal Meu RH ficam limitadas apenas ao portal web, não sendo possível customizar as telas do portal no mobile.

Seção com links importantes:

Página PO UI: https://po-ui.io/

Página Angular: https://angular.io/