Índice

outline	true
style	none
exclude	.*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.

Image Added

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.

Deck of Cards

effectDuration	0.5
id	samples
history	false
effectType	fade

Card

default	true
id	Passo1
label	Passo 1
effectType	slide

Acceder el Panel de Control por el menú lateral.

Image Added

Card

id	Passo2
label	Passo 2
effectType	slide

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

Image Added

Card

id	Passo3
label	Passo 3
effectType	slide

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.

Image Added

Card

id	Passo4
label	Passo 4
effectType	slide

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

Image Added

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:

El tema debe poseer siempre una regla por línea.
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.
El archivo .css debe poseer todas las líneas con selectores, no se debe poseer líneas en blanco.
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:

Bloco de código

language	html/xml
title	Formulário
linenumbers	true

<form name="formulario">
	<h1

HTML


<div id="main-content" class="wiki-content group">
	<h1 id="CustomizaçãodeTemasdeFormulários-Índice">Índice</h1>
	<p>&#160;</p>
	<p>
		<style type='text/css'>/*<![CDATA[*/
div.rbtoc1412695808727 {
	padding: 0px;
}
div.rbtoc1412695808727 ul {
	list-style: none;
	margin-left: 0px;
}
div.rbtoc1412695808727 li {
	margin-left: 0px;
	padding-left: 0px;
}
/*]]>*/
</style>
	<div class='toc-macro rbtoc1412695808727'>
		<ul class='toc-indentation'>
			<li><span class='TOCOutline'>1</span> <a
				href='#CustomizaçãodeTemasdeFormulários-CustomizaçãodeTemasdeFormulários'>Personalización
					de Temas de Formularios</a>
				<ul class='toc-indentation'>
					<li><span class='TOCOutline'>1.1</span> <a
						href='#CustomizaçãodeTemasdeFormulários-Recomendações'>Recomendaciones&#160;</a></li>
					<li><span class='TOCOutline'>1.2</span> <a
						href='#CustomizaçãodeTemasdeFormulários-HTML'>HTML</a></li>
					<li><span class='TOCOutline'>1.3</span> <a
						href='#CustomizaçãodeTemasdeFormulários-Exemplo'>Ejemplo</a></li>
				</ul></li>
		</ul>
	</div>
	</p>
	<h1
		id="CustomizaçãodeTemasdeFormulários-CustomizaçãodeTemasdeFormulários">Personalización
		de Temas de Formularios</h1>
	<p>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.</p>
	<p>&#160;</p>
	<p>
		<img class="confluence-embedded-image image-center" width="500"
			src="http://www.tdn.totvs.com/download/attachments/146965249/form.PNG?version=1&modificationDate=1404237253000&api=v2"
			data-image-src="http://www.tdn.totvs.com/download/attachments/146965249/form.PNG?version=1&modificationDate=1404237253000&api=v2">
	</p>
	<p>&#160;</p>
	<p>&#160;</p>
	<p>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.</p>
	<p>&#160;</p>
	<a name="composition-deck-samples"></a>
	<div id="samples" class="deck" history="false" loopcards="false"
		effecttype="fade" effectduration="0.5" nextafter="0.0">
		<ul class="tab-navigation"></ul>
		<!-- // .tab-navigation -->
		<div class="deck-cards panel" style="">
			<div id="Passo1" class="deck-card  active-pane" style="" cssclass=""
				accesskey="" label="Passo 1" title="" nextafter="0"
				effecttype="slide" effectduration="-1.0">
				<p>&#160;</p>
				<ul>
					<li>&#160;Acceder el <strong>Panel de Control </strong>por el
						menú lateral.
					</li>
				</ul>
				<p>
					<img class="confluence-embedded-image image-center"
						src="http://www.tdn.totvs.com/download/attachments/146965249/p1.PNG?version=1&modificationDate=1404223591000&api=v2"
						data-image-src="http://www.tdn.totvs.com/download/attachments/146965249/p1.PNG?version=1&modificationDate=1404223591000&api=v2">
				</p>
				<p>&#160;</p>
			</div>
			<div id="Passo2" class="deck-card " style="" cssclass="" accesskey=""
				label="Passo 2" title="" nextafter="0" effecttype="slide"
				effectduration="-1.0">
				<p>&#160;</p>
				<ul>
					<li>Haga clic en la pestaña de <strong>Procesos</strong> y
						después haga clic en el ítem <strong>Temas de Formularios</strong>.
					</li>
				</ul>
				<p>
					<img class="confluence-embedded-image image-center"
						src="http://www.tdn.totvs.com/download/attachments/146965249/p2.PNG?version=1&modificationDate=1404223646000&api=v2"
						data-image-src="http://www.tdn.totvs.com/download/attachments/146965249/p2.PNG?version=1&modificationDate=1404223646000&api=v2">
				</p>
				<p>&#160;</p>
			</div>
			<div id="Passo3" class="deck-card " style="" cssclass="" accesskey=""
				label="Passo 3" title="" nextafter="0" effecttype="slide"
				effectduration="-1.0">
				<p>&#160;</p>
				<ul>
					<li>En la pantalla es posible realizar el <em>download</em> 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 <strong>Agregar</strong>.
					</li>
				</ul>
				<p>
					<img class="confluence-embedded-image image-center" width="500"
						src="http://www.tdn.totvs.com/download/attachments/146965249/11.PNG?version=1&modificationDate=1404236857000&api=v2"
						data-image-src="http://www.tdn.totvs.com/download/attachments/146965249/11.PNG?version=1&modificationDate=1404236857000&api=v2">
				</p>
				<p>&#160;</p>
			</div>
			<div id="Passo4" class="deck-card " style="" cssclass="" accesskey=""
				label="Passo 4" title="" nextafter="0" effecttype="slide"
				effectduration="-1.0">
				<p>&#160;</p>
				<ul>
					<li>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 <em>upload</em>.
					</li>
				</ul>
				<p>
					<img class="confluence-embedded-image image-center" width="500"
						src="http://www.tdn.totvs.com/download/attachments/146965249/p4.PNG?version=1&modificationDate=1404223946000&api=v2"
						data-image-src="http://www.tdn.totvs.com/download/attachments/146965249/p4.PNG?version=1&modificationDate=1404223946000&api=v2">
				</p>
				<p>&#160;</p>
				<p>
					Haga clic en <strong>Guardar</strong>. después de esto el tema está
					registrado y ya se puede utilizar en el editor de formularios.
				</p>
				<p>&#160;</p>
			</div>
		</div>
	</div>
	<!-- // .deck -->
	<p>&#160;</p>
	<h3 id="CustomizaçãodeTemasdeFormulários-Recomendações">Recomendaciones&#160;</h3>
	<p>Al hacer el upload de temas es importante seguir las siguientes
		reglas:</p>
	<ol>
		<li>El tema debe poseer siempre una regla por línea.</li>
		<li>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.</li>
		<li>El archivo <em>.css</em> debe poseer todas las líneas con
			selectores, no se debe poseer líneas en blanco.
		</li>
		<li>Todas las clases, elementos e identificadores se pueden
			modificar, siempre que se respeten las reglas anteriores.</li>
	</ol>
	<p>Es posible obtener un ejemplo de una hoja de estilos accediendo
		a la página de Temas, en el Panel de Control.</p>
	<p>
		<br />A seguir están cada una de las clases y estructura de un
		formulario generado a partir del editor.
	</p>
	<div class="table-wrap">
		<table class="confluenceTable">
			<tbody>
				<tr>
					<th class="confluenceTh">Clase</th>
					<th class="confluenceTh">Descripción</th>
				</tr>
				<tr>
					<td class="confluenceTd">.title-form-application</td>
					<td class="confluenceTd">Clase del título del formulario</td>
				</tr>
				<tr>
					<td class="confluenceTd">.form-field</td>
					<td class="confluenceTd">DIV que encuadra todo campo del
						formulario</td>
				</tr>
				<tr>
					<td class="confluenceTd">.form-input</td>
					<td class="confluenceTd">DIV principal apenas del campo (no
						encuadra la label)</td>
				</tr>
				<tr>
					<td class="confluenceTd">.label-field-properties</td>
					<td class="confluenceTd"><em>Label</em> de los campos</td>
				</tr>
				<tr>
					<td class="confluenceTd">.is-required</td>
					<td class="confluenceTd">Clase del asterisco en campos
						obligatorios.</td>
				</tr>
				<tr>
					<td class="confluenceTd">.paragraph-is-required</td>
					<td class="confluenceTd">Mensaje de obligatorio</td>
				</tr>
			</tbody>
		</table>
	</div>
	<p>
		<span style="font-size: 10.0pt; line-height: 13.0pt;">En
			algunos casos es necesario utilizar del !important, pues son clases
			que ya se utilizan por el fluig y se pueden sobrescribir.</span>
	</p>
	<p>
		<span style="font-size: 10.0pt; line-height: 13.0pt;"><br /></span>
	</p>
	<h3 id="CustomizaçãodeTemasdeFormulários-HTML">HTML</h3>
	<p>El HTML generado automáticamente por el editor de formularios
		con apenas un campo, queda con la siguiente estructura:</p>
	<div class="code panel pdl" style="border-width: 1px;">
		<div class="codeHeader panelHeader pdl"
			style="border-bottom-width: 1px;">
			<b>Formulario</b>
		</div>
		<div class="codeContent panelContent pdl">
			<pre class="theme: Confluence; brush: html/xml; gutter: true"
				style="font-size: 12px;">&lt;form name="formulario">
	&lt;h1 class="title-form-application">Formulario Exemplo&lt;Exemplo</h1>
	&lt;div<div class="form-field">
		&lt;label<label class="label-field-properties">Campo Nome&lt;Nome</label>
		&lt;span<span class="is-required">
			&lt;b>*&lt;<b>*</b>
		&lt;</span>
		&lt;div<div class="form-input">
			&lt;input<input type="text" name="nome" />
		&lt;/div>
	&lt;/div>
&lt;/form></pre>
		</div>
	</div>
	<p>&#160;</p>
	<h3 id="CustomizaçãodeTemasdeFormulários-Exemplo">Ejemplo</h3>
	<p>A seguir crearemos un tema con:</p>
	<ol>
		<li>Campos del tipo <em>input</em> con fondo negro y color
			blanco.
		</li>
		<li><em>Labels</em> en negrito y color bordó.</li>
		<li>Título del formulario con un margen, color y borde inferior.</li>
		<li>Cada bloque de campo tendrá margen inferior, con
			espaciamiento interno y un borde rojo.</li>
		<li>Color rojo y tamaño de la fuente para el asterisco de
			obligatorio.</li>
	</ol>
	<p>&#160;</p>
	<p>
		<img class="confluence-embedded-image image-center" width="500"
			src="http://www.tdn.totvs.com/download/attachments/146965249/tema.PNG?version=1&modificationDate=1404156739000&api=v2"
			data-image-src="http://www.tdn.totvs.com/download/attachments/146965249/tema.PNG?version=1&modificationDate=1404156739000&api=v2">
	</p>
	<p>&#160;</p>
	<ul>
		<li><p>
				<span>Para este resultado, el siguiente CSS se debe crear y
					registrar en los temas:</span>
			</p>
			<div class="code panel pdl" style="border-width: 1px;">
				<div class="codeHeader panelHeader pdl"
					style="border-bottom-width: 1px;">
					<b>ejemplo.css</b>
				</div>
				<div class="codeContent panelContent pdl">
					<pre class="theme: Confluence; brush: css; gutter: true"
						style="font-size: 12px;">input</form>

Exemplo

A seguir criaremos um tema com:

Campos do tipo input com fundo preto e cor branca.
Labels em negrito e cor bordô.
Títutlo do formulário com uma margem, cor e borda inferior.
Cada bloco de campo terá margem inferior, com espaçamento interno e uma borda vermelha.
Cor vermelho e tamanho da fonte para o asterisco de obrigatório.

Image Added

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

Bloco de código

language	css
title	exemplo.css
linenumbers	true

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

...

Árvore de páginas

Versões comparadas

Versão antiga 2

Nova versão 3

Chave

Índice

Personalización de Temas de Formularios

Recomendaciones

HTML

Exemplo

Árvore de páginas

Histórico da Página

Versões comparadas

Versão antiga 2

Nova versão 3

Chave

Índice

Personalización de Temas de Formularios

Recomendaciones

HTML

Exemplo