Esta página é destinada para atualizações 1.6.5 (Liquid) e superiores do TOTVS Fluig Plataforma.

Índice

Página de login personalizada

Todos os componentes da página de login podem ser personalizados, basta que sejam alterados os arquivos indicados nesta documentação. As personalizações exigem que o responsável tenha os conhecimentos básicos em HTML, JavaScript e CSS. 

Essa página contém as principais instruções de como efetuar a personalização, servindo como ponto de partida para seu desenvolvimento. Lembrando que qualquer personalização realizada na plataforma é de responsabilidade do cliente e não possui suporte do time TOTVS Fluig.

Criação da página de login personalizada

Para personalizar a página de login siga os passos a seguir:


  • Acesse o diretório [Instalação fluig]/repository/wcmdir/. Dentro dele, crie uma nova pasta chamada customlogin.


Caso as configurações do fluig tenham sido alteradas manualmente (por exemplo, para ambientes com alta disponibilidade), abra em um editor de texto o arquivo [diretório_instalação]/appserver/domain/configuration/domain.xml e localize nele a propriedade abaixo:

<simple name="java:global/wcm/globalDataDir">

Neste parâmetro estará informado o caminho alternativo do diretório [diretório_instalação]/repository/wcmdir/.


  • Dentro dessa pasta recém criada, crie um arquivo chamado loginsnowflake.html. Nesse arquivo crie o fragmento de conteúdo HTML que será inserido na página de login.

O conteúdo do arquivo loginsnowflake.html será literalmente inserido dentro do HTML final da página de login, dentro de uma tag <DIV>. Portanto, não poderá conter as tags <HTML>, <BODY> ou <HEAD>.

  • Opcionalmente, crie na mesma pasta um arquivo chamado loginhead.html. Nesse arquivo crie conteúdo HTML que importa os JS/CSS que serão utilizados pela personalização.

O conteúdo do arquivo loginhead.html será literalmente inserido dentro do HTML final da página de login, dentro da tag <HEAD>, portanto deverá conter apenas tags que importam recursos como JS ou CSS.

  • Caso utilize recursos estáticos, copie-os dentro desta mesma pasta, como arquivos JS, CSS e imagens. Esses recursos estáticos estarão acessíveis abaixo da URL /portal/resources/customlogin/.



  • Caso utilize o aplicativo Mobile, a personalização do login via Mobile pode ser feita da mesma forma. Basta criar os arquivo mlogin.html e mloginhead.html.



Exemplo de personalização

Primeiramente foram criados os arquivos descritos acima em "/opt/fluig/repository/wcmdir/customlogin/". Em seguida foram executados os seguintes procedimentos:

1. Importe o arquivo JavaScript padrão do produto jquery.js, o JavaScript customizado loginsnowflake.js e o arquivo de estilo loginsnowflake.css.

<script type="text/javascript" src="/portal/resources/js/jquery/jquery.js"></script>
<script type="text/javascript" src="/portal/resources/customlogin/loginsnowflake.js"></script>
<link rel="stylesheet" href="/portal/resources/customlogin/loginsnowflake.css">

2. Insira aqui o código HTML de customização da sua página.

<h1 id="login_datetime"></h1>

Todo conteúdo HTML deve seguir as normas do Style Guide (definidas aqui: https://style.fluig.com/).

3. O arquivo js, ao terminar de carregar a página, insere a data atual no elemento "login_datetime" 

$(document).ready(function(){
   var today = new Date();
   var dd = today.getDate();
   var mm = today.getMonth()+1;
   var yyyy = today.getFullYear();
   if(dd<10) {
       dd='0'+dd
   }
   if(mm<10) {
       mm='0'+mm
   }
   today = dd + '/' + mm + '/' + yyyy;
   $("#login_datetime").html("Data: " + today);
})

4. O arquivo css deve conter as classes de personalização do seu HTML.

#login_datetime {
	position: absolute;
    text-align: center;
    width: 100%;
    left: 0px;
    bottom: 10%;
}


Resultado:

Exibição de data na parte inferior da tela.