TOTVS Fluig Español

Árvore de páginas

Você está vendo a versão antiga da página. Ver a versão atual.

Comparar com o atual Ver Histórico da Página

Versão 1 Próxima »

Índice

 

Customização de Temas de Formulários

No editor de formulários, disponível no editor de processos, é possível selecionar um template para o formulário que está sendo criado. Este estilo pode ser customizado por qualquer usuário que possui permissão ao painel de controle.

 

 

 

Acompanhe, navegando nas abas a seguir, o passo a passo para a criação de um novo tema customizado no Fluig.

 

     

    •  Acessar o Painel de Controle pelo menu lateral.

     

     

    • Clique na aba de Processos e após clique no item Temas de Formulários.

     

     

    • Na tela é possível realizar o download de temas já cadastrados, definir se o tema está ou não está ativo para aparecer para o usuário e tema padrão que é o tema pré selecionado ao criar um formulário. Para adicionar um tema novo, clique em Adicionar.

     

     

    • Na tela para adicionar um estilo novo, é necessário preencher um código ao tema, a descrição do tema e selecionar o arquivo CSS para realizar o upload.

     

    Clique em Salvar. após isto o tema está cadastrado e já pode ser utilizado no editor de formulários.

     

     

    Recomendações 

    Ao fazer o upload de temas é importante seguir as seguintes regras:

    1. O tema deve possuir sempre uma regra por linha.
    2. Todas as propriedades de cada classe tem que estar na mesma linha, não deve-se pular linha, para melhor interpretação do editor.
    3. O arquivo .css deve possuir todas as linhas com seletores, não se deve possuir linhas em branco.
    4. Todas as classes, elementos e identificadores podem ser modificados, desde que respeitando as regras acima.

    É possível obter um exemplo de uma folha de estilos acessando a página de Temas, no Painel de Controle.


    Abaixo estão cada uma das classes e estrutura de um formulário gerado a partir do editor.

    ClasseDescrição
    .title-form-applicationClasse do título do formulário
    .form-fieldDIV que enquadra todo campo do formulário
    .form-inputDIV pai apenas do campo (não enquadra a label)
    .label-field-propertiesLabel dos campos
    .is-requiredClasse do asterisco em campos obrigatórios.
    .paragraph-is-requiredMensagem de obrigatório

    Em alguns casos é necessário utilizar do !important, pois são classes que já são utilizadas pelo fluig e podem ser sobescritas.


    HTML

    O HTML gerado automaticamente pelo editor de formulários com apenas um campo, fica com a seguinte estrutura:

    Formulário
    <form name="formulario">
	<h1 class="title-form-application">Formulario Exemplo</h1>
	<div class="form-field">
		<label class="label-field-properties">Campo Nome</label>
		<span class="is-required">
			<b>*</b>
		</span>
		<div class="form-input">
			<input type="text" name="nome" />
		</div>
	</div>
</form>

     

    Exemplo

    A seguir criaremos um tema com:

    1. Campos do tipo input com fundo preto e cor branca.
    2. Labels em negrito e cor bordô.
    3. Títutlo do formulário com uma margem, cor e borda inferior.
    4. Cada bloco de campo terá margem inferior, com espaçamento interno e uma borda vermelha.
    5. Cor vermelho e tamanho da fonte para o asterisco de obrigatório.

     

     

    • Para este resultado, o seguinte CSS deve ser criado e cadastrado nos temas:

      exemplo.css
      input { padding:0 15px !important; background-color:#000; color:#fff; }
label { font-weight:bold; color:#8B0000; }
.title-form-application { margin:20px; padding: 0 0px 10px; font-size: 1.5em; color: #006699; border-bottom: 1px dashed #ccc; }
.form-field { margin-bottom: 15px; border:1px solid red; padding:10px; }
.is-required { color:red; font-size:2em; }

     

    • Sem rótulos