Informações |
---|
|
Esta página foi revisada para considerar as configurações da atualização 1é destinada para atualizações 1.6.5 (Liquid) e superiores 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. |
Criação da página de login personalizada
...
Para personalizar a página de login siga os passos a seguir:
Deck of Cards |
---|
startHidden | false |
---|
effectDuration | 0.5 |
---|
history | false |
---|
id | Personalizacao Login |
---|
effectType | fade |
---|
|
Card |
---|
default | true |
---|
id | 1 |
---|
label | Passo 1 |
---|
|
- Acesse o diretório [Instalação fluig]/repository/wcmdir/. Dentro dele, crie uma nova pasta chamada "customlogin".
Nota |
---|
| 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 [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/. |
|
Card |
---|
| O conteúdo Informações |
---|
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 chamado loginhead.html. Nesse arquivo crie o conteúdo HTML que importa os JS/CSS que os 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 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.
Informações | arquivo loginhead será - será literalmente inserido dentro do HTML final da página de login,
dentro da tag <HEAD>- 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 Update 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. 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 arquivos mlogin.html, 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
...
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, o JavaScript customizado loginsnowflake.js e o arquivo de estilo loginsnowflake.css.
Bloco de código |
---|
language | xml |
---|
theme | Eclipse |
---|
firstline | 1 |
---|
title | loginhead.html |
---|
linenumbers | true |
---|
|
<script<link rel="stylesheet" type="text/javascriptcss" srchref="/portal/resources/jscustomlogin/jquery/jqueryloginsnowflake.css"> |
Bloco de código |
---|
language | xml |
---|
theme | Eclipse |
---|
firstline | 1 |
---|
title | loginscript.html |
---|
linenumbers | true |
---|
|
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.
...
3. O arquivo js, ao terminar de carregar a página, insere a data atual na div no elemento "login_datetime"
Bloco de código |
---|
language | js |
---|
theme | Eclipse |
---|
firstline | 1 |
---|
title | loginsnowflake.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;
$("#login_datetime").html("Data: " + today);
}) |
...
Bloco de código |
---|
language | css |
---|
title | loginsnowflake.css |
---|
|
#login_datetime {
position: absolute;
text-align: center;
width: 100%;
left: 0px;
bottom: 10%;
} |
Resultado:
...
Alteração Exibição de logomarca e exibição de datadata na parte inferior da tela.
Image Modified
Nota |
---|
|
- Todos os arquivos utilizados no exemplo também estão disponíveis abaixo:
- A personalização da página de login com o tema Snowflake pode ser feita apenas a partir da atualização 1.6.5 - Liquid.
|