Histórico da Página
HTML |
---|
<div id="main-content" class="wiki-content group">
<p> </p>
<h1 id="id-4.1.Criaçãodeprocessos-Índice">
<span style="color: rgb(0, 51, 102);">Índice</span>
</h1>
<p>
En <strong>Fluig</strong> es posible utilizar los procesos
que efectúan la integración con <strong>Logix</strong>. Estos
procesos se crean utilizando el <strong>Fluig Studio</strong>,
para aprender más sobre esta herramienta consulte la documentación
en: <a href="Fluig-Studio_144409669.html">Fluig Studio</a>. A
continuación puede encontrar la documentación para la creación de un
proceso usando estilos y eventos estándares disponibles para el<strong>Logix</strong> 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 <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 maxLevel 2 outline true exclude 1
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 | ||||
---|---|---|---|---|
| ||||
"
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 </span><strong>fecha</strong><span
style="color: rgb(0, 0, 0);"> con las informaciones de
zoom en el formato JSON string.</span></span>
</p>
<p> </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 |
Exemplo
Bloco de código | ||||
---|---|---|---|---|
| ||||
<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> <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: </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 </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> </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;"><div class="fw-input"> <label<label class="fw-descr-top-obrigat">Componente atual:<</label> <input<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> </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 | ||||
---|---|---|---|---|
| ||||
<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 <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;"><div class="fw-input"> <label<label class="fw-descr-top-obrigat">Empresa:<</label> <input<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> </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 | ||||
---|---|---|---|---|
| ||||
<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.  </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. 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 </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 </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;"><div style="padding: 10px; margin-bottom: 5px;"> <input<input type="button" onclick="addItem();" value="Adicionar item"/> <</div> <table<table noaddbutton="true" tablename="itens"> <<!-- 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 | ||||
---|---|---|---|---|
| ||||
function</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 <strong>wdkAddChild</strong> pasando por parámetro el nombre definido en el atributo <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);"> </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 <strong>initLogixHtml</strong> pasando <span style="color: rgb(0, 0, 0);">el número de la línea y el nombre definido en el atributo </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 <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> |