TOTVS Fluig English

Árvore de páginas

Index


Form theme customization

In the form editor, available in the process editor, you can select a template for the form that is being created. This style can be customized by any user who has permission to access the control panel.




Now browse through the tabs below to follow the step-by-step instructions to create a new custom theme in TOTVS Fluig Platform.



    • Access the Control panel from the side menu.



    • Click on the Processes tab and then click the Form themes item.



    • On the screen, it is possible to download themes already registered, define whether the theme is or is not active to appear to the user and the standard theme which is the pre-selected theme when creating a form. To add a new theme, click Add.



    • On the screen, to add a new style, you are required to fill in a code to the theme, the description of the theme and select the CSS file to execute the upload.


    Click Save. After that, the theme is registered and can already be used in the form editor.


    Recommendations 

    When uploading themes, it is important to follow these rules:

    1. The theme must always have a rule per line.
    2. All the properties of each class have to be on the same line; for better interpretation of the editor, lines should not be skipped.
    3. The .CSS file should have all lines with selectors and it cannot have blank lines.
    4. All classes, elements and identifiers can be modified, provided that the rules mentioned above are followed.

    It is possible to see an example of a style sheet by using the Themes page in the control panel.


    Below are each of the classes and structure of a form generated from the editor.

    Class
    Description
    . paragraph-is-requiredMandatory message
    .form-fieldDIV that fits all form fields
    .form-inputParent page DIV only for the field (does not fit the label)
    .is-requiredClass of the asterisk on mandatory fields.
    .label-field-propertiesLabel of the fields
    .title-form-applicationForm title class


    In some cases, it is necessary to use the !important, as these are classes that are already used by TOTVS Fluig Platform and can be subscribed.


    HTML

    The HTML automatically generated by the form editor with only one field gets the following structure:

    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>


    Example

    Now, we'll create a theme with:

    1. Input type fields with black background and white color.
    2. Labels in bold and maroon color.
    3. Form title with a margin, color and bottom edge.
    4. Each block of field will have a bottom margin, with internal spacing and a red border.
    5. Red color and font size for the mandatory asterisk.



    • For this result, the following CSS must be created and registered on the themes:

      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; }