Árvore de páginas

Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.
Informações
titleAtenção

Esta página foi revisada para considerar as novas configurações de server do fluig para a atualização é destinada para atualizações 1.6.0 até 1.6.4 do TOTVS Fluig Plataforma.Caso possua uma atualização anterior do fluig acesse: Personalização da página de login

Informações
titlePlataforma em Cloud

Clientes cloud precisam entrar em contato com o time de Cloud com os arquivos já configurados para que seja incluído no diretório do servidor.

Índice

Índice
outlinetrue
exclude.*ndice
stylenone

...

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. 

Nota
titleAtenção!

Qualquer 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 , portanto não será avaliada pela equipe de atendimentoe não possui suporte do time TOTVS Fluig.


Passos para personalização

...

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

Deck of Cards
startHiddenfalse
effectDuration0.5
historyfalse
idPersonalizacao Login
effectTypefade
Card
defaulttrue
id1
labelPasso 1


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


Nota
titleAtenção

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

Bloco de código
<simple name="java:global/wcm/globalDataDir">

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

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

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

O conteúdo
  • 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 CSS.

  • Opcionalmente, crie na mesma pasta um arquivo chamado loginscript.html. Nesse arquivo crie o conteúdo HTML que importa os JS que serão utilizados pela personalização. O conteúdo do arquivo loginscript.html será literalmente inserido dentro do HTML final da página de login, ao final da tag <BODY>, portanto deverá conter apenas tags que importam recursos como JS.
Card
id2
labelPasso 2

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

Informações
Informações
Nota

A configuração com o arquivo loginscript.html foi adicionada na atualização 1.7.0-210504. Caso esteja uma atualização anterior, como paliativo o JS pode ser importado no arquivo loginhead.html, no entanto podem ocorrer inconsistências no login via mobile (aplicativo My Fluig) 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/.


Card
id3
labelPasso 3 - Mobile


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


Card
id4
labelPasso 4


  • Reinicie os serviços do fluig.


Dica

Sempre que houver o login personalizado na empresa, ao acessar a plataforma pelo navegador do dispositivo mobile, esta página de login será respeitada e será apresentada no momento de realizar a autenticação.


Exemplo de personalização

...

Primeiramente foram criados os arquivos descritos acima em "/opt/fluig[diretório_instalação]/repository/wcmdir/customlogin/". Em seguida foram executados os seguintes procedimentos:

1. Importe o arquivo JavaScript padrão do produto jquery.js e o JavaScript CSS customizado login.jscss.

Bloco de código
languagexml
themeEclipse
firstline1
titleloginhead.html
linenumberstrue
<script<link typerel="text/javascript" src="/portal/resources/js/jquery/jquery.js"></script>
<scriptstylesheet" type="text/javascriptcss" srchref="/portal/resources/customlogin/login.jscss"></script>>

2. Insira a imagem Sua-Empresa-Horizontal.png, juntamente com o texto "logotxt". Ex: 

Bloco de código
languagexml
themeEclipse
firstline1
titlelogin.html
linenumberstrue
<img src="/portal/resources/customlogin/Sua-Empresa-Horizontal.png" height="200">
<h1 id="logotxt"></h1>


3. Importe o arquivo JavaScript customizado login.js.

Bloco de código
languagexml
themeEclipse
firstline1
titleloginscript.html
linenumberstrue
<script type="text/javascript" src="/portal/resources/customlogin/login.js"></script>
Nota
titleFique atento

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


34. Ao terminar de carregar a página, substitua o texto "logotxt" pela data atual.

Bloco de código
languagejs
themeEclipse
firstline1
titlelogin.js
linenumberstrue
$(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;
   $("#logotxt").html("Hoje é: " + today);
})


5. Deixe o "logotxt" em negrito.

Bloco de código
languagecss
themeEclipse
firstline1
titlelogin.css
linenumberstrue
#logotxt {
    font-weight: bold;
}


6. Customização também para o mobile4. Importe o arquivo JavaScript padrão do produto jquery.js e o JavaScript personalizado login.js.


Bloco de código
languagexml
themeEclipse
firstline1
titlemloginhead.html
linenumberstrue
<script<link typerel="text/javascript" src="/portal/resources/js/jquery/jquery.js"></script>
<scriptstylesheet" type="text/javascriptcss" srchref="/portal/resources/customlogin/login.jscss"></script>>
Bloco de código
languagexml
themeEclipse
firstline1
titleloginmlogin.html
linenumberstrue
<img class="image-logo" src="/portal/resources/customlogin/Sua-Empresa-Horizontal.png" width="150" height="125">
<h1 id="logotxt"></h1>
Bloco de código
languagexml
themeEclipse
firstline1
titlemloginscript.html
linenumberstrue
<script type="text/javascript" src="/portal/resources/customlogin/login.js"></script>


Resultado:

...

Alteração de logomarca e exibição de data.

...

Nota
titleImportante
  • Todos os arquivos utilizados no exemplo também estão disponíveis em http://git.fluig.com/. Para ver o exemplo vejo o arquivo login-personalizado do repositório Componentes
  • A personalização da página de login pode ser feita apenas a partir da Atualização atualização 1.5.5