TOTVS Fluig Español

Árvore de páginas

Í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 TOTVS Fluig Plataforma.



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

    Clase
    Descripción
    .form-fieldDIV que encuadra todo campo del formulario
    .form-inputDIV principal apenas del campo (no encuadra la label)
    .is-requiredClase del asterisco en campos obligatorios.
    .label-field-propertiesLabel de los campos
    .paragraph-is-requiredMensaje de obligatorio
    .title-form-applicationClase del título del formulario


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


    HTML

    El HTML generado automáticamente por el editor de formularios con apenas un campo, queda con la siguiente estructura:

    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>


    Ejemplo

    A seguir crearemos un tema con:

    1. Campos del tipo input con fondo negro y color blanco.
    2. Labels en negrito y color bordó.
    3. Título del formulario con un margen, color y borde inferior.
    4. Cada bloque de campo tendrá margen inferior, con espaciamiento interno y un borde rojo.
    5. Color rojo y tamaño de la fuente para el asterisco de obligatorio.



    • Para este resultado, el siguiente CSS se debe crear y registrar en los 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; }