Com o lançamento do novo Portal Meu RH, surgiu a necessidade de customizar para alterar e/ou adicionar novas telas no sistema. Para esse fim, foi desenvolvido um endpoint para carregar as paginas customizadas dinamicamente após a carga inicial do produto padrão.
Os menus customizados são carregados a partir do banco de dados (tabela PCUSTOMMENUS) e podem ser permissionados a partir das tags de segurança convencionais de customização (Geração de tags no FSWPack).
O Diagrama a seguir mostra como é feito a carga dos menus customizados através da API nativa do Meu RH:
No diagrama, vemos que após o login e a carga dos menus da aplicação, o portal faz uma requisição a API para verificar e carregar as customizações cadastradas na tabela PCUSTOMMENUS.
Após carregar e devolver os menus customizados o sistema já está apto a abrir as telas em uma nova aba
A seguir 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, recomendamos (não é impeditivo) que as customizações também sejam desenvolvidas nessa tecnologia e utilizem a mesma estrutura de diretório do produto padrão, para que diversas funcionalidades possam ser reaproveitadas, como segurança, autenticação, storage, uso de APIS como contexto entre outros.
Para iniciar o desenvolvimento, é necessário já ter instalado o Node.js e o Angular 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 / Restriçõ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.
As paginas do produto customizáveis ficam limitadas às paginas vinculadas aos menus da aplicação. Paginas como a de notificações ou de perfil não são customizáveis, pois não são menus e sim rotas fixas no Meu RH.
Seção com links importantes:
Página PO UI: https://po-ui.io/
Página Angular: https://angular.io/