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);">Contents</span>
</h1>
<p>
In <strong>Fluig</strong>, you can use processes that integrate
with <strong>Logix</strong>. These processes are created by
using <strong>Fluig Studio</strong>. To learn more about this
tool, check the documentation in: <a
href="Fluig-Studio_144409669.html">Fluig Studio</a>. The
documentation to create a process using default styles and events
available for <strong>Logix</strong> can be found below.
</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'>Contents</a></li>
<li><span class='TOCOutline'>2</span> <a
href='#id-4.1.Criaçãodeprocessos-Estilospadrões'>Default
styles</a>
<ul class='toc-indentation'>
<li><span class='TOCOutline'>2.1</span> <a
href='#id-4.1.Criaçãodeprocessos-Máscaras'>Masks</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'>Defining
the company code</a></li>
<li><span class='TOCOutline'>4</span> <a
href='#id-4.1.Criaçãodeprocessos-FormuláriosPaiFilho'>Parent
Child Forms</a></li>
<li><span class='TOCOutline'>5</span> <a
href='#id-4.1.Criaçãodeprocessos-Anexos'>Attachments</a></li>
</ul>
</div></span>
</p>
<h1 id="id-4.1.Criaçãodeprocessos-Estilospadrões">
<span style="color: rgb(0, 51, 102);">Default styles</span>
</h1>
<p>
<span>The styles of the HTML forms must follow the same
standard defined by Fluig, which can be found through the following
link <a
href="http://fluig.totvs.com/portal/p/10097/ecmnavigation?app_ecm_navigation_doc=1672216"
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);">Masks</span>
</h2>
<p>
<span style="color: rgb(0, 0, 0);">The masks of the form must
also follow the standard that can be found in <a
href="75270483.html#CustomizaçãodeFormulários-MáscaradeCampos">FormCustomization#FieldsMask</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);">In order to assign zooms to the
fields, you must add the </span><strong>data</strong><span
style="color: rgb(0, 0, 0);"> attribute in the element,
with the zoom information in the JSON string format.</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"]
}
}
}</pre>
</div>
</div>
<p>
<span style="color: rgb(0, 51, 102);"><span
style="color: rgb(0, 0, 0);">The following information must be
attributed for the correct operation of the zoom:</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> name of zoom
registered in the Logix metadata.</span></li>
<li><span style="color: rgb(0, 0, 0);"><strong>selection:</strong></span>
<ul>
<li><span style="color: rgb(0, 0, 0);">list of fields
that will be loaded when the record on the zoom is selected; the
first item is the name of the form field and the second is the
name of the field in the zoom which will assign value to the first
item.<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);">JavaScript function that will
be performed when the zoom is activated to return the SQL filter
considered in the presentation of zoom records.</span><br /></span></li>
<li><span style="color: rgb(0, 0, 0);"><span
style="color: rgb(0, 0, 0);"><strong>args: </strong>list
with values that will be passed as parameters for the function
defined in the <strong>fn</strong> atribute.</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);">In addition to the zoom
information above, the </span><strong>data-input-zoom<br /></strong><span
style="color: rgb(0, 0, 0); font-size: 10.0pt; line-height: 13.0pt;">attribute
must be included in the elements in order for the fields that will
feature zoom to be identified.</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;">Example</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 class="fw-descr-top-obrigat">Componente atual:</label>
<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>
<h1 id="id-4.1.Criaçãodeprocessos-Defindoocódigodaempresa">
<span style="color: rgb(0, 51, 102);">Defining the company code</span>
</h1>
<p>
<span style="color: rgb(0, 0, 0);">To use the Logix routines
from the workflow, a code for the company that will be used in the
routine must be defined. To do that, create a field on the form where
the company code will be informed, and include the attribute <strong>
data-cod-company</strong> for this field. The value entered in the field that
features this attribute will be considered the company code in the
routine during execution.
</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;">Example</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 class="fw-descr-top-obrigat">Empresa:</label>
<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>
<h1 id="id-4.1.Criaçãodeprocessos-FormuláriosPaiFilho">
<span style="color: rgb(0, 51, 102);">Parent Child Forms</span>
</h1>
<p>
<span style="color: rgb(0, 0, 0);">In <strong>Parent
Child</strong> forms, child fields are created dynamically and consequently
the styles and behaviors of these fields do not follow the same
standard of the other fields of the form when using the default
styles and events of Logix. 
</span><span
style="color: rgb(0, 0, 0); font-size: 10.0pt; line-height: 13.0pt;">To
solve these problems, we recommend following the steps below:</span>
</p>
<p style="margin-left: 30.0px;">
<span style="color: rgb(0, 0, 0);">1. Manually create
button and event for addition of child fields</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);">To
do so, add the attribute </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);">
in the table element of the form with the value </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);">Example</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 type="button" onclick="addItem();" value="Adicionar item"/>
</div>
<table noaddbutton="true" tablename="itens">
<!-- Código HTML -->
</table></pre>
</div>
</div>
<p style="margin-left: 30.0px;">
<span style="color: rgb(0, 0, 0);">2. Create the JavaScript
event to include and change the styles of the child fields</span>
</p>
<ul>
<li style="list-style-type: none;"><ul>
<li style="color: rgb(0, 0, 0);"><span
style="color: rgb(0, 0, 0);">To include new child fields,
use the default <strong>wdkAddChild</strong> function, using
the name defined in the <strong>tablename</strong> attribute
as parameter;
</span></li>
<li style="color: rgb(0, 0, 0);"><span
style="color: rgb(0, 0, 0);">The event <strong>wdkAddChild</strong><span
style="color: rgb(0, 0, 0);"> </span>will create the child
items, and return the number of the line created; and
</span></li>
<li style="color: rgb(0, 0, 0);"><span
style="color: rgb(0, 0, 0);">Afterwards, execute the
function <strong>initLogixHtml</strong>, informing <span
style="color: rgb(0, 0, 0);">the number of the line and the
name defined in the </span><strong>tablename</strong> attribute.
</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);">Example</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
});
}</pre>
</div>
</div>
<p>
<span style="color: rgb(0, 0, 0);">Following the steps above,
the child items will behave normally, like the rest of the form
fields.</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);">Attachments</span>
</h1>
<ul>
<li>JavaScript Library <strong><a
href="attachments/108660318/146118753.js">wfLogixUtil.js</a></strong>.
</li>
<li>Sample HTML file <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>
|
Visão Geral
Import HTML Content
Conteúdo das Ferramentas
Tarefas