TOTVS Fluig

Atalhos

Árvore de páginas



COLOQUE EM PRÁTICA!
Essa página contém as instruções principais e exemplos de implementação, servindo como ponto de partida para seu desenvolvimento. Os exemplos devem ser analisados e adaptados para cada cenário e necessidade específica, lembrando que as implementações realizadas são de responsabilidade do cliente e não possuem suporte do time TOTVS Fluig.

Plataforma 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.


Objetivo

Este guia tem por objetivo indicar como é feita a personalização de páginas do TOTVS Fluig Plataforma.


Personalização de todas as páginas

Para personalizar todas as páginas da plataforma siga os passos a seguir:


    • Procure pela pasta [diretório_instalação]/repository/wcmdir. Dentro dela, crie uma nova pasta chamada custompage.

    Atenção

    Caso as configurações da plataforma 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/standalone.xml e procure nele pela propriedade <simple name="java:global/wcm/globalDataDir", neste parâmetro estará indicado o caminho alternativo ao caminho [diretório_instalação]/repository/wcmdir/.


    • Os arquivos criados devem utilizar a codificação (charset) UTF-8.

    • Dentro da pasta custompage, crie um arquivo chamado custompagehead.ftl. Nesse arquivo crie o fragmento de conteúdo HTML que será inserido nas páginas.

      Atenção

      O conteúdo do arquivo custompagehead.ftl será literalmente inserido imediatamente antes de fechar a tag </head>. O mesmo se aplica ao custompagehead<codigo-do-tenante>.ftl, porém nesse caso, o mesmo apenas será inserido para o tenant em questão

    • Opcionalmente, crie na mesma pasta um arquivo chamado custompage.ftl. Nesse arquivo crie o fragmento de conteúdo HTML que será inserido nas páginas.

      Atenção

      O conteúdo do arquivo custompage.ftl será literalmente inserido imediatamente antes de fechar a tag </body>. O mesmo se aplica ao custompage<codigo-do-tenante>.ftl, porém nesse caso, o mesmo apenas será inserido para o tenant em questão.

             Ilustração:



    Exemplo simples de personalização

    1. Após a etapa de criação dos arquivos, importe o código abaixo para dentro do arquivo custompagehead.ftl:

    custompagehead.ftl
    <style>
	.menu-item a, .wcm-menu-item a {
		color: cyan !important;
	}
</style>


    Resultado:

    A cor dos itens no menu lateral irão mudar para ciano nos temas Responsivo e Snowflake, já no tema Clássico irá mudar apenas o label do item, conforme apresentado nas imagens abaixo:






    Exemplo avançado de personalização

    1. Após a etapa de criação dos arquivos, importe o código abaixo para dentro do arquivo custompage.ftl:

    custompage.ftl
    <#if themeCode?has_content>
	<#assign fluigThemeCode = themeCode>
<#else>
	<#assign fluigThemeCode = "themedefault">
</#if>

<style>
	.alert-custom-example {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		z-index: 10000; 
	}

	.alert-custom-example .alert {
		margin: 0;
	}

	<#if fluigThemeCode == "liquid_theme">
		div[appcode="liquid_header"] {
			margin-top: 64px;
		}

		.liquid-menu-widget div.menu-main {
			height: calc(100vh - 64px);
		}
	</#if>

	<#if fluigThemeCode == "themedefault">
		.wcm-header, .wcm-all-content {
			top: 64px;
		}

    	.wcm-navigation {
			height: calc(100% - 124px);
      		top: 124px;
    	}
	</#if>

	<#if fluigThemeCode == "responsive_theme">
		.responsive-header-widget, .wcm-all-content {
			top: 64px;
		}

		.responsive-menu-widget div.menu-main {
			top: 144px;
			height: calc(100% - 144px);
		}
	</#if>
</style>

<div class="fluig-style-guide alert-custom-example">
    <div class="alert alert-info" role="alert">
        <strong>Atenção!</strong> 
        amanhã o Fluig estará fora do ar para atualização
    </div>
</div>


    Resultado:

    Será apresentado um componente de alerta fixado acima do header principal em todas as páginas dos temas Responsivo, Snowflake e Clássico, conforme nas imagens abaixo: