| Informações |
|---|
|
Esta página é destinada para atualizações 1.6.0 até 1.6.4 do TOTVS Fluig Plataforma. |
| Informações |
|---|
|
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 |
|---|
| outline | true |
|---|
| exclude | .*ndice |
|---|
| style | none |
|---|
|
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.
| Nota |
|---|
|
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. |
Passos para personalização
...
Para personalizar a página de login siga os passos a seguirabaixo:
| Deck of Cards |
|---|
| startHidden | false |
|---|
| effectDuration | 0.5 |
|---|
| history | false |
|---|
| id | Personalizacao Login |
|---|
| effectType | fade |
|---|
|
| Card |
|---|
| default | true |
|---|
| id | 1 |
|---|
| label | Passo 1 |
|---|
|
- Procure pela pasta {INSTALAÇÃO_FLUIG}Acesse o diretório [diretório_instalação]/repository/wcmdir/. Dentro deladele, crie uma nova pasta chamada chamada customlogin.
| Avisonote |
|---|
| 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_FLUIG}/jboss/standalone [diretório_instalação]/appserver/domain/configuration/standalonedomain.xml e procure localize nele pela a propriedade abaixo: | Bloco de código |
|---|
<simple name="java:global/wcm/globalDataDir"> |
Neste , neste parâmetro estará indicado informado o caminho alternativo ao caminho {INSTALAÇÃO_FLUIG}do diretório [diretório_instalação]/repository/wcmdir/. |
|
| Card |
|---|
|
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.
| Nota |
|---|
| 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>.
- O conteúdo
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. | Nota |
|---|
| 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.
| 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 |
JS ou CSSpaliativo o JS pode ser importado no arquivo loginhead.html, no entanto podem ocorrer inconsistências no login via mobile (aplicativo My Fluig). |
Caso utilize recursos estáticos, copie-os dentro desta mesma pasta, como arquivos JS, CSS e imagens. | Nota |
|---|
| Esses recursos estáticos estarão acessíveis abaixo da URL "/portal/resources/customlogin/ ".
|
| Card |
|---|
|
- Caso utilize o aplicativo Mobile, a personalização do login via Mobile pode ser feita da mesma forma. Basta criar os
arquivo e- , mloginscript.html e mloginhead.html.
|
|
| Card |
|---|
|
- 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
...
Criado Primeiramente foram criados os seguintes 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 |
|---|
| language | xml |
|---|
| theme | Eclipse |
|---|
| firstline | 1 |
|---|
| title | loginhead.html |
|---|
| linenumbers | true |
|---|
|
<script<link typerel="text/javascript" src="/portal/resources/js/jquery/jquery.js"></script>
<script stylesheet" 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 |
|---|
| language | xml |
|---|
| theme | Eclipse |
|---|
| firstline | 1 |
|---|
| title | login.html |
|---|
| linenumbers | true |
|---|
|
<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 |
|---|
| language | xml |
|---|
| theme | Eclipse |
|---|
| firstline | 1 |
|---|
| title | loginscript.html |
|---|
| linenumbers | true |
|---|
|
<script type="text/javascript" src="/portal/resources/customlogin/login.js"></script> |
| Nota |
|---|
|
| Aviso |
|---|
|
Atenção |
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 |
|---|
| language | js |
|---|
| theme | Eclipse |
|---|
| firstline | 1 |
|---|
| title | login.js |
|---|
| linenumbers | true |
|---|
|
$(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 |
|---|
| language | css |
|---|
| theme | Eclipse |
|---|
| firstline | 1 |
|---|
| title | login.css |
|---|
| linenumbers | true |
|---|
|
#logotxt {
font-weight: bold;
} |
6. Customização também para o mobile.4. Importe o arquivo JavaScript padrão do produto jquery.js e o JavaScript personalizado login.js.
| Bloco de código |
|---|
| language | xml |
|---|
| theme | Eclipse |
|---|
| firstline | 1 |
|---|
| title | mloginhead.html |
|---|
| linenumbers | true |
|---|
|
<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 |
|---|
| language | xml |
|---|
| theme | Eclipse |
|---|
| firstline | 1 |
|---|
| title | loginmlogin.html |
|---|
| linenumbers | true |
|---|
|
<img class="image-logo" src="/portal/resources/customlogin/Sua-Empresa-Horizontal.png" width="150" height="125">
<h1 id="logotxt"></h1> |
| Bloco de código |
|---|
| language | xml |
|---|
| theme | Eclipse |
|---|
| firstline | 1 |
|---|
| title | mloginscript.html |
|---|
| linenumbers | true |
|---|
|
<script type="text/javascript" src="/portal/resources/customlogin/login.js"></script> |
Resultado:
...
Alteração de logomarca e exibição de data.
Image Modified
| Nota |
|---|
|
- 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 1.5.5.
|
...