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

« Anterior Versão 3 Próxima »

Índice

 

Personalización de Temas de Formularios

En el editor de formularios, disponible en el editor de procesos, es posible seleccionar un template para el formulario que se está creando. Este estilo se puede personalizar por cualquier usuario que posee permiso al panel de control.

 

 

 

Siga, navegando en las pestañas a continuación, el paso a paso para la creación de un nuevo tema personalizad en el Fluig.

 

     

    • Acceder el Panel de Control por el menú lateral.

     

     

    • Haga clic en la pestaña de Procesos y después haga clic en el ítem Temas de Formularios.

     

     

    • En la pantalla es posible realizar el download de temas ya registrados, definir si el tema está o no está activo para aparecer para el usuario y tema estándar que es el tema preseleccionado al crear un formulario. Para agregar un tema nuevo, haga clic en Agregar.

     

     

    • En la pantalla para agregar un estilo nuevo, es necesario rellenar un código al tema, la descripción del tema y seleccionar el archivo CSS para realizar el upload

     

    Haga clic en Guardar. después de esto el tema está registrado y ya se puede utilizar en el editor de formularios.

     

     

    Recomendaciones 

    Al hacer el upload de temas es importante seguir las siguientes reglas:

    1. El tema debe poseer siempre una regla por línea.
    2. Todas las propiedades de cada clase tienen que estar en la misma línea, no se debe saltar la línea, para una mejor interpretación del editor.
    3. El archivo .css debe poseer todas las líneas con selectores, no se debe poseer líneas en blanco.
    4. Todas las clases, elementos e identificadores se pueden modificar, siempre que se respeten las reglas anteriores.

    Es posible obtener un ejemplo de una hoja de estilos accediendo a la página de Temas, en el Panel de Control.


    A seguir están cada una de las clases y estructura de un formulario generado a partir del editor.

    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