Árvore de páginas

Versões comparadas

Chave

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

...

No editor de formulários, disponível no editor de processos, é possível selecionar um tema/estilo 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.

 

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

  Acessr

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

 

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

...

Bloco de código
languagehtml/xml
titleFormulário
linenumberstrue
<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

Exemplificando, um tema com o resultado final com:

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

 

Image Modified

 

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

    Bloco de código
    languagecss
    titleexemplo.css
    linenumberstrue
    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; }