TOTVS Fluig

Atalhos

Árvore de páginas

Versões comparadas

Versão antiga 18

changes.mady.by.user Andre Gerson Ganske

Gravado em

comparado com

Nova versão 19

changes.mady.by.user Leticia de Liz Engelke

Gravado em

Chave

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

Índice

 

Índice
outlinetrue
exclude.*ndice
stylenone

...

 

Personalização de Temas de Formulários

No editor de formulários, disponível no editor de processos, é possível selecionar um estilo customizado personalizado para o formulário que está sendo criado.

Este estilo pode ser customizado personalizado 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 customizadopersonalizado.

 

Deck of Cards
effectDuration0.5
historyfalse
idsamples
effectTypefade
Card
defaulttrue
idPasso1
labelPasso 1
effectTypeslide

 

  •  Acessar o Painel de Controle pelo menu lateral.

 

Card
idPasso2
labelPasso 2
effectTypeslide

 

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

Card
idPasso3
labelPasso 3
effectTypeslide

 

  • Na tela é possível realizar o download de temas já cadastrados, definir se o tema está ou não está ativo (quando ativo, o tema é disponibilizado para seleção na edição de formulários) e tema padrão que é o tema pré selecionado ao criar um formulário. Para adicionar um tema novo, clique em Adicionar.

Card
idPasso4
labelPasso 4
effectTypeslide

 

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

...

ClasseDescrição
.title-form-applicationClasse do título do formulário
.form-fieldDIV que enquadra todo campo do formulário
.form-inputDIV do campo
.requiredClasse do asterisco em campos obrigatórios.
.paragraph-is-requiredMensagem de obrigatório

Em alguns casos é necessário utilizar "!important", pois são classes que já são utilizadas pela plataforma e podem ser sobrescritas.


HTML

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

Bloco de código
languagehtml/xml
titleFormulário
linenumberstrue
<form class="t1" name="createFormComponents">
	<h1 class="title-form-application">Formulário</h1>
	<div class="paragraph-is-required system-message-information alert alert-info" role="alert">Todos os campos com * são de preenchimento obrigatório.</div>
	
	<div class="form-field">
		<div class="form-input">
			<div class="form-group">
				<label>Label textbox</label>
				<span class="required text-danger"><strong>*</strong></span>
				<input type="text" class="form-control" name="textbox0" value="" placeholder="">
			</div>
		</div>
	</div>
</form>

 

Exemplo

A seguir criaremos um tema com um estilo customizadopersonalizado:

 

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

    Bloco de código
    languagecss
    titleexemplo.css
    linenumberstrue
    .t3 .title-form-application { color: #fff !important; font-weight: bold !important; }
.t3 { height: auto !important; min-height: 0 !important; padding: 0 5px !important; background-color: #591202; }
.t3 input { margin-bottom: 0 !important; }
.t3 .form-field { margin-bottom: 15px !important;}
.t3 label {font-weight: normal; color: #f2a547; }
.t3 .title-form-application { margin: 5px 5px 20px; padding: 0 0px 10px; font-size: 1.5em; font-weight: normal; color: #006699; border-bottom: 1px dashed #ccc;}
.t3 input, .coffeeTheme textarea, .coffeeTheme select { background-color:#f6dec0 !important; border: 0px !important;}
.t3 .required input, .required select, .required textarea { border-color: #eeabad !important; box-shadow: 0px 0px 5px rgba(255, 0, 0, .3) !important; border: 0px !important;}
.t3 .is-required {display: none; color: #c43b1d; font-size: 1.2em; }
.t3 .paragraph-is-required { margin: 0 5px 1em !important; }
  • Toda customização personalização deve iniciar com a classe t + id. Assim, evita-se que as customizações personalizações interfiram no estilo de outras páginas da plataforma., nesse exemplo, a classe é t3 pois o id do tema é 3. 

...