5.1. Objective
Fluig(ECM) should be able to call zooms in Datasul Metadata for cases where the data entry form was developed by Fluig.
In a Fluig form, when there is a field that represents a Metadata zoom, by clicking on it Fluig should perform an HTTP call sending a URL with the parameters for opening a new browser window containing the zoom. On Fluig, a Javascript with the Window.open() command will be used, according to instructions in the document: “Reference Guide Card Index Customization.pdf” in ECM, item: External Zoom. On Datasul, the URL sent by Fluig will open the Metadata zoom using the Framework External Call technique.
5.2. Programming Guide
Below are the steps required to create a field in a process form and associate it to a Zoom from Datasul. As an example, we will use the Parent zoom from the CRM application, according to the following figures.
Figure 4.2.a
By clicking the "..." button
next to the Country field on the form in Figure
4.2.a, the window in Figure 4.2.b opens and the user can select a
country.
Figure 4.2.b
After selecting a country and clicking the Select
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.
Figure 4.2.c
Creating a Form
A. Through Fluig Studio, create a new Dataset 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.
From a Fluig project in Fluig Studio, select the datasets folder, right click and select the New option. Then, select the item Fluig Customized Dataset, as shown in Figure 4.2.d.
Figure 4.2.d
Next, inform the parameters as shown in Figure 4.2.e.
Figure
4.2.e
Type the following code in DatasulServerDS:
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;
}
This dataset will be used by all forms in Fluig that have access to zooms in Datasul. 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:
var pwd64 = btoa("framework");
After creating the dataset, right click it and select the option export to send the dataset to Fluig, as shown in Figure 4.2.f.
Figure 4.2.f
B. Create a new form by right
clicking the folder forms at Fluig project. Then
select New > Other > Fluig > Form Definition, as
shown in Figure 4.2.g.
Figure
4.2.g
C. For the name of the form,
inform ClienteForm as shown in Figure 4.2.h.
Figure
4.2.h
D. Rename the form to DatasulForm.html (only the form. Keep the name of the folder as ClienteForm)
E. Substitute the form code with the following code:
<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>
Note The previous code does not need to and must not be altered.
F. In the ClienteForm folder, right click and select New > File. Add a file named CustomForm.html 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.
<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>
The contents of file CustomForm.html should have the form field definitions as shown in the previous example. Also, the function zoomCallBack(data) 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.
In the A1_PAIS field that represents the
zoom, the onClick event performs a
call to the callZoom() function. This function
receives the metadata program as a parameter to be
opened in Datasul. This program identification must be the same as
the form registered in the Datasul menu.
G. Once the DatasulForm.html and CustomForm.html are created, export them to Fluig. Right click on DatasulForm.html and perform the export (file CustomForm.html 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.
H. Finally, change the process that will use the ClienteForm associating the form to it, as shown in Figure 4.2.i.
Figure
4.2.i
ABLScript function for FreeForm Forms
In the previous example, where we used the Parent page zoom, it was not necessary to implement or modify anything in Datasul. This is due to the fact that we used a metadata form type CRUDFreeForm as zoom. We can also implement a zoom through a FreeForm 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 FreeForm.
Assuming that on the FreeForm form there is a button called Select, and when triggered it should close the Metadata window and send the selected record. In the “click” event of the Select button we can have a script similar to the one below:
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).
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 boolean variable that when set to true, indicates the function that the zoom window will be closed.
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:
var obj = JSON.parse(value); document.customForm.A1_PAIS.value = obj.records[0].nom_pais;
Visão Geral
Import HTML Content
Conteúdo das Ferramentas
Tarefas