Árvore de páginas

Versões comparadas

Chave

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

<div id="main-content" class="wiki-content group">
	<p>&#160;</p>
	<h1 id="id-4.1.Criaçãodeprocessos-Índice">
		<span style="color: rgb(0, 51, 102);">Índice</span>
	</h1>
	<p>
		En&#160;<strong>Fluig</strong>&#160;es posible utilizar los procesos
		que efectúan la integración con&#160;<strong>Logix</strong>.&#160;Estos
		procesos se crean utilizando el&#160;<strong>Fluig Studio</strong>,
		para aprender más sobre esta herramienta consulte la documentación
		en:&#160;<a href="Fluig-Studio_144409669.html">Fluig Studio</a>.&#160;A
		continuación puede encontrar la documentación para la creación de un
		proceso usando estilos y eventos estándares disponibles para&#160;el<strong>Logix</strong>&#160;si
		lo desea.
	</p>
	<p>
		<span style="color: rgb(0, 51, 102);"><style type='text/css'>/*<![CDATA[*/
div.rbtoc1412696434789 {
	padding: 0px;
}
div.rbtoc1412696434789 ul {
	list-style: disc;
	margin-left: 0px;
}
div.rbtoc1412696434789 li {
	margin-left: 0px;
	padding-left: 0px;
}
/*]]>*/
</style>
			<div class='toc-macro rbtoc1412696434789'>
				<ul class='toc-indentation'>
					<li><span class='TOCOutline'>1</span> <a
						href='#id-4.1.Criaçãodeprocessos-Índice'>Índice</a></li>
					<li><span class='TOCOutline'>2</span> <a
						href='#id-4.1.Criaçãodeprocessos-Estilospadrões'>Estilos
							estándares</a>
						<ul class='toc-indentation'>
							<li><span class='TOCOutline'>2.1</span> <a
								href='#id-4.1.Criaçãodeprocessos-Máscaras'>Máscaras</a></li>
							<li><span class='TOCOutline'>2.2</span> <a
								href='#id-4.1.Criaçãodeprocessos-Zooms'>Zooms</a></li>
						</ul></li>
					<li><span class='TOCOutline'>3</span> <a
						href='#id-4.1.Criaçãodeprocessos-Defindoocódigodaempresa'>Definiendo
							el código de la empresa</a></li>
					<li><span class='TOCOutline'>4</span> <a
						href='#id-4.1.Criaçãodeprocessos-FormuláriosPaiFilho'>Formularios
							Padre Hijo</a></li>
					<li><span class='TOCOutline'>5</span> <a
						href='#id-4.1.Criaçãodeprocessos-Anexos'>Adjuntos</a></li>
				</ul>
			</div></span>
	</p>
	<h1 id="id-4.1.Criaçãodeprocessos-Estilospadrões">
		<span style="color: rgb(0, 51, 102);">Estilos estándares</span>
	</h1>
	<p>
		<span>Los estilos de los formularios HTML deben seguir el mismo
			estándar definido por el Fluig que se encuentra en el link&#160;<a
			href="

 

Índice

No Fluig é possível utilizar processos que efetuam integração com o Logix. Estes processos são criados utilizando o Fluig Studio, para saber mais sobre esta ferramenta consulta a documentação em: Fluig Studio. Abaixo pode ser encontrado a documentação para a criação de um processo utilizando estilos e eventos padrões disponíveis para o Logix caso desejável.

Índice
maxLevel2
outlinetrue
exclude1

Estilos padrões

...

http://fluig.totvs.com/portal/p/10097/ecmnavigation?app_ecm_navigation_doc=1672216

...

Máscaras

As máscaras dos campos do formulário também devem seguir o padrão que poderá ser encontrado em Desenvolvimento de Formulários#MáscaradeCampos.

Zooms

Para atribuir zooms aos campos é necessário incluir no elemento o atributo data com as informações do zoom no formato JSON string.

 

Bloco de código
themeEclipse
languagejavascript
"
			class="external-link" rel="nofollow">http://fluig.totvs.com/portal/p/10097/ecmnavigation?app_ecm_navigation_doc=1672216</a>.
		</span>
	</p>
	<h2 id="id-4.1.Criaçãodeprocessos-Máscaras">
		<span style="color: rgb(0, 51, 102);">Máscaras</span>
	</h2>
	<p>
		<span style="color: rgb(0, 0, 0);">Las máscaras de los campos
			del formulario también deben seguir el estándar que se puede
			encontrar en <a
			href="75270483.html#CustomizaçãodeFormulários-MáscaradeCampos">Personalización
				de Formularios#MáscaradeCampos</a>.
		</span>
	</p>
	<h2 id="id-4.1.Criaçãodeprocessos-Zooms">
		<span style="color: rgb(0, 51, 102);">Zooms</span>
	</h2>
	<p>
		<span style="color: rgb(0, 51, 102);"><span
			style="color: rgb(0, 0, 0);">Para atribuir zooms a los campos
				es necesario incluir en el elemento el atributo&#160;</span><strong>fecha</strong><span
			style="color: rgb(0, 0, 0);">&#160;con las informaciones de
				zoom en el formato JSON string.</span></span>
	</p>
	<p>&#160;</p>
	<div class="code panel pdl" style="border-width: 1px;">
		<div class="codeContent panelContent pdl">
			<pre class="theme: Eclipse; brush: javascript; gutter: false"
				style="font-size: 12px;">{
    "zoom": {
        "name": "zoom_item",
        "selection": [
            ["cod_item_compon","cod_item"],
            ["den_item","den_item_reduz"]
        ],
        "whereclause": {
            "fn": "setWhereClause",
            "args": ["item"]
        }
    }
}

As informações que devem ser atribuídas para o correto funcionamento do zoom são:

...

  • lista com os campos que serão carregados ao selecionar o registro no zoom, o primeiro item é o nome do campo do formulário e o segundo é o nome do campo no zoom do qual o primeiro item receberá o valor.

...

Nota

Além das informações do zoom acima é necessário incluir nos elementos o atributo data-input-zoom
para que seja possível identificar quais campos possuirão zoom.

 

Exemplo
Bloco de código
themeEclipse
languagehtml/xml
<div</pre>
		</div>
	</div>
	<p>
		<span style="color: rgb(0, 51, 102);"><span
			style="color: rgb(0, 0, 0);">La información que se debe
				incluir para el correcto funcionamiento del zoom es:</span></span>
	</p>
	<ul>
		<li><strong><span style="color: rgb(0, 0, 0);">name</span></strong><span
			style="color: rgb(0, 0, 0);"><strong>:</strong> nombre del
				zoom registrado en el metadato Logix.</span></li>
		<li><span style="color: rgb(0, 0, 0);"><strong>selection:</strong></span>
		<ul>
				<li><span style="color: rgb(0, 0, 0);">lista con los
						campos que se cargarán cuando se selecciona el registro en zoom,
						el primer ítem es el nombre del campo del formulario y el segundo
						es el nombre del campo en el zoom del cual el primer ítem recibirá
						el valor.<br />
				</span></li>
			</ul></li>
		<li><span style="color: rgb(0, 0, 0);"><strong>whereclause:</strong><br /></span>
		<ul>
				<li><span style="color: rgb(0, 0, 0);"><strong>fn:</strong>&#160;<span
						style="color: rgb(0, 0, 0);">función JavaScript que será
							ejecutada cuando el zoom sea accionado para retornar el filtro
							SQL a considerar en la presentación de los registros del zoom.</span><br /></span></li>
				<li><span style="color: rgb(0, 0, 0);"><span
						style="color: rgb(0, 0, 0);"><strong>args:&#160;</strong>lista
							con valores que serán pasados como parámetros para la función
							definida en el atributo <strong>fn</strong>.</span></span><br />
				<span style="color: rgb(0, 0, 0);"><span
						style="color: rgb(0, 0, 0);"><br /></span></span></li>
			</ul></li>
	</ul>
	<div class="aui-message warning shadowed information-macro">
		<span class="aui-icon icon-warning">Icon</span>
		<div class="message-content">
			<p style="text-align: center;">
				<span style="color: rgb(0, 0, 0);">Además de las
					informaciones del zoom anteriormente mencionado es necesario
					incluir en los elementos el atributo&#160;</span><strong>fecha-input-zoom<br /></strong><span
					style="color: rgb(0, 0, 0); font-size: 10.0pt; line-height: 13.0pt;">para
					que sea posible identificar cuáles campos poseerán zoom.</span>
			</p>
		</div>
	</div>
	<p>&#160;</p>
	<h5 id="id-4.1.Criaçãodeprocessos-Exemplo">
		<span
			style="color: rgb(0, 51, 102); font-size: 1.1em; font-weight: bold; line-height: normal;">Ejemplo</span>
	</h5>
	<div class="code panel pdl" style="border-width: 1px;">
		<div class="codeContent panelContent pdl">
			<pre class="theme: Eclipse; brush: html/xml; gutter: false"
				style="font-size: 12px;">&lt;div class="fw-input">
    <label&lt;label class="fw-descr-top-obrigat">Componente atual:<&lt;/label>
    <input&lt;input type="text" name="cod_item_compon" class="fw-input-char" maxlength="15" data='{"picture":"@!","zoom":{"name":"zoom_item","selection":[["cod_item_compon","cod_item"],["den_item","den_item_reduz"]],"whereclause":{"fn":"setWhereClause","args":["item"]}}}' data-input-zoom>
&lt;/div></pre>
		</div>
	</div>

Defindo o código da empresa

Para utilizar as rotinas do Logix a partir do workflow é necessário que haja o código da empresa que será utilizada na rotina. Para isso, deve criar um campo no formulário onde será informado o código da empresa e incluir para este campo o atributo data-cod-empresa. O valor informado no campo que possuir este atributo será considerado o código da empresa na rotina durante a execução.

Exemplo
Bloco de código
themeEclipse
languagehtml/xml
<div
	<h1 id="id-4.1.Criaçãodeprocessos-Defindoocódigodaempresa">
		<span style="color: rgb(0, 51, 102);">Definiendo el código de
			la empresa</span>
	</h1>
	<p>
		<span style="color: rgb(0, 0, 0);">Para utilizar las rutinas
			del Logix a partir del workflow es necesario que haya el código de la
			empresa que será utilizada en la rutina. Para ello, debe crear un
			campo en el formulario donde será informado el código de la empresa e
			incluir para este campo el atributo&#160;<strong>fecha-cod-empresa</strong>.
			El valor informado en el campo que posee este atributo será
			considerado el código de la empresa en la rutina durante la
			ejecución.
		</span>
	</p>
	<h5 id="id-4.1.Criaçãodeprocessos-Exemplo.1">
		<span
			style="color: rgb(0, 51, 102); font-size: 1.1em; font-weight: bold; line-height: normal;">Ejemplo</span>
	</h5>
	<div class="code panel pdl" style="border-width: 1px;">
		<div class="codeContent panelContent pdl">
			<pre class="theme: Eclipse; brush: html/xml; gutter: false"
				style="font-size: 12px;">&lt;div class="fw-input">
    <label&lt;label class="fw-descr-top-obrigat">Empresa:<&lt;/label>
	<input&lt;input type="text" name="cod_empresa" class="fw-input-char" maxlength="2" data='{"picture":"@!","zoom":{"name":"zoom_empresa","selection":[["cod_empresa","cod_empresa"],["den_empresa","den_empresa"]]}}' data-cod-empresa data-input-zoom>
&lt;/div></pre>
		</div>
</div>

Formulários Pai Filho

Em formulários Pai Filho os campos filhos são criados dinamicamente e consequentemente os estilos e comportamentos destes campos não seguem o mesmo padrão dos outros campos do formulário quando utilizado os estilos e eventos padrões do Logix. Para solucionar este problema é recomendável seguir os passos abaixo:

1. Criar o botão e evento de inclusão de campos filhos manualmente

    • Para isto deve-se incluir no elemento de tabela do formulário o atributo noaddbutton com o valor true.
Exemplo
Bloco de código
themeEclipse
languagehtml/xml
<div	</div>
	<h1 id="id-4.1.Criaçãodeprocessos-FormuláriosPaiFilho">
		<span style="color: rgb(0, 51, 102);">Formularios Padre Hijo</span>
	</h1>
	<p>
		<span style="color: rgb(0, 0, 0);">Em formularios <strong>Padre
				Hijo</strong> los campos hijos son creados dinámicamente y consecuentemente
			los estilos y comportamientos de estos campos no siguen el mismo
			estándar de los otros campos del formulario cuando se utilizan los
			estilos y eventos estándares del Logix.&#160;
		</span><span
			style="color: rgb(0, 0, 0); font-size: 10.0pt; line-height: 13.0pt;">Para
			solucionar este problema es recomendable seguir los pasos a
			continuación:</span>
	</p>
	<p style="margin-left: 30.0px;">
		<span style="color: rgb(0, 0, 0);">1.&#160;Crear el botón y
			evento de inclusión de campos hijos manualmente</span>
	</p>
	<ul>
		<li style="list-style-type: none;"><ul>
				<li style="color: rgb(0, 0, 0);"><span
					style="font-size: 10.0pt; line-height: 13.0pt; color: rgb(0, 0, 0);">Para
						esto se debe incluir en el elemento de tabla del formulario el
						atributo&#160;</span><strong
					style="font-size: 10.0pt; line-height: 13.0pt; color: rgb(0, 0, 0);">noaddbutton</strong><span
					style="font-size: 10.0pt; line-height: 13.0pt; color: rgb(0, 0, 0);">
						con el valor&#160;</span><strong
					style="font-size: 10.0pt; line-height: 13.0pt; color: rgb(0, 0, 0);">true</strong><span
					style="font-size: 10.0pt; line-height: 13.0pt; color: rgb(0, 0, 0);">.</span></li>
			</ul></li>
	</ul>
	<h5 id="id-4.1.Criaçãodeprocessos-Exemplo.2">
		<span style="color: rgb(0, 51, 102);">Ejemplo</span>
	</h5>
	<div class="code panel pdl" style="border-width: 1px;">
		<div class="codeContent panelContent pdl">
			<pre class="theme: Eclipse; brush: html/xml; gutter: false"
				style="font-size: 12px;">&lt;div style="padding: 10px; margin-bottom: 5px;">
    <input&lt;input type="button" onclick="addItem();" value="Adicionar item"/>
<&lt;/div>

<table&lt;table noaddbutton="true" tablename="itens">
    <&lt;!-- Código HTML -->
</table>

2. Criar o evento JavaScript para incluir e alterar o estilos dos campos filhos

    • Para incluir novos itens filhos, utilizar a função padrão wdkAddChild passando por parâmetro o nome definido no atributo tablename;
    • O evento wdkAddChild irá criar os itens filhos e retornar o número da linha criada; e
    • Após, executar a função initLogixHtml passando o número da linha e o nome definido no atributo tablename.
Exemplo
Bloco de código
themeEclipse
languagejavascript
function&lt;/table></pre>
		</div>
	</div>
	<p style="margin-left: 30.0px;">
		<span style="color: rgb(0, 0, 0);">2. Crear el evento
			JavaScript para incluir y alterar los estilos de los campos hijos</span>
	</p>
	<ul>
		<li style="list-style-type: none;"><ul>
				<li style="color: rgb(0, 0, 0);"><span
					style="color: rgb(0, 0, 0);">Para incluir nuevos ítems
						hijos, utilizar la función estándar&#160;<strong>wdkAddChild</strong>
						pasando por parámetro el nombre definido en el atributo&#160;<strong>tablename;</strong>
				</span></li>
				<li style="color: rgb(0, 0, 0);"><span
					style="color: rgb(0, 0, 0);">El evento <strong>wdkAddChild</strong><span
						style="color: rgb(0, 0, 0);">&#160;</span>creará los ítems hijos y
						retornar el número de la línea creada; y
				</span></li>
				<li style="color: rgb(0, 0, 0);"><span
					style="color: rgb(0, 0, 0);">Después, ejecutar la
						función&#160;<strong>initLogixHtml</strong> pasando&#160;<span
						style="color: rgb(0, 0, 0);">el número de la línea y el
							nombre definido en el atributo&#160;</span><strong>tablename</strong>.
				</span></li>
			</ul></li>
	</ul>
	<h5 style="color: rgb(0, 0, 0);"
		id="id-4.1.Criaçãodeprocessos-Exemplo.3">
		<span style="color: rgb(0, 51, 102);">Ejemplo</span>
	</h5>
	<div class="code panel pdl" style="border-width: 1px;">
		<div class="codeContent panelContent pdl">
			<pre class="theme: Eclipse; brush: javascript; gutter: false"
				style="font-size: 12px;">function addItem() {
    var tablename = "itens",
        row = wdkAddChild(tablename);

    initLogixHtml({
        "tablename": tablename,
        "row": row
    });
}

Seguindo os passos acima, os itens filhos irão se comportar normalmente assim como o restante dos campos do formulário.

Anexos

...

</pre>
		</div>
	</div>
	<p>
		<span style="color: rgb(0, 0, 0);">Siguiendo los pasos
			anteriores, los elementos secundarios se comportan normalmente así
			como el resto de los campos de este formulario.</span>
	</p>
	<p>
		<span style="color: rgb(0, 51, 102);"><br /></span>
	</p>
	<h1 id="id-4.1.Criaçãodeprocessos-Anexos">
		<span style="color: rgb(0, 51, 102);">Adjuntos</span>
	</h1>
	<ul>
		<li>Biblioteca JavaScript <strong><a
				href="attachments/108660318/146118753.js">wfLogixUtil.js</a></strong>.
		</li>
		<li>Archivo HTML de ejemplo&#160;<strong><a
				href="http://fluig.totvs.com/portal/p/10097/ecmnavigation?app_ecm_navigation_doc=1675332"
				class="external-link" rel="nofollow">http://fluig.totvs.com/portal/p/10097/ecmnavigation?app_ecm_navigation_doc=1675332</a></strong>.
		</li>
	</ul>
</div>