| Índice |
|---|
| outline | true |
|---|
| style | none |
|---|
| exclude | .*ndice |
|---|
|
When publishing a form definition, it is not recommended to use statements such as:
| Bloco de código |
|---|
|
<div id="main-content" class="wiki-content group">
<div>
<h1 id="CustomizaçãodeFormulários-Índice">Index</h1>
<p> </p>
<p>
<style type='text/css'>/*<![CDATA[*/
div.rbtoc1412695666268 {
padding: 0px;
}
div.rbtoc1412695666268 ul {
list-style: none;
margin-left: 0px;
}
div.rbtoc1412695666268 li {
margin-left: 0px;
padding-left: 0px;
}
/*]]>*/
</style>
<div class='toc-macro rbtoc1412695666268'>
<ul class='toc-indentation'>
<li><span class='TOCOutline'>1</span> <a
href='#CustomizaçãodeFormulários-Declaração<!DOCTYPE>HTML'>Statement
<!DOCTYPE> HTML</a></li>
<li><span class='TOCOutline'>2</span> <a
href='#CustomizaçãodeFormulários-FormController'>FormController</a></li>
<li><span class='TOCOutline'>3</span> <a
href='#CustomizaçãodeFormulários-CustomizaçãodeFormulários'>Form
Customization</a>
<ul class='toc-indentation'>
<li><span class='TOCOutline'>3.1</span> <a
href='#CustomizaçãodeFormulários-AfterProcessing'>AfterProcessing</a></li>
<li><span class='TOCOutline'>3.2</span> <a
href='#CustomizaçãodeFormulários-AfterSaveNew'>AfterSaveNew</a></li>
<li><span class='TOCOutline'>3.3</span> <a
href='#CustomizaçãodeFormulários-BeforeProcessing'>BeforeProcessing</a></li>
<li><span class='TOCOutline'>3.4</span> <a
href='#CustomizaçãodeFormulários-DisplayFields'>DisplayFields</a></li>
<li><span class='TOCOutline'>3.5</span> <a
href='#CustomizaçãodeFormulários-EnableFields'>EnableFields</a></li>
<li><span class='TOCOutline'>3.6</span> <a
href='#CustomizaçãodeFormulários-InputFields'>InputFields</a></li>
<li><span class='TOCOutline'>3.7</span> <a
href='#CustomizaçãodeFormulários-SetEnable'>SetEnable</a></li>
<li><span class='TOCOutline'>3.8</span> <a
href='#CustomizaçãodeFormulários-ValidateForm'>ValidateForm</a></li>
</ul></li>
<li><span class='TOCOutline'>4</span> <a
href='#CustomizaçãodeFormulários-Controlesvisuais'>Visual
controls</a>
<ul class='toc-indentation'>
<li><span class='TOCOutline'>4.1</span> <a
href='#CustomizaçãodeFormulários-MáscaradeCampos'>Field Mask</a></li>
<li><span class='TOCOutline'>4.2</span> <a
href='#CustomizaçãodeFormulários-ComboBox'>ComboBox</a></li>
<li><span class='TOCOutline'>4.3</span> <a
href='#CustomizaçãodeFormulários-Zoom'>Zoom</a></li>
<li><span class='TOCOutline'>4.4</span> <a
href='#CustomizaçãodeFormulários-ZoomExterno'>External Zoom</a></li>
</ul></li>
<li><span class='TOCOutline'>5</span> <a
href='#CustomizaçãodeFormulários-ServiçosdeDados'>Data Services</a>
<ul class='toc-indentation'>
<li><span class='TOCOutline'>5.1</span> <a
href='#CustomizaçãodeFormulários-Dataset'>Dataset</a></li>
<li><span class='TOCOutline'>5.2</span> <a
href='#CustomizaçãodeFormulários-DataService'>DataService</a></li>
</ul></li>
<li><span class='TOCOutline'>6</span> <a
href='#CustomizaçãodeFormulários-PaiFilho'>Parent Child</a>
<ul class='toc-indentation'>
<li><span class='TOCOutline'>6.1</span> <a
href='#CustomizaçãodeFormulários-PaiFilhoRadioButton'>Parent
Child Radio Button</a></li>
<li><span class='TOCOutline'>6.2</span> <a
href='#CustomizaçãodeFormulários-EventosdeFormulárioPaiFilho'>Parent
Child Form Events</a>
<ul class='toc-indentation'>
<li><span class='TOCOutline'>6.2.1</span> <a
href='#CustomizaçãodeFormulários-getChildrenFromTable'>getChildrenFromTable</a></li>
<li><span class='TOCOutline'>6.2.2</span> <a
href='#CustomizaçãodeFormulários-getChildrenIndexes'>getChildrenIndexes</a></li>
</ul></li>
</ul></li>
<li><span class='TOCOutline'>7</span> <a
href='#CustomizaçãodeFormulários-Formuláriosparadispositivosmóveis'>Forms
for mobile devices</a>
<ul class='toc-indentation'>
<li><span class='TOCOutline'>7.1</span> <a
href='#CustomizaçãodeFormulários-PaiFilhoparadispositivosmóveis'>Parent
Child for mobile devices</a>
<ul class='toc-indentation'>
<li><span class='TOCOutline'>7.1.1</span> <a
href='#CustomizaçãodeFormulários-getValue'>getValue</a></li>
<li><span class='TOCOutline'>7.1.2</span> <a
href='#CustomizaçãodeFormulários-getValues'>getValues</a></li>
<li><span class='TOCOutline'>7.1.3</span> <a
href='#CustomizaçãodeFormulários-getValuesBySequence'>getValuesBySequence</a></li>
<li><span class='TOCOutline'>7.1.4</span> <a
href='#CustomizaçãodeFormulários-getValuesByField'>getValuesByField</a></li>
</ul></li>
</ul></li>
<li><span class='TOCOutline'>8</span> <a
href='#CustomizaçãodeFormulários-Traduçãodeformulários'>Translation
of forms</a></li>
<li><span class='TOCOutline'>9</span> <a
href='#CustomizaçãodeFormulários-ThirdPartyTrademarks'>Third
Party Trademarks</a></li>
</ul>
</div>
</p>
<p> </p>
<h1 id="CustomizaçãodeFormulários-Declaração<!DOCTYPE>HTML">Statement
<!DOCTYPE> HTML</h1>
</div>
<p>When publishing a form definition, it is not recommended to use
statements such as:</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: html/xml; gutter: false"
style="font-size: 12px;"><!DOCTYPE>, Ex: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></pre>
</div>
</div>
<p>
<span style="font-size: 10.0pt; line-height: 13.0pt;">These
statements may affect some features of the definition of the form or
of the Workflow when using Microsoft® Internet Explorer® browser.</span>
</p>
<h1 id="CustomizaçãodeFormulários-FormController">FormController</h1>
<p>
<span style="font-size: 10.0pt; line-height: 13.0pt;"> </span>
</p>
<p>
<strong>formController</strong> is the object that performs the
communication between the form and the event customization. This
object is available in each of the form <strong>customization
events</strong><br />through the <strong><em>form</em></strong>
variable. The variable allows you to change the field values of a
form record and also get their editing status, for example: if the<br />user
is viewing or editing the form record. The following are the
available methods for the <em><strong>form</strong></em> variable:
</p>
<div class="table-wrap">
<table class="confluenceTable">
<tbody>
<tr>
<th class="confluenceTh">Method</th>
<th class="confluenceTh">Description</th>
</tr>
<tr>
<td colspan="1" class="confluenceTd">long getCompanyId()</td>
<td colspan="1" class="confluenceTd">Returns the company ID</td>
</tr>
<tr>
<td colspan="1" class="confluenceTd">int getDocumentId()</td>
<td colspan="1" class="confluenceTd">Returns the document ID
(form record)</td>
</tr>
<tr>
<td colspan="1" class="confluenceTd">int getVersion()</td>
<td colspan="1" class="confluenceTd">Returns the document
version (form record)</td>
</tr>
<tr>
<td colspan="1" class="confluenceTd">int getCardIndex()</td>
<td colspan="1" class="confluenceTd">Returns the form ID.</td>
</tr>
<tr>
<td colspan="1" class="confluenceTd"><span>String
getValue(String fieldName)</span></td>
<td colspan="1" class="confluenceTd"><span>Gets the
value of a form field</span></td>
</tr>
<tr>
<td class="confluenceTd">void setValue(String fieldName,
String fieldValue)</td>
<td class="confluenceTd">Defines the value of a form field</td>
</tr>
<tr>
<td colspan="1" class="confluenceTd">boolean getEnabled(String
fieldName)</td>
<td colspan="1" class="confluenceTd">Checks whether a field is
enabled</td>
</tr>
<tr>
<td colspan="1" class="confluenceTd">void setEnabled(String
fieldName, boolean enabled)</td>
<td colspan="1" class="confluenceTd">Defines whether or not a
field should be enabled</td>
</tr>
<tr>
<td class="confluenceTd">String getFormMode()</td>
<td class="confluenceTd"><p>
Gets the form editing mode, and can return the following values:<br />
ADD: Creation of the form
</p>
<p>MOD: Form being edited</p>
<p>VIEW: Form view</p>
<p>NONE: No communication with the form. For example, it
occurs at the moment form fields are being validated, where it is
not being displayed.</p></td>
</tr>
<tr>
<td colspan="1" class="confluenceTd">void
setHidePrintLink(boolean hide)</td>
<td colspan="1" class="confluenceTd">When set as <em>true</em>,
it disables the form print button.
</td>
</tr>
<tr>
<td colspan="1" class="confluenceTd">boolean isHidePrintLink()</td>
<td colspan="1" class="confluenceTd">Checks whether the print
button is disabled.</td>
</tr>
<tr>
<td colspan="1" class="confluenceTd"><span>Map<String,
String> getChildrenFromTable(String tableName)</span></td>
<td colspan="1" class="confluenceTd"><span>Returns a
map containing the names and values of the child fields of a
parent table.</span></td>
</tr>
<tr>
<td colspan="1" class="confluenceTd">void
setHideDeleteButton(boolean hide)</td>
<td colspan="1" class="confluenceTd">When set as <em>true</em>,
it disables the button to delete records in a parent-child form.
</td>
</tr>
<tr>
<td colspan="1" class="confluenceTd">boolean
isHideDeleteButton()</td>
<td colspan="1" class="confluenceTd">Checks whether the
deletion of child records is disabled.</td>
</tr>
<tr>
<td colspan="1" class="confluenceTd">boolean getMobile()</td>
<td colspan="1" class="confluenceTd">Checks whether the form
record is being accessed through a <em>mobile</em> device.
</td>
</tr>
</tbody>
</table>
</div>
<p> </p>
<p>
<span style="font-size: 10.0pt; line-height: 13.0pt;"><br /></span>
</p>
<p> </p>
<div>
<h1 id="CustomizaçãodeFormulários-CustomizaçãodeFormulários">Form
Customization</h1>
</div>
<p>The customization of form definition is accomplished by creating
scripts in the JavaScript scripting language. The implementation code
of each script is stored in a database and does not require the use of
any other files, such as "plugin.p".</p>
<p>The customization events for form definition are created from
Fluig Studio. To post a form, follow the steps according to the
example below:</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="1" class="deck-card active-pane" style="" cssclass=""
accesskey="" label="Passo1" title="" nextafter="0"
effecttype="default" effectduration="-1.0">
<p> </p>
<ul>
<li><p>
To create a form definition, go to the <em>Package Explorer</em>
view and access the <em>forms</em> folder of the Fluig project,
right click, and access <em>New > Form Definition</em> from the
menu. 
</p></li>
</ul>
<p>
<img class="confluence-embedded-image image-center"
src="attachments/75270483/75237453.png"
data-image-src="attachments/75270483/75237453.png">
</p>
<p style="text-align: center;">
<strong>Figure 1 - New Form Definition.</strong>
</p>
<p> </p>
</div>
<div id="2" class="deck-card " style="" cssclass="" accesskey=""
label="Passo 2" title="" nextafter="0" effecttype="default"
effectduration="-1.0">
<p> </p>
<div>
<ul>
<li><p>In the form definition creation screen, enter the
desired name and click finish.</p></li>
</ul>
<p>
<img class="confluence-embedded-image image-center"
src="attachments/75270483/75237454.png"
data-image-src="attachments/75270483/75237454.png">
</p>
<p style="text-align: center;">
<strong style="text-align: center;">Figure 2 - New Form
Definition.</strong>
</p>
<p>
<strong><br /></strong>
</p>
</div>
</div>
<div id="3" class="deck-card " style="" cssclass="" accesskey=""
label="Passo 3" title="" nextafter="0" effecttype="default"
effectduration="-1.0">
<p> </p>
<ul>
<li><p>
When you finish, a package that refers to the form definition is
created in the <em>forms</em> folder and the form editor is
available for editing.
</p></li>
</ul>
<p>
<img class="confluence-embedded-image image-center"
src="attachments/75270483/75237455.png"
data-image-src="attachments/75270483/75237455.png">
</p>
<p style="text-align: center;">
<strong style="text-align: center;">Figure 3 - New Form
Definition.</strong>
</p>
<p style="text-align: center;">
<strong><br /></strong>
</p>
</div>
<div id="4" class="deck-card " style="" cssclass="" accesskey=""
label="Passo 4" title="" nextafter="0" effecttype="default"
effectduration="-1.0">
<p> </p>
<ul>
<li><p>From the editor, all the HTML content is developed.
In the example, a simple registration form was developed.</p></li>
</ul>
<div>
<p>
<img class="confluence-embedded-image image-center"
src="attachments/75270483/75237456.png"
data-image-src="attachments/75270483/75237456.png">
</p>
<p style="text-align: center;">
<strong style="text-align: center;">Figure 4 - New Form
Definition.</strong>
</p>
<p> </p>
</div>
</div>
</div>
</div>
<!-- // .deck -->
<p> </p>
<p>After creating a form definition, you can create scripts for
customization. Form events are created through the following steps:</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="1" class="deck-card active-pane" style="" cssclass=""
accesskey="" label="Passo1" title="" nextafter="0"
effecttype="default" effectduration="-1.0">
<p> </p>
<ul>
<li><p>
To create a form script in Fluig, go to the <em>Package
Explorer</em> view and access the <em>forms</em> folder of the Fluig
project, right click, and access <em>New > Other</em> from the
menu. 
</p></li>
</ul>
<p>
<img class="confluence-embedded-image image-center"
src="attachments/75270483/75237453.png"
data-image-src="attachments/75270483/75237453.png">
</p>
<p style="text-align: center;">
<strong>Figure 5 – Creating a form definition event
script.</strong>
</p>
<p> </p>
</div>
<div id="2" class="deck-card " style="" cssclass="" accesskey=""
label="Passo 2" title="" nextafter="0" effecttype="default"
effectduration="-1.0">
<p> </p>
<div>
<ul>
<li><p>Select the form definition Event Script option and
click the Next button.</p></li>
</ul>
<p>
<img class="confluence-embedded-image image-center"
src="attachments/75270483/75237458.png"
data-image-src="attachments/75270483/75237458.png">
</p>
<p style="text-align: center;">
<strong style="text-align: center;">Figure 6 – Creating a
form definition event script.</strong>
</p>
<p>
<strong><br /></strong>
</p>
</div>
</div>
<div id="3" class="deck-card " style="" cssclass="" accesskey=""
label="Passo 3" title="" nextafter="0" effecttype="default"
effectduration="-1.0">
<p> </p>
<ul>
<li><p>
On this screen, enter the fields related to the event that you
want to add and click the <em>Finish</em> button.
</p></li>
</ul>
<p>
<img class="confluence-embedded-image image-center"
src="attachments/75270483/75237459.png"
data-image-src="attachments/75270483/75237459.png">
</p>
<p style="text-align: center;">
<strong style="text-align: center;">Figure 7 – Creating a
form definition event script.</strong>
</p>
<p style="text-align: center;">
<strong><br /></strong>
</p>
</div>
<div id="4" class="deck-card " style="" cssclass="" accesskey=""
label="Passo 4" title="" nextafter="0" effecttype="default"
effectduration="-1.0">
<p> </p>
<ul>
<li><p>
In the example, we have selected the event <em>displayFields</em>,
and related it to the form definition <em>form_exemplo_fluig</em>.
</p></li>
</ul>
<div>
<p>
<img class="confluence-embedded-image image-center"
src="attachments/75270483/75237460.png"
data-image-src="attachments/75270483/75237460.png">
</p>
<p style="text-align: center;">
<strong style="text-align: center;">Figure 8 – Creating a
form definition event script.</strong>
</p>
<p> </p>
</div>
</div>
<div id="5" class="deck-card " style="" cssclass="" accesskey=""
label="Passo 5" title="" nextafter="0" effecttype="default"
effectduration="-1.0">
<p> </p>
<ul>
<li><p>Upon completing the main structure of the method,
it will be available in the editor.</p></li>
</ul>
<div>
<p>
<img class="confluence-embedded-image image-center"
src="attachments/75270483/75237461.png"
data-image-src="attachments/75270483/75237461.png">
</p>
<p style="text-align: center;">
<strong>Figure 9 – Creating a form definition event
script.</strong>
</p>
<p> </p>
</div>
</div>
<div id="6" class="deck-card " style="" cssclass="" accesskey=""
label="Passo 6" title="" nextafter="0" effecttype="default"
effectduration="-1.0">
<p> </p>
<ul>
<li><p>The event used as example -validateForm, validates
the completion of request and user fields.</p>
<p>The formController object was used to check the value of
the fields, through the syntax 'form.getValue ("fieldname")'.</p>
<p>When you export the form definition, the events pertinent
to these will also be exported to the Fluig server.</p>
<p> </p></li>
</ul>
<div>
<p>
<img class="confluence-embedded-image image-center"
src="attachments/75270483/75237462.png"
data-image-src="attachments/75270483/75237462.png">
</p>
<p style="text-align: center;">
<strong>Figure 10 – Creating a form definition event
script.</strong>
</p>
<p> </p>
</div>
</div>
</div>
</div>
<!-- // .deck -->
<p> </p>
<p>All events of the form definition receive the reference to the
form. Through this reference, you can access the form fields,
access/define the value of a field, and access/define the field
presentation state. The details of each event are presented in the
following sections of this document.</p>
<p>
Fluig can use the execution log in the customization events. Through
the global variable <em>log</em>, you can get feedback of the
execution of each event. There are four log levels, namely:
</p>
<ul>
<li><strong>error:</strong> presentation of errors.</li>
<li><strong>debug:</strong> debug execution.</li>
<li><strong>warn:</strong> inform possible execution issues.</li>
<li><strong>info:</strong> presentation of messages.</li>
</ul>
<p>The presentation of each log type is conditioned to the
application server configuration. For example, in JBoss®, by default
info and warn messages are displayed on the server console, and debug
and error messages are displayed in the log file. Following is an
example of the use of log in script:</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: javascript; gutter: false"
style="font-size: 12px;">log.info ("Testing the log info");</pre>
</div>
</div>
<p>
<span style="font-size: 10.0pt; line-height: 13.0pt;">At the
server console we would see the message <strong>"Testing the
log info"</strong>.
</span>
</p>
<p>
Is it possible to know the form editing status via the <em>form</em> variable
passed as a parameter to the form definition events. To access the
edit status:
</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: javascript; gutter: false"
style="font-size: 12px;">form.getFormMode()</pre>
</div>
</div>
<p>
Calling the function<em> form.getFormMode()</em> will return a string
with the form editing mode. The following values exist for the form
editing mode:
</p>
<ul>
<li><strong>ADD:</strong> indicating addition mode.</li>
<li><strong>MOD:</strong> indicating editing mode.</li>
<li><strong>VIEW:</strong> indicating view mode.</li>
<li><strong>NONE:</strong> indicating that there is no
communication with the form. For example, it occurs at the moment
form fields are being validated, where it is not being displayed.</li>
</ul>
<p>Following are the details of events available for the
customization of a form definition in Fluig.</p>
<p> </p>
<h3 id="CustomizaçãodeFormulários-AfterProcessing">AfterProcessing</h3>
<p>This is the last event to be triggered for the card index. As a
parameter, the event receives a reference to the form definition form.</p>
<p>Example:</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: javascript; gutter: false"
style="font-size: 12px;">function afterProcessing(form){
}</pre>
</div>
</div>
<p>
<span style="font-size: 10.0pt; line-height: 13.0pt;">In the
context of this event, the form variable can only be used to query
the fields of the form definition, their values and presentation
status.</span>
</p>
<p> </p>
<h3 id="CustomizaçãodeFormulários-AfterSaveNew">AfterSaveNew</h3>
<p>This event is triggered after the creation of a new form. As a
parameter, the event receives a reference to the form definition form.</p>
<p>To get the value of a particular field of the form:</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: javascript; gutter: false"
style="font-size: 12px;"> form.getValue("nome-do-campo")</pre>
</div>
</div>
<p>Example:</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: javascript; gutter: false"
style="font-size: 12px;"> function afterSaveNew(form) {
log.info("Opening user: " + form.getValue("RNC_colab_abertura"));
}</pre>
</div>
</div>
<p>
The query to form fields is <em>case insensitive</em>. In the example
above, we could get the field value using <em>rnc_colab_abertura</em>.
</p>
<p> </p>
<h3 id="CustomizaçãodeFormulários-BeforeProcessing">BeforeProcessing</h3>
<p>This event is the first to be triggered. It occurs before any
other form definition event. As a parameter, the event receives a
reference to the form definition form.</p>
<p>Example:</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: javascript; gutter: false"
style="font-size: 12px;">function beforeProcessing(form){
}</pre>
</div>
</div>
<p>
<span style="font-size: 10.0pt; line-height: 13.0pt;">In the
context of this event, the <em>form</em> variable can only be used to
query the fields of the form definition, their values and
presentation status.
</span>
</p>
<p> </p>
<h3 id="CustomizaçãodeFormulários-DisplayFields">DisplayFields</h3>
<p>This event is triggered when the form objects are presented. The
event receives as a parameter a reference to the form definition form
and the reference for the form presentation output.</p>
<p>In this event, you can change the values to be presented in the
form field. To do this, simply use the following procedure:</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: javascript; gutter: false"
style="font-size: 12px;">form.setValue(“nome-do-campo”, “valor”);</pre>
</div>
</div>
<p>Example:</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: javascript; gutter: false"
style="font-size: 12px;"> function displayFields(form, customHTML) {
if ( form.getFormMode() == “MOD” ) {
form.setValue('RNC_colab_abertura', new java.lang.Integer(1));
}
}</pre>
</div>
</div>
<p> </p>
<p>Still in the DisplayFields event, you can use three methods
independently or jointly to change the way the form rendering appears,
delete lines of a child card index and hide the buttons "Print" and
"Print in new Window".</p>
<p>
To view the form in its original format with the disabled fields, you
must use the method<span
style="font-size: 10.0pt; line-height: 13.0pt;"> </span><em>setShowDisabledFields</em><span
style="font-size: 10.0pt; line-height: 13.0pt;">.</span>
</p>
<p>
<span style="font-size: 10.0pt; line-height: 13.0pt;">To enable
or disable the delete button on the lines of the child card index,
which by default is enabled, you must use the method<span> <em>setHideDeleteButton</em>.
</span>
</span>
</p>
<p>
To hide the buttons<strong> </strong><em>Print</em><strong> </strong>and
<em>Print in new window</em>,<strong> </strong>you must use the <em>setHidePrintLink</em>
method.
</p>
<p> </p>
<p> </p>
<p>View example without using the methods:</p>
<p>
<img class="confluence-embedded-image image-center"
src="attachments/75270483/75237466.png"
data-image-src="attachments/75270483/75237466.png">
</p>
<p style="text-align: center;">
<strong style="text-align: center;">Figure 11 – Example
without using the methods.</strong>
</p>
<p style="text-align: left;">
<strong style="text-align: center;"><br /></strong>
</p>
<p>
Example using the methods <em>setShowDisabledFields</em> and<em> <em>setHidePrintLink:</em></em>
</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: javascript; gutter: false"
style="font-size: 12px;">function displayFields(form, customHTML) {
form.setShowDisabledFields(true);
form.setHidePrintLink(true);
}</pre>
</div>
</div>
<p style="text-align: left;">
<strong style="text-align: center;"><br /></strong>
</p>
<p style="text-align: left;">
<strong style="text-align: center;"><img
class="confluence-embedded-image image-center"
src="attachments/75270483/75237469.png"
data-image-src="attachments/75270483/75237469.png"></strong>
</p>
<p style="text-align: center;">
<strong style="text-align: center;">Figure 12 – Example using
the methods.</strong>
</p>
<p> </p>
<p> </p>
<p>
View example without using the method <em>setHideDeleteButton</em>:
</p>
<p>
<img class="confluence-embedded-image image-center"
src="attachments/75270483/126684037.png"
data-image-src="attachments/75270483/126684037.png">
</p>
<p style="text-align: center;">
<strong style="text-align: center;">Figure 13 – Example
without using the method.</strong>
</p>
<p> </p>
<p>
Example using the method <em>setHideDeleteButton</em>:
</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: javascript; gutter: false"
style="font-size: 12px;">function displayFields(form, customHTML) {
form.setHideDeleteButton(false);
}</pre>
</div>
</div>
<p style="text-align: center;">
<img class="confluence-embedded-image"
src="attachments/75270483/126684038.png"
data-image-src="attachments/75270483/126684038.png">
</p>
<p style="text-align: center;">
<strong style="text-align: center;">Figure 14 – Example using
the methods.</strong>
</p>
<p style="text-align: center;">
<strong style="text-align: center;"><strong><br /></strong></strong>
</p>
<p>It is important to note that this event is the only one that
allows changing the values to be presented in form fields before
rendering it.</p>
<p>Below is an example using the form presentation output:</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: javascript; gutter: false"
style="font-size: 12px;">if(form.getFormMode() != "VIEW") {
customHTML.append("<script>");
customHTML.append("function MostraEscondeBtn_zoom()");
customHTML.append("{");
customHTML.append("document.getElementById(\'zoomUsuario\').className = \'show\';");
customHTML.append("document.getElementById(\'zoomModulo\').className = \'show\';");
customHTML.append("}");
customHTML.append("</script>");
}</pre>
</div>
</div>
<p>
<strong><br /></strong>
</p>
<h3 id="CustomizaçãodeFormulários-EnableFields">EnableFields</h3>
<p>This event is triggered when the form objects are enabled,
allowing you to disable some fields, if needed. The event receives as
a parameter a reference to the form definition form.</p>
<p>To enable or disable a form field, run the following procedure:</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: javascript; gutter: false"
style="font-size: 12px;"> form.setEnabled("nome-do-campo",true/false)</pre>
</div>
</div>
<p>
<span style="font-size: 10.0pt; line-height: 13.0pt;">Where
"true" enables the field and "false" disables the field.</span>
</p>
<p>Example:</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: javascript; gutter: false"
style="font-size: 12px;">function enableFields(form) {
if ( form.getFormMode() != 'ADD' ){
form.setEnabled("rnc_area",false);
form. setEnabled("rnc_tipo_ocorrencia",false);
}
}</pre>
</div>
</div>
<p>
<span style="font-size: 10.0pt; line-height: 13.0pt;">Please
note that the event occurs at the moment of rendering the form, and
it is the only one that allows you to change the presentation status
of the form fields.</span>
</p>
<p>
Another way to disable the fields is using JavaScript commands
implemented directly into the form functions. However, in this case,
you are not allowed to use the <em>disabled</em> property, because the
fields will not be saved when you save the card. For this situation,
you must use the <em>readonly</em> property, as in the example below:
</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: javascript; gutter: false"
style="font-size: 12px;">document.forms['nomeForm'].nomeCampo.setAttribute('readonly',true);</pre>
</div>
</div>
<p> </p>
<h3 id="CustomizaçãodeFormulários-InputFields">InputFields</h3>
<p>This event is triggered when the form data is passed to the BO
responsible for Fluig form. The event receives as a parameter a
reference to the form definition form. Example:</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: javascript; gutter: false"
style="font-size: 12px;">function inputFields(form){
}</pre>
</div>
</div>
<p> </p>
<h3 id="CustomizaçãodeFormulários-SetEnable">SetEnable</h3>
<p>This event can be executed in different form definition events.
This event is not implemented automatically in the customization of
the form definition.</p>
<p>Example:</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: javascript; gutter: false"
style="font-size: 12px;">function setEnable() {
log.info(“Function call test”);
}
function displayFields(form, customHTML) {
setEnable();
}</pre>
</div>
</div>
<p> </p>
<h3 id="CustomizaçãodeFormulários-ValidateForm">ValidateForm</h3>
<p>This event is executed before writing the form data in the
database. The event receives as a parameter a reference to the form
definition form. In case of validation errors of form data, this event
will return an error message.</p>
<p>Example:</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: javascript; gutter: false"
style="font-size: 12px;">function validateForm(form) {
if (form.getValue('RNC_colab_abertura') == null){
throw "The opening user was not informed";
}
} </pre>
</div>
</div>
<p> </p>
<div>
<h1 id="CustomizaçãodeFormulários-Controlesvisuais">Visual
controls</h1>
</div>
<p>In this chapter we will learn how to interact with some types of
form controls that have special features, such as filling in the
contents of a ComboBox using Datasets.</p>
<p> </p>
<p>By default, Fluig imports the jQuery JavaScript library to all
forms, except in cases where the form already does so. In these cases,
Fluig will identify that jQuery is already defined and will not import
it again. If the form uses another library that can conflict with
jQuery, you must define in the form the javascript variable
fluigjQuery with a false value, so that Fluig will no longer import
it. However, some other features will also be disabled, such as the
mask of Fluig fields.</p>
<p> </p>
<h3 id="CustomizaçãodeFormulários-MáscaradeCampos">Field Mask</h3>
<p>Many fields in a form have a specific format to its content,
such as dates, ZIP CODE, social security number, among others. </p>
<p>
To assist the developer of forms, Fluig allows to enable masks by
field, by providing the "mask" attribute and the mask you want
for <strong>input</strong> objects of type <strong>text</strong>.
</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeHeader panelHeader pdl"
style="border-bottom-width: 1px;">
<b>Example of using masks</b>
</div>
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: javascript; gutter: false"
style="font-size: 12px;"><input name="cep" type="text" mask="00000-000"></pre>
</div>
</div>
<p>
<span><br /></span>
</p>
<p>
<span>To elaborate the mask, you can use:</span>
</p>
<div class="table-wrap">
<table class="confluenceTable">
<tbody>
<tr>
<th style="text-align: center;" class="confluenceTh">Code</th>
<th style="text-align: center;" class="confluenceTh">Description</th>
</tr>
<tr>
<td style="text-align: center;" class="confluenceTd"><strong>0</strong></td>
<td class="confluenceTd">Only Numbers.</td>
</tr>
<tr>
<td style="text-align: center;" class="confluenceTd"><strong>9</strong></td>
<td class="confluenceTd">Only numbers plus optional.</td>
</tr>
<tr>
<td style="text-align: center;" class="confluenceTd"><strong>#</strong></td>
<td class="confluenceTd">Only numbers plus recursive.</td>
</tr>
<tr>
<td style="text-align: center;" class="confluenceTd"><strong>A</strong></td>
<td class="confluenceTd">Numbers or letters.</td>
</tr>
<tr>
<td style="text-align: center;" class="confluenceTd"><strong>S</strong></td>
<td class="confluenceTd">Only letters from A-Z and a-z.</td>
</tr>
</tbody>
</table>
</div>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeHeader panelHeader pdl"
style="border-bottom-width: 1px;">
<b>Other examples of using masks</b>
</div>
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: javascript; gutter: false"
style="font-size: 12px;">  
Date: "00/00/0000"
Time: "00:00:00"
Date and Time: "00/00/0000 00:00:00"
Zip Code: "00000-000"
Phone number: "0000-0000"
Phone number(area code): "(00) 0000-0000"
Phone number(area code + 9 digits): "(00) 90000-0000"
License plate: "SSS 0000"
CPF (Individual Taxpayer's Registry): "000.000.000-00"
CNPJ (Corporate Taxpayer's Registry): "00.000.000/0000-00"
IP: "099.099.099.099"
percentage: "#00,000.00%"
Value: "#00,000,000,000,000.00"</pre>
</div>
</div>
<div class="aui-message warning shadowed information-macro">
<span class="aui-icon icon-warning">Icon</span>
<div class="message-content">If the import of the jQuery library
is disabled through the fluigjQuery variable, the mask feature will
also be disabled.</div>
</div>
<p> </p>
<h3 id="CustomizaçãodeFormulários-ComboBox">ComboBox</h3>
<p>It is often necessary to populate a ComboBox in a form with a
certain group of values.</p>
<p>
In Fluig, this is possible through the use of <em>Datasets.</em>
Datasets are standard data services offered by Fluig, such as the
product "Volumes" service.
</p>
<p>To enable the Dataset in the ComboBox, simply use the following
construction:</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: javascript; gutter: false"
style="font-size: 12px;"><select name="RNC_volume" id="RNC_volume" dataset="nome-dataset" datasetkey="chave" datasetvalue="valor" addBlankLine=”false”></select></pre>
</div>
</div>
<p>
<span style="font-size: 10.0pt; line-height: 13.0pt;">Where:</span>
</p>
<ul>
<li>dataset is the Dataset name.</li>
<li>datasetkey is the record key.</li>
<li>datasetvalue is the value of a particular record field.</li>
<li>addBlankLine is what defines whether the first row of the
combo will be a blank value.</li>
</ul>
<p>Example:</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: javascript; gutter: false"
style="font-size: 12px;"><select name="RNC_volume" id="RNC_volume" dataset="destinationVolume" datasetkey="volumeID" datasetvalue="volumeDescription"></select></pre>
</div>
</div>
<p>In the above example we are listing in a ComboBox all the
Volumes registered in Fluig.</p>
<p> </p>
<p class="Default">If you need to order the data coming from an
internal dataset, we indicate the creation of a customized dataset
that runs inside and orders the data before feeding the combobox
component.</p>
<p>
To use a ComboBox with only <strong>one option</strong>, you should
not use special characters and spaces in the <em>value </em>of the
option tag.
</p>
<p>Examples:</p>
<ul>
<li><em>Correct way</em></li>
</ul>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: javascript; gutter: false"
style="font-size: 12px;"><select>
<option value="te">Test</option>
</select></pre>
</div>
</div>
<p> </p>
<ul>
<li><em>Incorrect Way</em></li>
</ul>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: javascript; gutter: false"
style="font-size: 12px;"><select>
<option value="te te te">Test</option>
</select></pre>
</div>
</div>
<p> </p>
<h3 id="CustomizaçãodeFormulários-Zoom">Zoom</h3>
<p>Allows querying entities and other forms created in Fluig so the
user can select data.</p>
<div>Access to this component is conducted from a Javascript call
in the HTML of the form definition.</div>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: html/xml; gutter: false"
style="font-size: 12px;">"/webdesk/zoom.jsp?datasetId="+dataset+"&dataFields="+campos+"&resultFields="+resultFields+"$type="+"&title="+titulo</pre>
</div>
</div>
<p>
<span style="font-size: 10.0pt; line-height: 13.0pt;">Where:</span>
</p>
<p> </p>
<ul>
<li>title: is the title for the zoom window.</li>
<li><span style="font-size: 10.0pt; line-height: 13.0pt;">datasetId:
is the name of the dataset (Built-in, CardIndex or Customized).</span></li>
<li>dataFields: are the names of the fields to be displayed.</li>
<li>resultFields: are fields that should be returned to the
record selected by the user.</li>
<li>likeField: the name of the field to filter data (if
required).</li>
<li>likeValue: the value to be used in the data filter (if
required).</li>
</ul>
<p> </p>
<p class="ListParagraphCxSpLast">
<strong>PLEASE NOTE</strong>: This parameter is only valid for
internal datasets. Customized Datasets do not allow the use of
filters.
</p>
<p> </p>
<div>
<ul>
<li>To get the record selected by the user, we should add the
following JavaScript function to the process form:</li>
</ul>
</div>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: html/xml; gutter: false"
style="font-size: 12px;">function setSelectedZoomItem(selectedItenom) {
}</pre>
</div>
</div>
<p>
<span style="font-size: 10.0pt; line-height: 13.0pt;">Where <em>selectItem</em>
is the record selected by the user in the zoom screen.
</span>
</p>
<div class="aui-message warning shadowed information-macro">
<p class="title">Important</p>
<span class="aui-icon icon-warning">Icon</span>
<div class="message-content">
<p>
The same function "setSelectZoomItem" is used to receive the result
of all calls to zoom. Thus, to distinguish each call, the <em>type</em>
parameter was created. This parameter is returned in <em>selectedItem</em> and
can be used to differentiate the calls to zoom.
</p>
</div>
</div>
<p> </p>
<div>
<ul>
<li>To access a field of the selected record:</li>
</ul>
</div>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: html/xml; gutter: false"
style="font-size: 12px;">selectedItem["fieldName"]</pre>
</div>
</div>
<p>
<span style="font-size: 10.0pt; line-height: 13.0pt;">Where <em>fieldName</em>
is the name of the field to return that was defined in the zoom call.
To obtain the record , the Fluig Zoom component was developed to
allow the zoom feature to be used in form definitions.
</span>
</p>
<p> </p>
<p>In order to be able to view and retrieve information from the
"metadata" fields of the form, you must use the following naming
convention:</p>
<div class="table-wrap">
<table class="confluenceTable">
<tbody>
<tr>
<td class="confluenceTd"><p>metadata_id</p></td>
<td class="confluenceTd"><p>Returns the card code</p></td>
</tr>
<tr>
<td class="confluenceTd"><p>medatata_version</p></td>
<td class="confluenceTd"><p>Returns the card version</p></td>
</tr>
<tr>
<td class="confluenceTd"><p>metadata_parent_id</p></td>
<td class="confluenceTd"><p>Returns the Parent folder code</p></td>
</tr>
<tr>
<td class="confluenceTd"><p>metadata_card_index_id</p></td>
<td class="confluenceTd"><p>Returns the card index code</p></td>
</tr>
<tr>
<td class="confluenceTd"><p>metadata_card_index_version</p></td>
<td class="confluenceTd"><p>Returns the card index version</p></td>
</tr>
<tr>
<td class="confluenceTd"><p>metadata_active</p></td>
<td class="confluenceTd"><p>Active version</p></td>
</tr>
</tbody>
</table>
</div>
<p> </p>
<p>
<span style="font-size: 10.0pt; line-height: 13.0pt;">Below is
an example of code used for viewing and recovering these values:</span>
</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: html/xml; gutter: false"
style="font-size: 12px;">function zoomFormulario(titulo, dataset, campos, resultFields, type){
window.open("/webdesk/zoom.jsp?datasetId="+dataset+"&dataFields="+campos+
"&resultFields="+resultFields+"&type="+type+"&title="+titulo, "zoom", "status , scrollbars=no ,width=600, height=350 , top=0 , left=0");
} </pre>
</div>
</div>
<div class="aui-message hint shadowed information-macro">
<span class="aui-icon icon-hint">Icon</span>
<div class="message-content">
<p>The use of PK in filters when using dataset of Group, Role or
User is optional, however the same value used in the zoom URL should
be used to obtain the selected value, as in the example below.</p>
</div>
</div>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: html/xml; gutter: false"
style="font-size: 12px;">function setSelectedZoomItem(selectedItem) {
alert("Grupo: " + selectedItem['groupId'] + " Colaborador: "+ selectedItem['colleagueGroupPK.colleagueId']);
}
 
<input type="button" class="btZoom" onclick="zoomFormulario('title', 'colleagueGroup', 'groupId,Codigo,colleagueGroupPK.colleagueId,Matricula','groupId,colleagueGroupPK.colleagueId', 'nofield');">
 </pre>
</div>
</div>
<p> </p>
<p>
<span style="font-size: 10.0pt; line-height: 13.0pt;">To use
filters, the call is similar to that of </span><em
style="font-size: 10.0pt; line-height: 13.0pt;">dataFields</em><span
style="font-size: 10.0pt; line-height: 13.0pt;">.</span>
</p>
<p>For example:</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: html/xml; gutter: false"
style="font-size: 12px;">window.open("/webdesk/zoom.jsp?datasetId=preCad&dataFields=codigo, Código, descricao, Descrição&resultFields=descricao&type=precad&filterValues=metadata_active, false","zoom" , "status, scrollbars=no, width=600, height=350, top=0, left=0");</pre>
</div>
</div>
<p>In this example, the zoom will return only inactive cards.</p>
<p> </p>
<h3 id="CustomizaçãodeFormulários-ZoomExterno">External Zoom</h3>
<p>In situations where the data of the elements external to Fluig
are too bulky, it is recommended the construction of an external
application to Fluig that will serve as zoom to the user. Below is
described a JavaScript technique where you can call an external
application and the same may return the data requested by the user to
a field in the Fluig form.</p>
<p>
The first step towards implementation of this technique is to create a
logic in JavaScript that will open a new window by calling the
external application that will behave like zoom onto the form. We will
use and explain the command<em> window.open</em> in this example:
</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: html/xml; gutter: false"
style="font-size: 12px;">Window.open(External Application URL, Name of the Window that will open, additional commands)</pre>
</div>
</div>
<p>
<span style="font-size: 10.0pt; line-height: 13.0pt;">Where:</span>
</p>
<ul>
<li>External Application URL Is the url of the external
application that will function as zoom for Fluig. E.g.: <a
href="http://servidor-ecm/applications/forneczoom.asp"
class="external-link" rel="nofollow">http://servidor/applications/forneczoom.asp</a>.
</li>
<li>Window Name: Name of the window that will be used by the
user's browser as an identifier. To avoid overlapping content in the
window, it is recommended that a different name is added for each
zoom called for the same form. E.g.: "ZoomFormec".</li>
<li>Additional Commands: Additional commands used to create the
window that will contain the zoom application. E.g.: “width=230,
height=230”.</li>
</ul>
<div class="aui-message hint shadowed information-macro">
<p class="title">Note</p>
<span class="aui-icon icon-hint">Icon</span>
<div class="message-content">
<p>Due to a browser restriction, the url of the zoom program
external to Fluig must be located in the same domain as Fluig.
Otherwise you will not be able to assign to the form field the value
chosen for the zoom. This problem occurs because browsers prohibit
the practice of cross-domain JavaScript coding.</p>
</div>
</div>
<p> </p>
<p>The code below will schedule a Fluig form containing a field and
a side button that will call an external application window.</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: html/xml; gutter: false"
style="font-size: 12px;"><form name=”FornecedorForm”>
Supplier Code:
<input name=”cod_fornec” size=’10” value=”” type=”text”>
<input value=”lista” onClick=”mostraLista()” type=”button”>
</form>
<script language=”JavaScript”>
Function mostraLista() {
Window.open(“fornecedores.html”, “list”,”width=230,height=230”);
}
</script>       </pre>
</div>
</div>
<p> </p>
<p>The second step is to schedule within the external application a
JavaScript function to return to the form field the value chosen for
the user in the external application. This external application can be
developed on any existing web development technology in the market
that can carry out the execution of JavaScript scripts on the client
side. Following is an example of a JavaScript function that passes the
value to the form field:</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: html/xml; gutter: false"
style="font-size: 12px;"><script language=”JavaScript”>
function escolha(valor) {
// The following line tests whether the fluig form window that opened the zoom window is still open
if (window.opener && !window.opener.close) {
// sets the value for the field
window.opener.document.(form id in Fluig form).(field name).value = value;
}
// Closes the zoom application window
window.close();
}
</script></pre>
</div>
</div>
<p>
<span style="font-size: 10.0pt; line-height: 13.0pt;">Where:</span>
</p>
<ul>
<li>Form id in Fluig form: If any id has been defined for the tag
<em><form></em> in the Fluig form, it should be referenced it in
this command. You can also use the collection reference <em>forms</em>
within the command <em>(forms [position])</em>. <br />E.g.: <em>FornecedorForm,
forms[0]</em>.
</li>
</ul>
<ul>
<li>Field Name: Name of the field that will receive the value
passed to the function. <br />E.g.: <em>cod_fornec</em>.
</li>
<li>Value: Data that will be passed to the Fluig form field.</li>
</ul>
<p> </p>
<p>The following example will set an external zoom made entirely in
HTML with static data only for illustration. The zoom data can come
from any source, whether it is internal or external to Fluig.</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: html/xml; gutter: false"
style="font-size: 12px;"><html>
<head>
<title>List of suppliers</title>
<script language="JavaScript">
function escolha(valor) {
// Opener validity test
if (window.opener && !window.opener.closed) {
// writing the value of the cod_fornec field
window.opener.document.forms[0].cod_fornec.value = valor;
}
window.close();
}
</script>
 
</head>
<body>
<!-- The data below are fixed but could be mounted from any source. -->
<table border="1" cellpadding="5" cellspacing="0">
<tbody><tr bgcolor="#cccccc"><td colspan="2"><b>ECM application example</b></td></tr>
<tr bgcolor="#cccccc"><td><b>Code</b></td><td><b>NASDAQ</b></td></tr>
<tr><td><a href="javascript:escolha('TOTVSv3')">TOTVS</a></td>
<td><a href="javascript:escolha('TOTVSv3')">TOTVSv3</a></td></tr>
<tr><td><a href="javascript:escolha('RM1')">RM</a></td>
<td><a href="javascript:escolha('RM1')">RM1</a></td></tr>
<tr><td><a href="javascript:escolha('DTS3')">Datasul</a></td>
<td><a href="javascript:escolha('dts3')">Dts3</a></td></tr>
<tr><td><a href="javascript:escolha('Lgx2')">Logix</a></td>
<td><a href="javascript:escolha('Lgx2')">Lgx2</a></td></tr>
</tbody>
</table> 
<!-- End-of-data->
</body>
</html></pre>
</div>
</div>
<p>To put the example in practice on the product, simply publish
the definition of the following form informing the external zoom file
as an attachment to the form definition.</p>
<p>
<a href="attachments/75270483/75237520.zip">Zoom.zip Example</a>
</p>
<p>
When you click one of the items in the zoom screen, the JavaScript
function of choice will be called, which will send the value to the <em>cod_fornec</em>
field in the Fluig form.
</p>
<p>
<strong><br /></strong>
</p>
<div>
<h1 id="CustomizaçãodeFormulários-ServiçosdeDados">Data Services</h1>
</div>
<p>Fluig features integration with two types of data services,
namely: Dataset and External Services. Both can be used in all events
available for customization of form definition.</p>
<h3 id="CustomizaçãodeFormulários-Dataset">Dataset</h3>
<p>It is a data service that provides access to information,
regardless of the data source. Fluig provides internal Datasets that
enable access to entities, such as Users, User Groups, among others.
See the Fluig Dataset registration to obtain the complete list of
available Datasets and their respective fields.</p>
<div class="aui-message hint shadowed information-macro">
<p class="title">Note</p>
<span class="aui-icon icon-hint">Icon</span>
<div class="message-content">
<p>The examples below use the getDatasetValues function,
available only to the entity and form definition Datasets (when the
number of the form definition is provided). Refer to the Dataset
Customization Reference Guide to learn about how to use customized
Datasets.</p>
</div>
</div>
<p> </p>
<p>
In getDatasetValues function, NOT all field values are returned for
safety reasons. To obtain all the data, DatasetFactory is used,
exemplified in <a href="73083770.html">Dataset Customization</a>.
</p>
<p>
For example, to access the Dataset of Fluig users in the <em>displayFields</em>
event of a form definition:
</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: html/xml; gutter: false"
style="font-size: 12px;">function displayFields(form,customHTML) {
// Getting the user via dataset
filter = new java.util.HashMap();
filter.put("colleaguePK.colleagueId","adm");
usuario = getDatasetValues('colleague',filter);
form.setValue('RNC_colab_abertura',usuario.get(0).get("colleagueId"));
}</pre>
</div>
</div>
<p>
<span style="font-size: 10.0pt; line-height: 13.0pt;"><br /></span>
</p>
<p>
<span style="font-size: 10.0pt; line-height: 13.0pt;">It is
also possible to call the Datasets within the form definition through
JavaScript functions.</span>
</p>
<p> </p>
<p>Access to Datasets can also be performed directly in the form of
the form definition. For example, to access the user’s Dataset and
enter the values in the HTML fields:</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: html/xml; gutter: false"
style="font-size: 12px;"> <html>
<head>
<title>
Teste XMLRPC
</title>
<script language="javascript">
function init(){
var filter = new Object();
filter["colleaguePK.colleagueId"] = "adm";
var colleagues = getDatasetValues("colleague", filter);
if(colleagues.length > 0){
document.getElementById("colleagueName").value = colleagues[0].colleagueName;
document.getElementById("colleagueId").value = colleagues[0].colleagueId;
document.getElementById("login").value = colleagues[0].login;
document.getElementById("extensionNr").value = colleagues[0].extensionNr;
document.getElementById("groupId").value = colleagues[0].groupId;
document.getElementById("mail").value = colleagues[0].mail;
}else{
alert("No User Found");
}
}
</script>
</head>
<script src="../vcXMLRPC.js"></script>
<body onload="init()">
<form id="form1">
<b> User Name: </b>
<input type="text" name="colleagueName" id="colleagueName" />
<br><br>
<b> User Registration: </b>
<input type="text" name="colleagueId" id="colleagueId" />
<br><br>
<b>User Login:</b>
<input type="text" name="login" id="login" />
<br><br>  
<b> User Extension: </b>
<input type="text" name="extensionNr" id="extensionNr" />
<br><br>
<b> User Group: </b>
<input type="text" name="groupId" id="groupId" />
<br><br>
<b> User Email: </b>
<input type="text" name="mail" id="mail" />
<br><br>
</form>
</body>
</html></pre>
</div>
</div>
<p> </p>
<p>The Dataset for form definition uses the same call from the
entity Dataset, as in the case of the user. However, instead of
passing the name of the Dataset as a parameter, we will pass the
number of the form definition. For example:</p>
<p> </p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: html/xml; gutter: false"
style="font-size: 12px;">function displayFields(form,customHTML) {
// Getting the user via dataset
filter = new java.util.HashMap();
filter.put("RNC_nr_solicitacao",new java.lang.Integer(20));
fichas = getDatasetValues(Number(676),filter);
log.info("Usuário de Abertura: "+ fichas.get(0).get("RNC_colab_abertura"));
}</pre>
</div>
</div>
<p> </p>
<p>
<em>Download of example of Form Combobox and Dataset:</em> <a
href="attachments/75270483/75237528.html">form.html</a><em>.</em>
</p>
<p> </p>
<h3 id="CustomizaçãodeFormulários-DataService">DataService</h3>
<p>It is a data service that allows access to third-party
applications through Fluig. This data service supports two types of
connections, namely: AppServer of Progress® and Web Services.</p>
<p>Data services are registered and configured from the Service
View function of Fluig Studio.</p>
<p>
For more information about the registration of services, refer
to: <a href="73082260.html">Integration with External
Applications</a> And for information on the use of services in events,
refer to: <a href="73082818.html">Workflow Customization</a>.
</p>
<p>
<strong><br /></strong>
</p>
<div>
<h1 id="CustomizaçãodeFormulários-PaiFilho">Parent Child</h1>
</div>
<p>
The Parent X Child technique has been modified and now the position of
the tag <em>tablename</em> is within the "table" tag in the html code.
</p>
<p>In the new implemented model, the card index parser will apply
the parent child changes as follows:</p>
<p>
<strong><table tablename="teste"></strong> - The <em>tablename</em>
property determines that Now below this table a parent child system
will be implemented within the form definition. The <table> tag
will have its parameters scanned in search of other parameters related
to the technique that will be explained later in this text. Another
<table> will be created around the main table which will contain a
button that allows you to add new children. This does not occur only
in cases where the property <em>noaddbutton</em> is also provided
along with the property <em>tablename</em>.<span
style="font-size: 10.0pt; line-height: 13.0pt;">   
                   
                   
                   
                   
                </span>
</p>
<p>
<strong><TR></strong> (first below the table) - The first
<TR> tag found within the table is viewed as a tag that will
contain the labels from the parent child table A <TD> column will
be added to this tag containing the icon and the function of
eliminating existing children in the screen. This new column is the
first column on the left of the table.
</p>
<p>
<strong><TR></strong> (Second below the table) - The parent
child technique will hide the original <TR> line and transform it
in its "master template" for creating the children of that table. Each
time the button "new" is clicked, the entire set of existing fields
within that second <TR> will be replicated in the screen with the
initial data defined for these fields.
</p>
<p>
<strong></table></strong>  - End of the scope of the
technique.
</p>
<p> </p>
<p>The technique also supports new attributes that can be passed or
used to customize the parent and child technique. They are:</p>
<p>
<strong>noaddbutton</strong> - Removes the "add" button from the
screen when the form is edited. This allows the developer to choose
where he will place the function that will create the children in the
screen, and can tie the function call to a text link or a figure, or
to another html object.
</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: html/xml; gutter: false"
style="font-size: 12px;"><table tablename="teste" noaddbutton=true></pre>
</div>
</div>
<p>
<strong><br /></strong>
</p>
<p>
<strong>nodeletebutton</strong> - Removes the button "bin" from the
screen when editing the card. This allows the developer to prevent the
deletion of records or define another way of executing the function
that will remove the children from the table.
</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: html/xml; gutter: false"
style="font-size: 12px;"> <table tablename="teste" nodeletebutton=true></pre>
</div>
</div>
<p>
<strong><br /></strong>
</p>
<p>
<strong>addbuttonlabel</strong> - Determines what text will be put in
the button to add children of the technique. If it is not provided,
the button will come with the default text (new).<span
style="font-size: 10.0pt; line-height: 13.0pt;">   
                   
            </span>
</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: html/xml; gutter: false"
style="font-size: 12px;"> <table tablename="test" addbuttonlabel="Add new ingredient"></pre>
</div>
</div>
<p>                         </p>
<p>
<strong>addbuttonclass </strong>- Allows you to define which css class
will be used by the button. This css class should be available in the
html document in the card index.
</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: html/xml; gutter: false"
style="font-size: 12px;"> <table tablename="test" addbuttonclass="wdkbuttonClass"></pre>
</div>
</div>
<p>
<strong><br /></strong>
</p>
<p>
<strong>deleteicon</strong> - Allows you to determine what will be the
image that will serve as the child deletion icon in the screen. This
image should be an annex to the form definition and should be provided
in the class as any image used as attachment in the form definition.
</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: html/xml; gutter: false"
style="font-size: 12px;"><table tablename="test" deleteicon="teste.jpg"> </pre>
</div>
</div>
<p>
<strong><strong><br /></strong></strong>
</p>
<p>
<strong><strong>customFnDelete</strong> - </strong>Allows
customization of the function that is called when you click the button
that deletes a child of the table. The custom function must be
available in the html document of the form definition and must call
the default function.<strong><br /></strong>
</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: html/xml; gutter: false"
style="font-size: 12px;"><table tablename="test" customFnDelete="fnCustomDelete(this)">
function fnCustomDelete(oElement){
//Customization
alert ("Deleting child!");
// Default function called, DO NOT REMOVE
fnWdkRemoveChild(oElement);
//Customization
alert ("Child deleted!");
}</pre>
</div>
</div>
<p> </p>
<p>
You can use the combination of one or more attributes in the same
parent child table. However, if the <em>noaddbutton</em> property is
used, the values of the properties <em>addbuttonlabel</em> and <em>addbuttonclass</em>
will be ignored. An error message will not be generated in the post or
versioning of this form definition. However, when the form is edited,
it will not present the default button that allows you to register new
children in the form definition. The <em>deleteicon</em> property is
not affected by the property <em>noaddbutton</em>. Example of combined
use of parameters:
</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: html/xml; gutter: false"
style="font-size: 12px;"><table tablename="teste" addbuttonlabel="Add new ingredient" addbuttonclass="wdkbuttonClass" deleteicon="teste.jpg"></pre>
</div>
</div>
<div class="aui-message warning shadowed information-macro">
<span class="aui-icon icon-warning">Icon</span>
<div class="message-content">
<ul>
<li>The Parent Child 2.0 technique is not backward compatible
with the first implementation. Form definitions that were made with
the first technique should be reworked to use this new technique.</li>
</ul>
<ul>
<li><p>
The Parent Child 2.0 technique does not accept all html
components, but accepts the main ones. The types of components
approved by the product are: <em>text, radio button,
checkbox, select, select multiple, hidden, textarea, image </em>and<em> button.
</em><em style="font-size: 10.0pt; line-height: 13.0pt;">Download
of Parent x Child Form example: <a
href="attachments/75270483/75237527.htm">form.htm</a>.
</em>
</p></li>
<li><p>
<span style="font-size: 10.0pt; line-height: 13.0pt;">Fields
of a parent and child table are not available to be used as
description of the cards in the form configuration.</span>
</p></li>
</ul>
</div>
</div>
<p>
<strong><br /></strong>
</p>
<p>
<strong><br /></strong>
</p>
<h3 id="CustomizaçãodeFormulários-PaiFilhoRadioButton">Parent
Child Radio Button</h3>
<p>In order to use radio button fields, in addition to the standard
definition of the html component, you must use the 'value' attribute
for the data to be saved correctly.</p>
<p>
<strong><br /></strong>
</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: html/xml; gutter: false"
style="font-size: 12px;"><table border="1" tablename="test" addbuttonlabel="Add Child" nodeletebutton="true">
<thead>
<tr>
<td><b>Name</b></td>
<td><b>Age</b></td>
<td><b><font face = "arial" size=5 color ="blue">Yes:</b></td>
<td><b><font face = "arial" size=5 color ="blue">No:</b></td>
</tr>
</thead>
<tr>
<td><input type="text" name="nomefilho"></td>
<td><input type="text" name="idadefilho"></td>
<td><input type="radio" name="nameradiofilho" id = "idsimfilho" value="ant_yes"></td>
<td><input type="radio" name="nameradiofilho" id = "idnaofilho" value="ant_no"></td>
</tr>
</table></pre>
</div>
</div>
<p> </p>
<div>
<h3 id="CustomizaçãodeFormulários-EventosdeFormulárioPaiFilho">Parent
Child Form Events</h3>
<p>
To facilitate data handling in a customized form that makes use of
the technique Parent Child, the following methods are provided. Both
are called from the <em>form</em> object that is passed as
a parameter in the form customization functions.
</p>
<p>
<span style="color: rgb(0, 51, 102);"> </span>
</p>
<h6 id="CustomizaçãodeFormulários-getChildrenFromTable">getChildrenFromTable</h6>
<p>
This event returns a map with all the child fields of a Parent Child
from its <em>tablename</em>.
</p>
<p>
<span style="color: rgb(0, 51, 102);"> </span>
</p>
<h6 id="CustomizaçãodeFormulários-getChildrenIndexes">getChildrenIndexes</h6>
<p>
This event returns the indexes of the records (rows) contained in a
Parent Child from its <em>tablename</em>.
</p>
<p>
<span style="color: rgb(0, 51, 102);"> </span>
</p>
<p>Example:</p>
<div class="syntaxhighlighter nogutter javascript">
<p> </p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Eclipse; brush: java; gutter: false"
style="font-size: 12px;">function validateForm(form){
var indexes = form.getChildrenIndexes("tabledetailname");
var total = 0;
for (var i = 0; i < indexes.length; i++) {
var fieldValue = parseInt(form.getValue("valor___" + indexes[i]));
if (isNaN(fieldValue)){
fieldValue = 0;
}
total = total + fieldValue;
log.info(total);
}
log.info(total);
if (total < 100) {
throw "Request Total Value cannot be less than 100";
}
}
</pre>
</div>
</div>
<p> </p>
</div>
<p> </p>
<h1 id="CustomizaçãodeFormulários-Formuláriosparadispositivosmóveis">Forms
for mobile devices</h1>
</div>
<p>With the addition of forms that support the view in mobile
devices, you can move Workflow requests through these devices and fill
in the HTML form definition information, ensuring greater mobility and
agility to perform workflow request movements.</p>
<p>To include a new card index with support from mobile devices,
perform the standard procedure to export the form definition and
select the fields that will compose the mobile form in the screen
before the conclusion of the export. After the export, another HTML
file will be added and it will be marked as "mobile" in the forms
folder of the Fluig project. </p>
<p>The following image shows the mobile selection screen at the
export of a form definition:</p>
<p>
<img class="confluence-embedded-image image-center"
src="attachments/75270483/75237525.png"
data-image-src="attachments/75270483/75237525.png">
</p>
<p style="text-align: center;">
<strong>Figure 15 - Mobile form definition.</strong>
</p>
<p> </p>
<p>After being exported, the form must be as follows:</p>
<p>
<img class="confluence-embedded-image image-center"
src="attachments/75270483/75237524.png"
data-image-src="attachments/75270483/75237524.png">
</p>
<p style="text-align: center;">
<strong style="text-align: center;">Figure 16 - Mobile form
result.</strong>
</p>
<p style="text-align: left;"> </p>
<h3 id="CustomizaçãodeFormulários-PaiFilhoparadispositivosmóveis">Parent
Child pages for mobile devices</h3>
<p>The fields that employ the parent and child technique are not
inserted into the form generated automatically for mobile devices by
Fluig. However, the product allows you to develop a customized form
for mobile devices by querying these fields.</p>
<div class="aui-message warning shadowed information-macro">
<span class="aui-icon icon-warning">Icon</span>
<div class="message-content">It is not possible to edit parent
and child fields through mobile devices, even in customized forms.
Only query.</div>
</div>
<p> </p>
<p>
The query to parent and child fields on mobile devices is performed by
means of javaScript functions available within the <strong>masterList</strong>
object when the form is displayed. They are:
</p>
<h4 id="CustomizaçãodeFormulários-getValue">getValue</h4>
<p>
<span style="color: rgb(51, 51, 51);">Returns a string with the
value of a parent and child field, receiving as parameters the
sequence number of the child, and the name of the field.</span>
</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: javascript; gutter: false"
style="font-size: 12px;">masterList.getValue(sequence,field);</pre>
</div>
</div>
<p>
<span style="color: rgb(0, 0, 0);"><br /></span>
</p>
<h4 id="CustomizaçãodeFormulários-getValues">getValues</h4>
<p>Returns an object with all the values of the parent and child
fields, grouped by the sequence number. This method has no parameters.</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: javascript; gutter: false"
style="font-size: 12px;">masterList.getValues ();</pre>
</div>
</div>
<p> </p>
<h4 id="CustomizaçãodeFormulários-getValuesBySequence">getValuesBySequence</h4>
<p>Returns an object with all the values of the fields of a given
sequence. Receives the sequence number as parameter.</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: javascript; gutter: false"
style="font-size: 12px;">masterList.getValuesBySequence(sequence);</pre>
</div>
</div>
<p>
<span style="font-size: 1.2em;"><br /></span>
</p>
<h4 id="CustomizaçãodeFormulários-getValuesByField">
<span>getValuesByField</span>
</h4>
<p>Returns all the sequences and values of a given field. Receives
the name of the field as parameter.</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: xml; gutter: false"
style="font-size: 12px;">masterList.getValuesByField(field);</pre>
</div>
</div>
<p> </p>
<p>
Examples: <a href="attachments/75270483/144081017.zip">Parent
Child Forms + Events</a> 
</p>
<div>
<h1 id="CustomizaçãodeFormulários-Traduçãodeformulários">Translation
of forms</h1>
</div>
<p>To translate forms, you need to use the function i18n.translate
("literal_da_tradução") in the sections of the HTML file that should
be translated, as in the following example:</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: html/xml; gutter: false"
style="font-size: 12px;"><label>i18n.translate("nm_cliente")</label>
<input name=”nm_cliente”>
<br>
<label>i18n.translate("contato_cliente")</label>
<input name=”contato_cliente”></pre>
</div>
</div>
<p> </p>
<p> </p>
<div class="aui-message hint shadowed information-macro">
<span class="aui-icon icon-hint">Icon</span>
<div class="message-content">
The literals and their corresponding values are provided in property
files with the extension .properties for each desired language. The
languages supported for translation are the same supported by Fluig:<br />
<ul>
<li>Portuguese (pt_BR);</li>
<li>English (en_US);</li>
<li>Spanish (es).</li>
</ul>
</div>
</div>
<p> </p>
<p>The files containing the literals have the following naming
convention:</p>
<ul>
<li><strong>Portuguese:</strong>
nome_do_formulario_pt_BR.properties;</li>
<li><strong>English:</strong> form_name_en_US.properties;</li>
<li><strong>Spanish: </strong>nome_do_formulario_es.properties.</li>
</ul>
<p style="text-align: left;"> </p>
<p style="text-align: left;">The property files are created
according to the steps below:</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="1" class="deck-card active-pane" style="" cssclass=""
accesskey="" label="Passo1" title="" nextafter="0"
effecttype="default" effectduration="-1.0">
<p> </p>
<ul>
<li><p>
To generate the property files in <em>Package Explorer</em>, you
should access the form’s HTML file to be translated, right click
it and access the option <em>Externalize Strings</em>.
</p></li>
</ul>
<p>
<img class="confluence-embedded-image image-center"
src="attachments/75270483/142934302.png"
data-image-src="attachments/75270483/142934302.png">
</p>
<p style="text-align: center;">
<strong>Figure 1 - Context Menu to Externalize Strings.</strong>
</p>
<p> </p>
</div>
<div id="2" class="deck-card " style="" cssclass="" accesskey=""
label="Passo 2" title="" nextafter="0" effecttype="default"
effectduration="-1.0">
<p> </p>
<div>
<ul>
<li><p>The files containing the literals are created in
the form folder.</p></li>
</ul>
<p>
<img class="confluence-embedded-image image-center"
src="attachments/75270483/142934303.png"
data-image-src="attachments/75270483/142934303.png">
</p>
<p style="text-align: center;">
<strong style="text-align: center;">Figure 2 - Property
Files in the Form Folder.</strong>
</p>
<p>
<strong><br /></strong>
</p>
</div>
</div>
<div id="3" class="deck-card " style="" cssclass="" accesskey=""
label="Passo 3" title="" nextafter="0" effecttype="default"
effectduration="-1.0">
<p> </p>
<ul>
<li><p>Provide the values corresponding to the literals to
the language of each file.</p></li>
</ul>
<p>
<img class="confluence-embedded-image image-center" width="900"
src="attachments/75270483/142934304.png"
data-image-src="attachments/75270483/142934304.png">
</p>
<p style="text-align: center;">
<strong style="text-align: center;">Figure 3 - Editing a
Property File.</strong>
</p>
<p style="text-align: center;">
<strong><br /></strong>
</p>
</div>
</div>
</div>
<!-- // .deck -->
<p>
When you export a form to Fluig, the property files containing the
literals are published as attachments.<br />The form is presented in
the language configured for the current user.
</p>
<p> </p>
<p> </p>
<div>
<h1 id="CustomizaçãodeFormulários-ThirdPartyTrademarks">Third-Party
Trademarks</h1>
</div>
<p>Adobe, Flash, Flex, Flex Builder, PostScript and Reader are
either registered trademarks or trademarks of Adobe Systems
Incorporated in the United States and/or other countries.</p>
<p>Apache is a trademark of The Apache Software Foundation.</p>
<p>Apple is a trademark of Apple Inc., registered in the U.S. and
other countries.</p>
<p>Firefox and Mozilla are registered trademarks of the Mozilla
Foundation.</p>
<p>Google, Android and Google Chrome are trademarks of the Google
Inc.</p>
<p>IOS is a trademark or registered trademark of Cisco in the U.S.
and other countries and is used under license.</p>
<p>JavaScript is a trademark of Oracle Corporation.</p>
<p>Linux® is the registered trademark of Linus Torvalds in the U.S.
and other countries.</p>
<p>Microsoft, Active Directory, Excel, Internet Explorer, Outlook,
PowerPoint, SQL Server, Windows and Windows Vista are either
registered trademarks or trademarks of Microsoft Corporation in the
United States and/or other countries.</p>
<p>MySQL is a trademark of Oracle Corporation and/or its
affiliates.</p>
<p>Oracle, Java and OpenOffice.org are registered trademarks of
Oracle and/or its affiliates. Other names may be trademarks of their
respective owners.</p>
<p>Progress and OpenEdge are trademarks or registered trademarks of
Progress Software Corporation or one of its subsidiaries or affiliates
in the U.S. and other countries.</p>
<p>Red Hat and JBoss are registered trademarks of Red Hat, Inc. in
the United States and other countries.</p>
<p>Any other third party trademarks are the property of their
respective owners.</p>
<p> </p>
</div>
|
<!DOCTYPE>, Ex: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
These statements may affect some features of the definition of the form or of the Workflow when using Microsoft® Internet Explorer® browser.
FormController
formController is the object that performs the communication between the form and the event customization. This object is available in each of the form customization events
through the form variable. The variable allows you to change the field values of a form record and also get their editing status, for example: if the
user is viewing or editing the form record. The following are the available methods for the form variable:
| |
|---|
| long getCompanyId() | Returns the company ID |
| int getDocumentId() | Returns the document ID (form record) |
| int getVersion() | Returns the document version (form record) |
| int getCardIndex() | Returns the form ID. |
| String getValue(String fieldName) | Gets the value of a form field |
| void setValue(String fieldName, String fieldValue) | Defines the value of a form field |
| boolean getEnabled(String fieldName) | Checks whether a field is enabled |
| void setEnabled(String fieldName, boolean enabled) | Defines whether or not a field should be enabled |
| String getFormMode() | Gets the form editing mode, and can return the following values:
ADD: Creation of the form MOD: Form being edited VIEW: Form view NONE: No communication with the form. For example, it occurs at the moment form fields are being validated, where it is not being displayed. |
| void setHidePrintLink(boolean hide) | When set as true, it disables the form print button. |
| boolean isHidePrintLink() | Checks whether the print button is disabled. |
| Map<String, String> getChildrenFromTable(String tableName) | Returns a map containing the names and values of the child fields of a parent table. |
| void setHideDeleteButton(boolean hide) | When set as true, it disables the button to delete records in a parent-child form. |
| boolean isHideDeleteButton() | Checks whether the deletion of child records is disabled. |
| boolean getMobile() | Checks whether the form record is being accessed through a mobile device. |
The customization of form definition is accomplished by creating scripts in the JavaScript scripting language. The implementation code of each script is stored in a database and does not require the use of any other files, such as "plugin.p".
The customization events for form definition are created from Fluig Studio. To post a form, follow the steps according to the example below:
| Deck of Cards |
|---|
| effectDuration | 0.5 |
|---|
| id | samples |
|---|
| history | false |
|---|
| effectType | fade |
|---|
|
| Card |
|---|
| default | true |
|---|
| id | 1 |
|---|
| label | Step 1 |
|---|
| To create a form definition, go to the Package Explorer view and access the forms folder of the Fluig project, right click, and access New > Form Definition from the menu.
 Image Added
Figure 1 - New Form Definition. |
| Card |
|---|
| Image Added Figure 2 - New Form Definition.
|
| Card |
|---|
| Image Added Figure 3 - New Form Definition.
|
| Card |
|---|
| Image Added Figure 4 - New Form Definition. |
|
After creating a form definition, you can create scripts for customization. Form events are created through the following steps:
| Deck of Cards |
|---|
| effectDuration | 0.5 |
|---|
| id | samples |
|---|
| history | false |
|---|
| effectType | fade |
|---|
|
| Card |
|---|
| default | true |
|---|
| id | 1 |
|---|
| label | Step 1 |
|---|
| To create a form script in Fluig, go to the Package Explorer view and access the forms folder of the Fluig project, right click, and access New > Other from the menu.
Image Added Figure 5 – Creating a form definition event script. |
| Card |
|---|
| Image Added Figure 6 – Creating a form definition event script.
|
| Card |
|---|
| Image Added Figure 7 – Creating a form definition event script.
|
| Card |
|---|
| Image Added Figure 8 – Creating a form definition event script. |
| Card |
|---|
| Image Added Figure 9 – Creating a form definition event script. |
| Card |
|---|
| The event used as example -validateForm, validates the completion of request and user fields. The formController object was used to check the value of the fields, through the syntax 'form.getValue ("fieldname")'. When you export the form definition, the events pertinent to these will also be exported to the Fluig server.
Image Added Figure 10 – Creating a form definition event script. |
|
All events of the form definition receive the reference to the form. Through this reference, you can access the form fields, access/define the value of a field, and access/define the field presentation state. The details of each event are presented in the following sections of this document.
Fluig can use the execution log in the customization events. Through the global variable log, you can get feedback of the execution of each event. There are four log levels, namely:
- error: presentation of errors.
- debug: debug execution.
- warn: inform possible execution issues.
- info: presentation of messages.
The presentation of each log type is conditioned to the application server configuration. For example, in JBoss®, by default info and warn messages are displayed on the server console, and debug and error messages are displayed in the log file. Following is an example of the use of log in script:
| Bloco de código |
|---|
|
log.info(“Testando o log info”); |
At the server console we would see the message "Testing the log info".
Is it possible to know the form editing status via the form variable passed as a parameter to the form definition events. To access the edit status:
| Bloco de código |
|---|
|
form.getFormMode() |
Calling the function form.getFormMode() will return a string with the form editing mode. The following values exist for the form editing mode:
- ADD: indicating addition mode.
- MOD: indicating editing mode.
- VIEW: indicating view mode.
- NONE: indicating that there is no communication with the form. For example, it occurs at the moment form fields are being validated, where it is not being displayed.
Following are the details of events available for the customization of a form definition in Fluig.
AfterProcessing
This is the last event to be triggered for the card index. As a parameter, the event receives a reference to the form definition form.
Example:
| Bloco de código |
|---|
|
function afterProcessing(form){
} |
In the context of this event, the form variable can only be used to query the fields of the form definition, their values and presentation status.
AfterSaveNew
This event is triggered after the creation of a new form. As a parameter, the event receives a reference to the form definition form.
To get the value of a particular field of the form:
| Bloco de código |
|---|
|
form.getValue("nome-do-campo") |
Example:
| Bloco de código |
|---|
|
function afterSaveNew(form) {
log.info("Colaborador de abertura: " + form.getValue("RNC_colab_abertura"));
} |
The query to form fields is case insensitive. In the example above, we could get the field value using rnc_colab_abertura.
BeforeProcessing
This event is the first to be triggered. It occurs before any other form definition event. As a parameter, the event receives a reference to the form definition form.
Example:
| Bloco de código |
|---|
|
function beforeProcessing(form){
} |
In the context of this event, the form variable can only be used to query the fields of the form definition, their values and presentation status.
DisplayFields
This event is triggered when the form objects are presented. The event receives as a parameter a reference to the form definition form and the reference for the form presentation output.
In this event, you can change the values to be presented in the form field. To do this, simply use the following procedure:
| Bloco de código |
|---|
|
form.setValue(“nome-do-campo”, “valor”); |
Example:
| Bloco de código |
|---|
|
function displayFields(form, customHTML) {
if ( form.getFormMode() == “MOD” ) {
form.setValue('RNC_colab_abertura', new java.lang.Integer(1));
}
} |
Still in the DisplayFields event, you can use three methods independently or jointly to change the way the form rendering appears, delete lines of a child card index and hide the buttons "Print" and "Print in new Window".
To view the form in its original format with the disabled fields, you must use the method setShowDisabledFields.
To enable or disable the delete button on the lines of the child card index, which by default is enabled, you must use the method setHideDeleteButton.
To hide the buttons Print and Print in new window, you must use the setHidePrintLink method.
View example without using the methods:
Image Added
Figure 11 – Example without using the methods.
Example using the methods setShowDisabledFields and setHidePrintLink:
| Bloco de código |
|---|
|
function displayFields(form, customHTML) {
form.setShowDisabledFields(true);
form.setHidePrintLink(true);
} |
Image Added
Figure 12 – Example using the methods.
View example without using the method setHideDeleteButton:
Image Added
Figure 13 – Example without using the method.
Example using the method setHideDeleteButton:
| Bloco de código |
|---|
|
function displayFields(form, customHTML) {
form.setHideDeleteButton(false);
} |
Image Added
Figura 14 - Exemplo de utilização dos métodos.
It is important to note that this event is the only one that allows changing the values to be presented in form fields before rendering it.
Below is an example using the form presentation output:
| Bloco de código |
|---|
|
if(form.getFormMode() != "VIEW") {
customHTML.append("<script>");
customHTML.append("function MostraEscondeBtn_zoom()");
customHTML.append("{");
customHTML.append("document.getElementById(\'zoomUsuario\').className = \'show\';");
customHTML.append("document.getElementById(\'zoomModulo\').className = \'show\';");
customHTML.append("}");
customHTML.append("</script>");
} |
EnableFields
This event is triggered when the form objects are enabled, allowing you to disable some fields, if needed. The event receives as a parameter a reference to the form definition form.
To enable or disable a form field, run the following procedure:
| Bloco de código |
|---|
|
form.setEnabled("nome-do-campo",true/false) |
Where "true" enables the field and "false" disables the field.
Example:
| Bloco de código |
|---|
|
function enableFields(form) {
if ( form.getFormMode() != 'ADD' ){
form.setEnabled("rnc_area",false);
form. setEnabled("rnc_tipo_ocorrencia",false);
}
} |
Please note that the event occurs at the moment of rendering the form, and it is the only one that allows you to change the presentation status of the form fields.
Another way to disable the fields is using JavaScript commands implemented directly into the form functions. However, in this case, you are not allowed to use thedisabled property, because the fields will not be saved when you save the card. For this situation, you must use the readonly property, as in the example below:
| Bloco de código |
|---|
|
document.forms['nomeForm'].nomeCampo.setAttribute('readonly',true); |
InputFields
This event is triggered when the form data is passed to the BO responsible for Fluig form. The event receives as a parameter a reference to the form definition form. Example:
| Bloco de código |
|---|
|
function inputFields(form){
} |
SetEnable
This event can be executed in different form definition events. This event is not implemented automatically in the customization of the form definition.
Example:
| Bloco de código |
|---|
|
function setEnable() {
log.info(“Teste de chamada de função”);
}
function displayFields(form, customHTML) {
setEnable();
} |
ValidateForm
This event is executed before writing the form data in the database. The event receives as a parameter a reference to the form definition form. In case of validation errors of form data, this event will return an error message.
Example:
| Bloco de código |
|---|
|
function validateForm(form) {
if (form.getValue('RNC_colab_abertura') == null){
throw "O colaborador de abertura não foi informado";
}
} |
In this chapter we will learn how to interact with some types of form controls that have special features, such as filling in the contents of a ComboBox using Datasets.
By default, Fluig imports the jQuery JavaScript library to all forms, except in cases where the form already does so. In these cases, Fluig will identify that jQuery is already defined and will not import it again. If the form uses another library that can conflict with jQuery, you must define in the form the javascript variable fluigjQuery with a false value, so that Fluig will no longer import it. However, some other features will also be disabled, such as the mask of Fluig fields.
Many fields in a form have a specific format to its content, such as dates, ZIP CODE, social security number, among others.
To assist the developer of forms, Fluig allows to enable masks by field, by providing the "mask" attribute and the mask you want for input objects of type text.
| Bloco de código |
|---|
| language | javascript |
|---|
| title | Exemplo de utilização de máscaras |
|---|
|
<input name="cep" type="text" mask="00000-000"> |
To elaborate the mask, you can use:
| |
|---|
| 0 | Only Numbers. |
| 9 | Only numbers plus optional. |
| # | Only numbers plus recursive. |
| A | Numbers or letters. |
| S | Only letters from A-Z and a-z. |
| Bloco de código |
|---|
| language | javascript |
|---|
| title | Outros exemplos de utilização de máscaras |
|---|
|
Data: "00/00/0000"
Horário: "00:00:00"
Data e Hora: "00/00/0000 00:00:00"
CEP: "00000-000"
Telefone: "0000-0000"
Telefone(ddd): "(00) 0000-0000"
Telefone(ddd + 9ºdígitos): "(00) 90000-0000"
Placa de carro: "SSS 0000"
CPF: "000.000.000-00"
CNPJ: "00.000.000/0000-00"
IP: "099.099.099.099"
porcentagem: "#00.000,00%"
Valor: "#00.000.000.000.000,00" |
| Nota |
|---|
If the import of the jQuery library is disabled through the fluigjQuery variable, the mask feature will also be disabled. |
ComboBox
It is often necessary to populate a ComboBox in a form with a certain group of values.
In Fluig, this is possible through the use of Datasets. Datasets are standard data services offered by Fluig, such as the product "Volumes" service.
To enable the Dataset in the ComboBox, simply use the following construction:
| Bloco de código |
|---|
|
<select name="RNC_volume" id="RNC_volume" dataset="nome-dataset" datasetkey="chave" datasetvalue="valor" addBlankLine=”false”></select> |
Where:
- dataset is the Dataset name.
- datasetkey is the record key.
- datasetvalue is the value of a particular record field.
- addBlankLine is what defines whether the first row of the combo will be a blank value.
Example:
| Bloco de código |
|---|
|
<select name="RNC_volume" id="RNC_volume" dataset="destinationVolume" datasetkey="volumeID" datasetvalue="volumeDescription"></select> |
In the above example we are listing in a ComboBox all the Volumes registered in Fluig.
If you need to order the data coming from an internal dataset, we indicate the creation of a customized dataset that runs inside and orders the data before feeding the combobox component.
To use a ComboBox with only one option, you should not use special characters and spaces in the value of the option tag.
Examples:
| Bloco de código |
|---|
|
<select>
<option value="te">Teste</option>
</select> |
| Bloco de código |
|---|
|
<select>
<option value="te te te">Teste</option>
</select> |
Zoom
Allows querying entities and other forms created in Fluig so the user can select data.
Access to this component is conducted from a Javascript call in the HTML of the form definition.
| Bloco de código |
|---|
|
"/webdesk/zoom.jsp?datasetId="+dataset+"&dataFields="+campos+"&resultFields="+resultFields+"$type="+"&title="+titulo |
Where:
- title: is the title for the zoom window.
- datasetId: is the name of the dataset (Built-in, CardIndex or Customized).
- dataFields: are the names of the fields to be displayed.
- resultFields: are fields that should be returned to the record selected by the user.
- likeField: the name of the field to filter data (if required).
- likeValue: the value to be used in the data filter (if required).
PLEASE NOTE: This parameter is only valid for internal datasets. Customized Datasets do not allow the use of filters.
- To get the record selected by the user, we should add the following JavaScript function to the process form:
| Bloco de código |
|---|
|
function setSelectedZoomItem(selectedItem) {
} |
Where selectItem is the record selected by the user in the zoom screen.
| Nota |
|---|
|
The same function "setSelectZoomItem" is used to receive the result of all calls to zoom. Thus, to distinguish each call, the type parameter was created. This parameter is returned in selectedItem and can be used to differentiate the calls to zoom. |
- To access a field of the selected record:
| Bloco de código |
|---|
|
selectedItem["fieldName"] |
Where fieldName is the name of the field to return that was defined in the zoom call. To obtain the record , the Fluig Zoom component was developed to allow the zoom feature to be used in form definitions.
In order to be able to view and retrieve information from the "metadata" fields of the form, you must use the following naming convention:
metadata_id | Returns the card code |
medatata_version | Returns the card version |
metadata_parent_id | Returns the Parent folder code |
metadata_card_index_id | Returns the card index code |
metadata_card_index_version | Returns the card index version |
metadata_active | Active version |
Below is an example of code used for viewing and recovering these values:
| Bloco de código |
|---|
|
function zoomFormulario(titulo, dataset, campos, resultFields, type){
window.open("/webdesk/zoom.jsp?datasetId="+dataset+"&dataFields="+campos+
"&resultFields="+resultFields+"&type="+type+"&title="+titulo, "zoom", "status , scrollbars=no ,width=600, height=350 , top=0 , left=0");
} |
| Informações |
|---|
The use of PK in filters when using dataset of Group, Role or User is optional, however the same value used in the zoom URL should be used to obtain the selected value, as in the example below. |
| Bloco de código |
|---|
|
function setSelectedZoomItem(selectedItem) {
alert("Grupo: " + selectedItem['groupId'] + " Colaborador: "+ selectedItem['colleagueGroupPK.colleagueId']);
}
<input type="button" class="btZoom" onclick="zoomFormulario('title', 'colleagueGroup', 'groupId,Codigo,colleagueGroupPK.colleagueId,Matricula','groupId,colleagueGroupPK.colleagueId', 'nofield');">
|
To use filters, the call is similar to that of dataFields.
For example:
| Bloco de código |
|---|
|
window.open("/webdesk/zoom.jsp?datasetId=preCad&dataFields=codigo, Código, descricao, Descrição&resultFields=descricao&type=precad&filterValues=metadata_active, false","zoom" , "status, scrollbars=no, width=600, height=350, top=0, left=0"); |
In this example, the zoom will return only inactive cards.
External Zoom
In situations where the data of the elements external to Fluig are too bulky, it is recommended the construction of an external application to Fluig that will serve as zoom to the user. Below is described a JavaScript technique where you can call an external application and the same may return the data requested by the user to a field in the Fluig form.
The first step towards implementation of this technique is to create a logic in JavaScript that will open a new window by calling the external application that will behave like zoom onto the form. We will use and explain the command window.open in this example:
| Bloco de código |
|---|
|
Window.open(URL Aplicação Externa, Nome da Janela que será aberta, comandos adicionais) |
Where:
- External Application URL Is the url of the external application that will function as zoom for Fluig. E.g.: http://servidor/applications/forneczoom.asp.
- Window Name: Name of the window that will be used by the user's browser as an identifier. To avoid overlapping content in the window, it is recommended that a different name is added for each zoom called for the same form. E.g.: "ZoomFormec".
- Additional Commands: Additional commands used to create the window that will contain the zoom application. E.g.: “width=230, height=230”.
| Informações |
|---|
|
Due to a browser restriction, the url of the zoom program external to Fluig must be located in the same domain as Fluig. Otherwise you will not be able to assign to the form field the value chosen for the zoom. This problem occurs because browsers prohibit the practice of cross-domain JavaScript coding. |
The code below will schedule a Fluig form containing a field and a side button that will call an external application window.
| Bloco de código |
|---|
|
<form name=”FornecedorForm”>
Código do Fornecedor:
<input name=”cod_fornec” size=’10” value=”” type=”text”>
<input value=”lista” onClick=”mostraLista()” type=”button”>
</form>
<script language=”JavaScript”>
Function mostraLista() {
Window.open(“fornecedores.html”, “list”,”width=230,height=230”);
}
</script> |
The second step is to schedule within the external application a JavaScript function to return to the form field the value chosen for the user in the external application. This external application can be developed on any existing web development technology in the market that can carry out the execution of JavaScript scripts on the client side. Following is an example of a JavaScript function that passes the value to the form field:
| Bloco de código |
|---|
|
<script language=”JavaScript”>
function escolha(valor) {
// The following line tests whether the fluig form window that opened the zoom window is still open
if (window.opener && !window.opener.close) {
// sets the value for the field
window.opener.document.(form id in Fluig form).(field name).value = value;
}
// Closes the zoom application window
window.close();
}
</script> |
Where:
- Form id in Fluig form: If any id has been defined for the tag <form> in the Fluig form, it should be referenced it in this command. You can also use the collection reference forms within the command (forms [position]).
E.g.: FornecedorForm, forms[0].
- Field Name: Name of the field that will receive the value passed to the function.
E.g.: cod_fornec. - Value: Data that will be passed to the Fluig form field.
The following example will set an external zoom made entirely in HTML with static data only for illustration. The zoom data can come from any source, whether it is internal or external to Fluig.
| Bloco de código |
|---|
|
<html>
<head>
<title>List of suppliers</title>
<script language="JavaScript">
function escolha(valor) {
// Opener validity test
if (window.opener && !window.opener.closed) {
// writing the value of the cod_fornec field
window.opener.document.forms[0].cod_fornec.value = valor;
}
window.close();
}
</script>
</head>
<body>
<!-- The data below are fixed but could be mounted from any source. -->
<table border="1" cellpadding="5" cellspacing="0">
<tbody><tr bgcolor="#cccccc"><td colspan="2"><b>ECM application example</b></td></tr>
<tr bgcolor="#cccccc"><td><b>Code</b></td><td><b>NASDAQ</b></td></tr>
<tr><td><a href="javascript:escolha('TOTVSv3')">TOTVS</a></td>
<td><a href="javascript:escolha('TOTVSv3')">TOTVSv3</a></td></tr>
<tr><td><a href="javascript:escolha('RM1')">RM</a></td>
<td><a href="javascript:escolha('RM1')">RM1</a></td></tr>
<tr><td><a href="javascript:escolha('DTS3')">Datasul</a></td>
<td><a href="javascript:escolha('dts3')">Dts3</a></td></tr>
<tr><td><a href="javascript:escolha('Lgx2')">Logix</a></td>
<td><a href="javascript:escolha('Lgx2')">Lgx2</a></td></tr>
</tbody>
</table>
<!-- End-of-data->
</body>
</html> |
To put the example in practice on the product, simply publish the definition of the following form informing the external zoom file as an attachment to the form definition.
Zoom.zip Example
When you click one of the items in the zoom screen, the JavaScript function of choice will be called, which will send the value to the cod_fornec field in the Fluig form.
Fluig features integration with two types of data services, namely: Dataset and External Services. Both can be used in all events available for customization of form definition.
Dataset
It is a data service that provides access to information, regardless of the data source. Fluig provides internal Datasets that enable access to entities, such as Users, User Groups, among others. See the Fluig Dataset registration to obtain the complete list of available Datasets and their respective fields.
| Informações |
|---|
|
The examples below use the getDatasetValues function, available only to the entity and form definition Datasets (when the number of the form definition is provided). Refer to the Dataset Customization Reference Guide to learn about how to use customized Datasets. |
In getDatasetValues function, NOT all field values are returned for safety reasons. To obtain all the data, DatasetFactory is used, exemplified in Dataset Customization.
For example, to access the Dataset of Fluig users in the displayFields event of a form definition:
| Bloco de código |
|---|
|
function displayFields(form,customHTML) {
// Getting the user via dataset
filter = new java.util.HashMap();
filter.put("colleaguePK.colleagueId","adm");
usuario = getDatasetValues('colleague',filter);
form.setValue('RNC_colab_abertura',usuario.get(0).get("colleagueId"));
} |
It is also possible to call the Datasets within the form definition through JavaScript functions.
Access to Datasets can also be performed directly in the form of the form definition. For example, to access the user’s Dataset and enter the values in the HTML fields:
| Bloco de código |
|---|
|
<html>
<head>
<title>
Teste XMLRPC
</title>
<script language="javascript">
function init(){
var filter = new Object();
filter["colleaguePK.colleagueId"] = "adm";
var colleagues = getDatasetValues("colleague", filter);
if(colleagues.length > 0){
document.getElementById("colleagueName").value = colleagues[0].colleagueName;
document.getElementById("colleagueId").value = colleagues[0].colleagueId;
document.getElementById("login").value = colleagues[0].login;
document.getElementById("extensionNr").value = colleagues[0].extensionNr;
document.getElementById("groupId").value = colleagues[0].groupId;
document.getElementById("mail").value = colleagues[0].mail;
}else{
alert("No User Found");
}
}
</script>
</head>
<script src="../vcXMLRPC.js"></script>
<body onload="init()">
<form id="form1">
<b> User Name: </b>
<input type="text" name="colleagueName" id="colleagueName" />
<br><br>
<b> User Registration: </b>
<input type="text" name="colleagueId" id="colleagueId" />
<br><br>
<b>User Login:</b>
<input type="text" name="login" id="login" />
<br><br>
<b> User Extension: </b>
<input type="text" name="extensionNr" id="extensionNr" />
<br><br>
<b> User Group: </b>
<input type="text" name="groupId" id="groupId" />
<br><br>
<b> User Email: </b>
<input type="text" name="mail" id="mail" />
<br><br>
</form>
</body>
</html> |
The Dataset for form definition uses the same call from the entity Dataset, as in the case of the user. However, instead of passing the name of the Dataset as a parameter, we will pass the number of the form definition. For example:
| Bloco de código |
|---|
|
function displayFields(form,customHTML) {
// Getting the user via dataset
filter = new java.util.HashMap();
filter.put("RNC_nr_solicitacao",new java.lang.Integer(20));
fichas = getDatasetValues(Number(676),filter);
log.info("Usuário de Abertura: "+ fichas.get(0).get("RNC_colab_abertura"));
} |
Download of example of Form Combobox and Dataset: form.html.
DataService
It is a data service that allows access to third-party applications through Fluig. This data service supports two types of connections, namely: AppServer of Progress® and Web Services.
Data services are registered and configured from the Service View function of Fluig Studio.
For more information about the registration of services, refer to: Integration with External Applications And for information on the use of services in events, refer to:Workflow Customization.
The Parent X Child technique has been modified and now the position of the tag tablename is within the "table" tag in the html code.
In the new implemented model, the card index parser will apply the parent child changes as follows:
<table tablename="teste"> - The tablename property determines that Now below this table a parent child system will be implemented within the form definition. The <table> tag will have its parameters scanned in search of other parameters related to the technique that will be explained later in this text. Another <table> will be created around the main table which will contain a button that allows you to add new children. This does not occur only in cases where the property noaddbutton is also provided along with the property tablename.
<TR> (first below the table) - The first <TR> tag found within the table is viewed as a tag that will contain the labels from the parent child table A <TD> column will be added to this tag containing the icon and the function of eliminating existing children in the screen. This new column is the first column on the left of the table.
<TR> (Second below the table) - The parent child technique will hide the original <TR> line and transform it in its "master template" for creating the children of that table. Each time the button "new" is clicked, the entire set of existing fields within that second <TR> will be replicated in the screen with the initial data defined for these fields.
</table> - End of the scope of the technique.
The technique also supports new attributes that can be passed or used to customize the parent and child technique. They are:
noaddbutton - Removes the "add" button from the screen when the form is edited. This allows the developer to choose where he will place the function that will create the children in the screen, and can tie the function call to a text link or a figure, or to another html object.
| Bloco de código |
|---|
|
<table tablename="teste" noaddbutton=true> |
nodeletebutton - Removes the button "bin" from the screen when editing the card. This allows the developer to prevent the deletion of records or define another way of executing the function that will remove the children from the table.
| Bloco de código |
|---|
|
<table tablename="teste" nodeletebutton=true> |
addbuttonlabel - Determines what text will be put in the button to add children of the technique. If it is not provided, the button will come with the default text (new).
| Bloco de código |
|---|
|
<table tablename="test" addbuttonlabel="Add new ingredient"> |
addbuttonclass - Allows you to define which css class will be used by the button. This css class should be available in the html document in the card index.
| Bloco de código |
|---|
|
<table tablename="teste" addbuttonclass="wdkbuttonClass"> |
deleteicon - Allows you to determine what will be the image that will serve as the child deletion icon in the screen. This image should be an annex to the form definition and should be provided in the class as any image used as attachment in the form definition.
| Bloco de código |
|---|
|
<table tablename="teste" deleteicon="teste.jpg"> |
customFnDelete - Allows customization of the function that is called when you click the button that deletes a child of the table. The custom function must be available in the html document of the form definition and must call the default function.
| Bloco de código |
|---|
|
<table tablename="test" customFnDelete="fnCustomDelete(this)">
function fnCustomDelete(oElement){
//Customization
alert ("Deleting child!");
// Default function called, DO NOT REMOVE
fnWdkRemoveChild(oElement);
//Customization
alert ("Child deleted!");
} |
You can use the combination of one or more attributes in the same parent child table. However, if the noaddbutton property is used, the values of the propertiesaddbuttonlabel and addbuttonclass will be ignored. An error message will not be generated in the post or versioning of this form definition. However, when the form is edited, it will not present the default button that allows you to register new children in the form definition. The deleteicon property is not affected by the propertynoaddbutton. Example of combined use of parameters:
| Bloco de código |
|---|
|
<table tablename="teste" addbuttonlabel="Adicionar novo ingrediente" addbuttonclass="wdkbuttonClass" deleteicon="teste.jpg"> |
| Nota |
|---|
- The Parent Child 2.0 technique is not backward compatible with the first implementation. Form definitions that were made with the first technique should be reworked to use this new technique.
The Parent Child 2.0 technique does not accept all html components, but accepts the main ones. The types of components approved by the product are: text, radio button, checkbox, select, select multiple, hidden, textarea, image and button. Download of Parent x Child Form example: form.htm. Fields of a parent and child table are not available to be used as description of the cards in the form configuration.
|
Parent Child Radio Button
In order to use radio button fields, in addition to the standard definition of the html component, you must use the 'value' attribute for the data to be saved correctly.
| Bloco de código |
|---|
|
<table border="1" tablename="test" addbuttonlabel="Add Child" nodeletebutton="true">
<thead>
<tr>
<td><b>Name</b></td>
<td><b>Age</b></td>
<td><b><font face = "arial" size=5 color ="blue">Yes:</b></td>
<td><b><font face = "arial" size=5 color ="blue">No:</b></td>
</tr>
</thead>
<tr>
<td><input type="text" name="nomefilho"></td>
<td><input type="text" name="idadefilho"></td>
<td><input type="radio" name="nameradiofilho" id = "idsimfilho" value="ant_yes"></td>
<td><input type="radio" name="nameradiofilho" id = "idnaofilho" value="ant_no"></td>
</tr>
</table> |
To facilitate data handling in a customized form that makes use of the technique Parent Child, the following methods are provided. Both are called from the form object that is passed as a parameter in the form customization functions.
This event returns a map with all the child fields of a Parent Child from its tablename.
This event returns the indexes of the records (rows) contained in a Parent Child from its tablename.
Example:
| Bloco de código |
|---|
|
function validateForm(form){
var indexes = form.getChildrenIndexes("tabledetailname");
var total = 0;
for (var i = 0; i < indexes.length; i++) {
var fieldValue = parseInt(form.getValue("valor___" + indexes[i]));
if (isNaN(fieldValue)){
fieldValue = 0;
}
total = total + fieldValue;
log.info(total);
}
log.info(total);
if (total < 100) {
throw "Request Total Value cannot be less than 100";
}
}
|
With the addition of forms that support the view in mobile devices, you can move Workflow requests through these devices and fill in the HTML form definition information, ensuring greater mobility and agility to perform workflow request movements.
To include a new card index with support from mobile devices, perform the standard procedure to export the form definition and select the fields that will compose the mobile form in the screen before the conclusion of the export. After the export, another HTML file will be added and it will be marked as "mobile" in the forms folder of the Fluig project.
The following image shows the mobile selection screen at the export of a form definition:
Image Added
Figure 15 - Mobile form definition.
After being exported, the form must be as follows:
Image Added
Figure 16 - Mobile form result.
Parent Child pages for mobile devices
The fields that employ the parent and child technique are not inserted into the form generated automatically for mobile devices by Fluig. However, the product allows you to develop a customized form for mobile devices by querying these fields.
| Nota |
|---|
It is not possible to edit parent and child fields through mobile devices, even in customized forms. Only query. |
The query to parent and child fields on mobile devices is performed by means of javaScript functions available within the masterList object when the form is displayed. They are:
getValue
Returns a string with the value of a parent and child field, receiving as parameters the sequence number of the child, and the name of the field.
| Bloco de código |
|---|
|
masterList.getValue(sequence,field); |
getValues
Returns an object with all the values of the parent and child fields, grouped by the sequence number. This method has no parameters.
| Bloco de código |
|---|
|
masterList.getValues(); |
getValuesBySequence
Returns an object with all the values of the fields of a given sequence. Receives the sequence number as parameter.
| Bloco de código |
|---|
|
masterList.getValuesBySequence(sequence); |
getValuesByField
Returns all the sequences and values of a given field. Receives the name of the field as parameter.
| Bloco de código |
|---|
masterList.getValuesByField(field); |
Examples: Parent Child Forms + Events
To translate forms, you need to use the function i18n.translate ("literal_da_tradução") in the sections of the HTML file that should be translated, as in the following example:
| Bloco de código |
|---|
|
<label>i18n.translate("nm_cliente")</label>
<input name=”nm_cliente”>
<br>
<label>i18n.translate("contato_cliente")</label>
<input name=”contato_cliente”> |
| Informações |
|---|
The literals and their corresponding values are provided in property files with the extension .properties for each desired language. The languages supported for translation are the same supported by Fluig: - Portuguese (pt_BR);
- English (en_US);
- Spanish (es).
|
The files containing the literals have the following naming convention:
- Portuguese: nome_do_formulario_pt_BR.properties;
- English: form_name_en_US.properties;
- Spanish: nome_do_formulario_es.properties.
The property files are created according to the steps below:
| Deck of Cards |
|---|
| effectDuration | 0.5 |
|---|
| id | samples |
|---|
| history | false |
|---|
| effectType | fade |
|---|
|
| Card |
|---|
| default | true |
|---|
| id | 1 |
|---|
| label | Step 1 |
|---|
| Image Added Figure 1 - Context Menu to Externalize Strings. |
| Card |
|---|
| Image Added Figure 2 - Property Files in the Form Folder.
|
| Card |
|---|
| Image Added Figure 3 - Editing a Property File.
|
|
When you export a form to Fluig, the property files containing the literals are published as attachments.
The form is presented in the language configured for the current user.