Índice



Personalização de Temas de Formulários

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

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


  •  Acessar o Painel de Controle pelo menu lateral.



  • Verifique no agrupador Desenvolvimento 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 (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.


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

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