Histórico da Página
| HTML |
|---|
<div id="main-content" class="wiki-content group">
<h3
id="id-5.ChamadasaZoomsdoDatasulatravésdeFormuláriosnoFluig-5.1.Objetivo">
<strong>5.1. Objective</strong>
</h3>
<p align="LEFT" class="western">
<span><strong>Fluig</strong>(ECM) should be able to call zooms
in <strong>Datasul Metadata</strong> for cases where the data entry
form was developed by <strong>Fluig</strong>. </span>
</p>
<p align="LEFT" class="western">
<span>In a Fluig form, when there is a field that represents a
<strong>Metadata zoom</strong>, by clicking on it Fluig should
perform an HTTP call sending a URL with the parameters for opening a
new browser window containing the <strong>zoom</strong>. On Fluig, a
Javascript with the <strong>Window.open()</strong> command will be
used, according to instructions in the document: “<strong>Reference
Guide Card Index Customization.pdf</strong>” in ECM, item: <strong>External
Zoom</strong>. On Datasul, the URL sent by Fluig will open the Metadata zoom
using the Framework <strong><em>External Call</em></strong>
technique.
</span>
</p>
<p align="LEFT" class="western">
<span><br /></span>
</p>
<h3
id="id-5.ChamadasaZoomsdoDatasulatravésdeFormuláriosnoFluig-5.2.GuiadeProgramação">
<strong>5.2. Programming Guide</strong>
</h3>
<p>
Below are the steps required to create a field in a process form and
associate it to a <strong>Zoom</strong> from <strong>Datasul</strong>.
As an example, we will use the Parent zoom from the CRM application,
according to the following figures.
</p>
<p>
<img class="confluence-embedded-image image-center"
src="http://tdn.totvs.com/download/attachments/81789187/Screen01.png?version=1&modificationDate=1380907388000&api=v2"
data-image-src="http://tdn.totvs.com/download/attachments/81789187/Screen01.png?version=1&modificationDate=1380907388000&api=v2">
</p>
<p style="text-align: center;">
<strong>Figure 4.2.a</strong>
</p>
<p style="text-align: left; margin-left: 30.0px;">
<strong><br /></strong>By clicking the <strong>"..."</strong> button
next to the <strong>Country</strong> field on the form in Figure
4.2.a, the window in Figure 4.2.b opens and the user can select a
country.
</p>
<p style="text-align: left; margin-left: 30.0px;">
<img class="confluence-embedded-image image-center"
src="http://tdn.totvs.com/download/attachments/81789187/Screen02.png?version=1&modificationDate=1380907405000&api=v2"
data-image-src="http://tdn.totvs.com/download/attachments/81789187/Screen02.png?version=1&modificationDate=1380907405000&api=v2">
</p>
<p style="text-align: center;">
<strong>Figure 4.2.b</strong>
</p>
<p style="text-align: left; margin-left: 30.0px;">
<strong><br /></strong>After selecting a country and clicking the <strong>Select</strong>
button, the zoom window will be closed and the process form will
receive the data from the selected country. A script in the HTML form
will be responsible for receiving the record data and presenting the
country name in the corresponding field, as shown in Figure 4.2.c.
</p>
<p>
<img class="confluence-embedded-image image-center"
src="http://tdn.totvs.com/download/attachments/81789187/Screen3.png?version=1&modificationDate=1380906303000&api=v2"
data-image-src="http://tdn.totvs.com/download/attachments/81789187/Screen3.png?version=1&modificationDate=1380906303000&api=v2">
</p>
<p style="text-align: center;">
<strong>Figure 4.2.c</strong>
</p>
<p> </p>
<h3 style="text-align: left; margin-left: 30.0px;"
id="id-5.ChamadasaZoomsdoDatasulatravésdeFormuláriosnoFluig-CriandoumFormulário">
<strong>Creating a Form</strong>
</h3>
<p style="margin-left: 30.0px;">
<u><strong>A.</strong></u> Through <strong>Fluig Studio</strong>,
create a new <strong>Dataset</strong> to store the information on
Datasul server connection and user credentials. This Dataset can be
used by several forms from different processes that have associated
zooms.
</p>
<p style="margin-left: 60.0px;">
From a <strong>Fluig project</strong> in <strong>Fluig Studio</strong>,
select the <strong>datasets</strong> folder, right click and select
the <strong>New</strong> option. Then, select the item <strong>Fluig
Customized Dataset</strong>, as shown in Figure 4.2.d.
</p>
<p style="margin-left: 30.0px;">
<img class="confluence-embedded-image image-center"
src="http://tdn.totvs.com/download/attachments/81789187/Screen1.png?version=2&modificationDate=1380907040000&api=v2"
data-image-src="http://tdn.totvs.com/download/attachments/81789187/Screen1.png?version=2&modificationDate=1380907040000&api=v2">
</p>
<p style="margin-left: 30.0px; text-align: center;">
<strong>Figure 4.2.d</strong>
</p>
<p style="margin-left: 60.0px;">Next, inform the parameters as
shown in Figure 4.2.e.</p>
<p style="margin-left: 30.0px; text-align: center;">
<img class="confluence-embedded-image image-center"
src="http://tdn.totvs.com/download/attachments/81789187/Screen2.png?version=2&modificationDate=1380907129000&api=v2"
data-image-src="http://tdn.totvs.com/download/attachments/81789187/Screen2.png?version=2&modificationDate=1380907129000&api=v2"><strong>Figure
4.2.e</strong>
</p>
<p align="LEFT" class="western" style="margin-left: 60.0px;">
<span>Type the following code in DatasulServerDS:</span>
</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Eclipse; brush: javascript; gutter: true"
style="font-size: 12px;">function createDataset(fields, constraints, sortFields) {
var newDataset = DatasetBuilder.newDataset();
// Creates the columns
newDataset.addColumn("server");
newDataset.addColumn("port");
newDataset.addColumn("user");
newDataset.addColumn("password");
// Creates the records
newDataset.addRow(new Array('10.80.17.124', '8080', 'framework', 'ZnJhbWV3b3Jr='));
return newDataset;
}</pre>
</div>
</div>
<p align="LEFT" class="western" style="margin-left: 60.0px;">
<span>This dataset will be used by all <strong>forms </strong>in<strong>
Fluig</strong> that have access to <strong>zooms </strong>in<strong>
Datasul</strong>. The dataset must be customized at the client to contain the
Datasul server and port, the integration user and password. The
password must be provided in Base64. In order to code the password
for Base64, use the following Javascript function:
</span>
</p>
<pre> var pwd64 = btoa("framework");</pre>
<p> </p>
<p align="LEFT" class="western" style="margin-left: 60.0px;">
<span>After creating the dataset, right click it and select the
option </span><span><strong>export</strong></span><span> to send the
dataset to <strong>Fluig</strong>, as shown in Figure <strong>4.2.f</strong>.
</span>
</p>
<p align="LEFT" class="western" style="margin-left: 60.0px;">
<span><img class="confluence-embedded-image"
src="http://tdn.totvs.com/download/attachments/81789187/Screen03.png?version=2&modificationDate=1380909280000&api=v2"
data-image-src="http://tdn.totvs.com/download/attachments/81789187/Screen03.png?version=2&modificationDate=1380909280000&api=v2"><br /></span>
</p>
<p align="LEFT" class="western"
style="margin-left: 60.0px; text-align: center;">
<strong>Figure 4.2.f</strong>
</p>
<p align="LEFT" class="western" style="margin-left: 60.0px;">
<span><br /></span>
</p>
<p align="LEFT" class="western" style="margin-left: 60.0px;">
<span><u><strong>B.</strong></u> Create a new form by right
clicking the folder <strong>forms</strong> at Fluig project. Then
select <strong>New > Other > Fluig > Form Definition</strong>, as
shown in Figure 4.2.g.<br /></span>
</p>
<p align="LEFT" class="western"
style="margin-left: 60.0px; text-align: center;">
<span><img class="confluence-embedded-image image-center"
src="http://tdn.totvs.com/download/attachments/81789187/Fig1.png?version=1&modificationDate=1381756845000&api=v2"
data-image-src="http://tdn.totvs.com/download/attachments/81789187/Fig1.png?version=1&modificationDate=1381756845000&api=v2"><strong>Figure
4.2.g</strong><br /></span>
</p>
<p align="LEFT" class="western" style="margin-left: 60.0px;">
<span><u><strong>C.</strong></u> For the name of the form,
inform <strong>ClienteForm</strong> as shown in Figure 4.2.h.<br /></span>
</p>
<p align="LEFT" class="western"
style="margin-left: 60.0px; text-align: center;">
<span><img class="confluence-embedded-image image-center"
src="http://tdn.totvs.com/download/attachments/81789187/Fig2.png?version=1&modificationDate=1381756898000&api=v2"
data-image-src="http://tdn.totvs.com/download/attachments/81789187/Fig2.png?version=1&modificationDate=1381756898000&api=v2"><strong>Figure
4.2.h</strong><br /></span>
</p>
<p align="LEFT" class="western" style="margin-left: 60.0px;">
<span><u><strong>D.</strong></u> Rename the form to <strong>DatasulForm.html</strong>
(only the form. Keep the name of the folder as <strong>ClienteForm</strong>)</span>
</p>
<p align="LEFT" class="western" style="margin-left: 60.0px;">
<span><u><strong>E.</strong></u> Substitute the form code with
the following code:</span>
</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Eclipse; brush: html/xml; gutter: true"
style="font-size: 12px;"><html>
<head>
<script language="javascript" type="text/javascript" src="/webdesk/vcXMLRPC.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="Datasul.js" language="javascript"></script>
<script>
var server;
var user;
var password;
/**
* Starts the form and obtains data from 'DatasulServerDS' dataset.
*/
function loadForm() {
try {
// Obtains the data from DatasulServerDS
var dataset = DatasetFactory.getDataset("DatasulServerDS", null, null, null);
server = dataset.values[0]["server"] + ":" + dataset.values[0]["port"];
user = dataset.values[0]["user"];
password = dataset.values[0]["password"];
var zoomAppletTag = '<applet' +
' code="com.totvs.framework.md.zoom.fluig.ZoomApplet"' +
' id="dsZoom" height="0" width="0"' +
' codebase="http://' + server + '/datasul/applets"' +
' archive="datasul-framework-mdablscript-java.jar"' +
  ' MAYSCRIPT></applet>';
document.getElementById("zoomApplet").innerHTML = zoomAppletTag;
$("#customForm").load("CustomForm.html");
} catch(e) {
alert(e);
}
}
/**
* Opens a Zoom Metadata form.
* @param server
* @param user
* @param password
* @param title
* @param program
*/
function callZoom(program) {
var portNumber = document.dsZoom.getPortNumber();
var url = "http://" + server + "/josso/signon/externalUserAuthentication.do?" +
"josso_cmd=external-login&type=md&program=" + program +
"&viewtype=view&zoomMode=true&userid=" + user +
"&password=" + password +
"&zoomCallBackPort=" + portNumber;
try {
window.open(url, "Zoom" ,"width=800,height=600");
} catch (e) {
alert(e);
}
}
</script>
</head>
<body onload="loadForm()">
<form name="customForm">
<input type="hidden" name="hidden">
<div id="customForm"></div>
<div id="zoomApplet"></div>
</form>
</body>
</html></pre>
</div>
</div>
<p style="margin-left: 30.0px;">
<strong>Note The previous code does not need to and must not
be altered.</strong>
</p>
<p align="LEFT" class="western" style="margin-left: 37.4333px;">
<span><u><strong>F.</strong></u> In the <strong>ClienteForm</strong>
folder, right click and select <strong>New</strong> > <strong>File</strong>.
Add a file named <strong>CustomForm.html</strong> and then replace
the content generated for it with the following code. The form fields
are created in this file, according to the process it will use.</span>
</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Eclipse; brush: html/xml; gutter: true"
style="font-size: 12px;"><h2>Client</h2>
<table>
<tr>
<td align="right" width="150" class="Labels"><b>Code:</b></td>
<td class="Normal"><strong><input type="text" size="6" name="A1_COD"></strong></td>
</tr>
<tr>
<td align="right" width="150" class="Labels"><b>Name:</b></td>
<td class="Normal"><strong><input type="text" size="40" name="A1_NOME"></strong></td>
</tr>
<tr>
<td align="right" width="150" class="Labels"><b>Trade Name:</b></td>
<td class="Normal"><strong><input type="text" size="20" name="A1_NREDUZ"></strong></td>
</tr>
<tr>
<td align="right" width="150" class="Labels"><b>Address:</b></td>
<td class="Normal"><strong><input type="text" size="40" name="A1_END"></strong></td>
</tr>
<tr>
<td align="right" width="150" class="Labels"><b>City:</b></td>
<td class="Normal"><strong><input type="text" size="40" name="A1_MUN"></strong></td>
</tr>
<tr>
<td align="right" width="150" class="Labels"><b>State:</b></td>
<td class="Normal"><strong><input type="text" size="2" name="A1_EST"></strong></td>
</tr>
<tr>
<td align="right" width="150" class="Labels"><b>Country:</b></td>
<td class="Normal"><strong><input type="text" size="15" name="A1_PAIS"><input value="..."
onClick="callZoom('crm1150.CRUDpais')" type="button"></strong></td>
</tr>
</table>
<script>
/**
* Function used by Datasul Zoom to return the selected record
* for the form in Fluig.
*/
function zoomCallBack(data) {
try {
var obj = JSON.parse(data);
document.customForm.A1_PAIS.value = obj.nom_pais;
} catch (e) {
alert(e.message);
}
}
</script></pre>
</div>
</div>
<p align="LEFT" class="western" style="margin-left: 37.4333px;">
<span>The contents of file <strong>CustomForm.html</strong>
should have the form field definitions as shown in the previous
example. Also, the function <strong>zoomCallBack(data)</strong> must
be created, which will be called by Datasul after the user selects
the record on the Zoom screen. This function will receive a JSON
string with the data from the selected record.
</span>
</p>
<p align="LEFT" class="western" style="margin-left: 37.4333px;">
<span>In the <strong>A1_PAIS</strong> field that represents the
<strong>zoom,</strong> the <strong>onClick</strong> event performs a
call to the<strong> callZoom</strong>() function. This function
receives the <strong>metadata program</strong> as a parameter to be
opened in Datasul. This program identification must be the same as
the form registered in the Datasul <strong>menu</strong>.<br /></span>
</p>
<p align="LEFT" class="western" style="margin-left: 37.4333px;">
<span><br /></span>
</p>
<p align="LEFT" style="margin-left: 30.0px;">
<u><strong>G.</strong></u> Once the <strong>DatasulForm.html</strong>
and <strong>CustomForm.htm</strong>l are created, export them to <strong>Fluig</strong>.
Right click on <strong>DatasulForm.html</strong> and perform the
export (file <strong>CustomForm.htm</strong>l will be exported
together automatically). Then, inform a folder and complete the
export. After completing this step, the form will be placed in Fluig
document center below the selected folder.
</p>
<p> </p>
<p style="margin-left: 30.0px;">
<u><strong>H.</strong></u> Finally, change the process that will use
the <strong>ClienteForm</strong> associating the form to it, as shown
in Figure 4.2.i.
</p>
<p align="LEFT" style="margin-left: 30.0px; text-align: center;">
<img class="confluence-embedded-image image-center"
src="http://tdn.totvs.com/download/attachments/81789187/Screen07.png?version=1&modificationDate=1380915042000&api=v2"
data-image-src="http://tdn.totvs.com/download/attachments/81789187/Screen07.png?version=1&modificationDate=1380915042000&api=v2"><strong>Figure
4.2.i</strong>
</p>
<p align="LEFT">
<strong><br /></strong>
</p>
<h3
id="id-5.ChamadasaZoomsdoDatasulatravésdeFormuláriosnoFluig-FunçãoABLScriptparaFormuláriosFreeForm">
<strong>ABLScript function for FreeForm Forms</strong>
</h3>
<p>
In the previous example, where we used the Parent page zoom, <strong>it
was not necessary to implement or modify anything in Datasul</strong>. This is
due to the fact that we used a metadata form type <strong>CRUDFreeForm</strong>
as zoom. We can also implement a zoom through a <strong>FreeForm</strong>
form. In this case, it will be necessary to create an ABLScript code
on the form to send the record selected by the user to Fluig. Below
there is an example of a script for <strong>FreeForm</strong>.
</p>
<p align="LEFT" class="western">
<span>Assuming that on the <strong>FreeForm</strong> form there
is a button called
</span><span><strong>Select,</strong></span><span> and when triggered
it should close the Metadata window and</span><span> send the
selected record. In the “click” event of the <strong>Select</strong>
button we can have a script similar to the one below:
</span>
</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Eclipse; brush: plain; gutter: true"
style="font-size: 12px;">DEFINE TEMP-TABLE ttGrid
FIELD num_id AS INTEGER
FIELD nom_pais AS CHARACTER
FIELD nom_nacion AS CHARACTER
FIELD num_ddi AS CHARACTER
FIELD log_suspenso AS LOGICAL
FIELD nom_mascar_cep AS CHARACTER
FIELD cod_pais_ibge AS CHARACTER
FIELD log_cep AS LOGICAL
FIELD cod_pais_erp AS CHARACTER
FIELD log_integrad_erp AS LOGICAL.
DEFINE VARIABLE parent pages AS CHARACTER.
ttGrid = GETPROPERTY("grid", "selectedItemsCheckbox").
ttGrid:SET-CURRENT(0).
parent pages = JSON-ENCODE(ttGrid).
CALL-BACK-WINDOW-OPENER(pais, true).
</pre>
</div>
</div>
<p style="margin-left: 30.0px;">
The CALL-BACK-WINDOW-OPENER() function sends the selected record data
to Fluig an then closes the zoom form window. The first parameter must
be a string with the selected record data in JSON format. The second
parameter is a <strong>boolean</strong> variable that when set to <strong>true</strong>,
indicates the function that the zoom window will be closed.
</p>
<p style="margin-left: 30.0px;">Similar to the previous example,
the CRUDFreemForm zooms return a JSON string to Fluig with the fields
in the selected record. In Fluig, record fields can be obtained as
follows:</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Eclipse; brush: javascript; gutter: true"
style="font-size: 12px;">var obj = JSON.parse(value);
document.customForm.A1_PAIS.value = obj.records[0].nom_pais;</pre>
</div>
</div>
<pre>
<br /><br />
</pre>
</div>
|
Visão Geral
Import HTML Content
Conteúdo das Ferramentas
Tarefas