TOTVS Fluig

Atalhos

Árvore de páginas

Versões comparadas

Versão antiga 15

changes.mady.by.user Marcos Jahn

Gravado em

comparado com

Nova versão Atual

changes.mady.by.user Andressa Aparecida De Souza Heck

Gravado em

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.



Painel
borderColor#e8f6f0
bgColor#e8f6f0
HTML
<style type="text/css">
    .lms * {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }

    .lms-text-center {
      text-align: center;
    }

    .lms-full-height {
      height: 100%;
    }

    /* Component LMS Callout */

    .lms-callout {
      border: none;
      padding: 0px;

      display: -moz-box;
      -moz-flex-flow: row wrap;
      -moz-justify-content: center;
      -moz-align-items: center;

      display: -ms-flexbox;
      -ms-flex-flow: row wrap;
      -ms-justify-content: center;
      -ms-align-items: center;
      
      display: -webkit-flex;
      display: -webkit-box;
      -webkit-flex-flow: row wrap;
      -webkit-justify-content: center;
      -webkit-align-items: center;

      display: flex;
      flex-flow: row wrap;      
      justify-content: center;
      align-items: center;
    }
  
    .lms-callout .lms-callout-image {
      width: 24px;
    }

    .lms-callout .lms-callout-body {
      width: calc(100% - 24px);
      padding-left: 20px;
    }

	.lms-callout .lms-callout-citacao {
      border: 0px solid;
      border-left-width: 3px;
      border-left-color: #f36f21;
	  margin: 4px;
	  margin-left: 25px;
	  padding-left: 8px;
      font-size: 13px;
	}

    .lms-callout .lms-callout-thumb {
      width: 24px;
      height: 24px;
    }

    .lms-callout .lms-callout-text {
      color: #58595b;
      line-height: 1.75;
      margin: 0;
    }
</style>
<div class="lms">
	<div class="lms-callout">
		<div class="lms-callout-image">
			<img class="lms-callout-thumb" src="http://tdn.totvs.com/download/thumbnails/286221066/pratica.png" width="24" height="24">
		</div>
		<div class="lms-callout-body">
			<p class="lms-callout-text"><b>COLOQUE EM PRÁTICA!</b><br>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.</p>
		</div>
	</div>
</div>
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
outlinetrue
excludeÍndice
stylenone

Objetivo

...

Este guia

Objetivo

Esta documentação tem por objetivo indicar como é feita a personalização de páginas da plataformado TOTVS Fluig Plataforma.

 


Personalização de todas as páginas

...

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

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

Aviso
iconfalse
titleAtenção

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

Card
id2
labelPasso 2

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

    Nota
    titleAtençã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.

    Nota
    titleAtenção

    O conteúdo do arquivo custompage.html será 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:

...

Image Added



Exemplo simples de personalização

Criado os seguintes arquivos, em "{INSTALAÇÃO_FLUIG}/repository/wcmdir/custompage/".

 

...

1. Importe os arquivos custompagehead.ftl e custompagehead-<codigo-do-tenante>.1. Após a etapa de criação dos arquivos, importe o código abaixo para dentro do arquivo custompagehead.ftl:

Bloco de código
languagexml
themeEclipse
firstline1
titlecustompagehead.ftl
linenumberstrue
<!-- inserido custompagehead.ftl -->
Bloco de código
languagexml
themeEclipse
firstline1
titlecustompagehead-<codigo-do-tenant>.ftl
linenumberstrue
<!-- inserido custompagehead-<codigo-do-tenant>.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:


Image Added


Image Added


Image Added



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:

Bloco de código
languagexml
themeEclipse
firstline1
titlecustompage.ftl
linenumberstrue
<h1 id="logopage" style="text-align:center"></h1>
<script type="text/javascript">
$(document).ready(function(){
var d = new Date();
var weekday = new Array(7);
weekday[0]=  "Domingo";
weekday[1] = "Segunda-feira";
weekday[2] = "Terça-feira";
weekday[3] = "Quarta-feira";
weekday[4] = "Quinta-feira";
weekday[5] = "Sexta-feira";
weekday[6] = "Sabado";
var n = weekday[d.getDay()];
   $("#logopage").html(n);
})
</script>
Bloco de código
languagexml
themeEclipse
firstline1
titlecustompage-<codigo-do-tenant>.ftl
linenumberstrue
<h1 id="logopagetenant" style="text-align:center"></h1>
<script type="text/javascript">
$(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;
   $("#logopagetenant").html("Hoje é: " + today);
})
</script>

 

 

Resultado:

Conforme exemplo apresentado tal alteração fará com que os comentários personalizados sejam inseridos em todas as páginas da plataforma, e no final da página principal do Fluig, a descrição do dia atual juntamente com o dia da semana.

 

Image Removed

 

 

<#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:


Image Added


Image Added


Image Added