TOTVS Fluig English

Árvore de páginas

Você está vendo a versão antiga da página. Ver a versão atual.

Comparar com o atual Ver Histórico da Página

Versão 1 Próxima »

5.1. Objetivo

El Fluig(ECM) debe ser capaz de invocar zooms en el Metadados Datasul para aquellos casos en que el formulario de entrada de datos se desarrolló por el propio Fluig.

En un formulario Fluig, existiendo un campo que represente un zoom Metadatos, al hacer clice este, Fluig deberá realizar una llamada HTTP pasando una URL con los parámetros para abrir una nueva ventana del browser que contenga el zoom. Al lado del Fluig se utilizará un Javascript con el comando Window.open(), de acuerdo con las instrucciones que se presentan en el documento: “Guía de Referencia Personalización de Fichаrios.pdf” del ECM, ítem: Zoom Externo. Al lado del Datasul, la URL lanzada por Fluig abrirá el zoom del Metadatos utilizando la técnica de External Call del Framework.


5.2. Guía de Programación

A continuación, veremos los pasos necesarios para crear un campo en un formulario de proceso y asociarlo a un Zoom de Datasul. Como ejemplo, vamos a utilizar el zoom de País de la aplicación CRM, de acuerdo con los siguientes gráficos.

Gráfico 4.2.a


Al hacer clic en el botón "..." junto al campo País del formulario del Gráfico 4.2.a, se abrirá la ventana del Gráfico 4.2. b para que el usuario seleccione un país.

Gráfico 4.2.b


Después de seleccionar un país y hacer clic en el botón Seleccionar, se cerrará la ventana de zoom y el formulario del proceso recibirá los datos del país seleccionado. Un script en el formulario HTML será responsable de recibir los datos del registro y presentar el nombre del país en el campo correspondiente, como lo muestra el Gráfico 4.2.c.

Gráfico 4.2.c

 

Creando un Formulario

A. A través del Fluig Studio cree un nuevo Dataset para almacenar información de conexión con el servidor Datasul y credenciales de usuario. Varios formularios de diferentes procesos que tengan zooms asociados podrán utilizar este Dataset.

A partir de un proyecto Fluig en el Fluig Studio seleccione la carpeta datasets, hága clic con el botón derecho del ratón y seleccione la opción Nuevo. Luego seleccione el ítem Dataset personalizado Fluig, como muestra el gráfico 4.2.d.

Gráfico 4.2.d

A continuación informe los parámetros de acuerdo con el Gráfico 4.2.e.

Gráfico 4.2.e

Escriba el siguiente código en el DatasulServerDS: 

function createDataset(fields, constraints, sortFields) {
    var newDataset = DatasetBuilder.newDataset();
    // Crea las columnas
    newDataset.addColumn("server");
    newDataset.addColumn("port");
    newDataset.addColumn("user");
    newDataset.addColumn("password");
    // Crea los registros
    newDataset.addRow(new Array('10.80.17.124', '8080', 'framework', 'ZnJhbWV3b3Jr='));
    return newDataset;
}

Todos los formularios en el Fluig que hagan acceso a zooms enDatasul utilizarán ese dataset. El dataset deberá personalizarse en el cliente, para contener el servidor y puerto de Datasul, el usuario de integración y contraseña. La contraseña debe estar provista en Base64. Para codificar la contraseña a Base64 utilizar la siguiente función de Javascript: 

        var pwd64 = btoa("framework");

 

Después de crear el dataset, haga clic en este con el botón derecho y seleccione la opción exportar para enviar el dataset alFluig, de acuerdo con el Gráfico 4.2.f.


Gráfico 4.2.f


B. Cree un nuevo formulario haciendo clic con el botón derecho en la carpeta forms del proyecto Fluig. Luego seleccione Nuevo > Otros > Fluig > Definición de Formulario, como se muestra en el Gráfico 4.2.g.

Gráfico 4.2.g

C. Para el nombre del formulario informe ClienteForm de acuerdo con el Gráfico 4.2.h.

Gráfico 4.2.h

D. Cambie el nombre del formulario de DatasulForm.html (sólo el formulario, mantenga el nombre de la carpeta como ClienteForm)

E. Sustituya el código del formulario por el código que está a continuación: 

<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;
     
         /**
          * Inicializa el formulario y obtiene los datos del dataset 'DatasulServerDS'.
          */
         function loadForm() {
            try {
               // Obtiene los datos del 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);
            }
         }
    
         /**
          Realiza la apertura de un formulario Zoom Metadatos.
          * @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>

Obs. El código anterior no debe ni requiere cambiarse.

F. En la carpeta ClienteForm, haga clic con botón derecho del ratón y seleccione Nuevo > Archivo. Añadir un archivo llamado CustomForm.html y sustituya el contenido generado para este por el siguiente código. En este archivo que se crearán los campos del formulario según el proceso en el que se utilizará. 

<h2>Cliente</h2>
<table>
   <tr>
      <td align="right" width="150" class="Labels"><b>Código:</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>Nome:</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>Nombre Fantasia:</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>Endereco:</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>Municipio:</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>Estado:</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>Pais:</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>
/**
 * Función utilizada por Zoom Datasul para responder con el registro seleccionado
 para el formulario en Fluig.
 */
function zoomCallBack(data) {
   try {
      var obj = JSON.parse(data);
      document.customForm.A1_PAIS.value = obj.nom_pais;
   } catch (e) {
      alert(e.message);
   }
}
</script>

El contenido del archivo CustomForm.html debe tener las definiciones de los campos del formulario, como se muestra en el ejemplo anterior. Además se deberá crear la función zoomCallBack (datos), que será llamado por Datasul después de que el usuario lleve a cabo la selección del registro en la pantalla Zoom. Esa función recibirá un string JSON con los datos del registro seleccionado.

En el campo A1_PAIS que representa el zoom, el evento onClick realiza una llamada a la función callZoom(). Esta función recibe como parámetro el programa de metadatos a abrir en el Datasul. Este identificación del programa debe ser la misma que el formulario completado en el menú de Datasul.


G. Una vez creado el DatasulForm.html y CustomForm.html,expórtelos al Fluig. Haga clic en el botón derecho del DatasulForm.html y lleve a cabo la exportación (el archivo CustomForm.html se exportará junto automáticamente). En la secuencia informe una carpeta y concluya la exportación. Una vez finalizada esta etapa, el formulario se colocará en la central de documentos del Fluig abajo de la carpeta seleccionada.

 

H. Por último, cambie el proceso que utilizará el ClienteForm al asociarle el formulario, como se muestra en la figura 4.2.i.

Gráfico 4.2.i


Función ABLScript para Formularios FreeForm

En el ejemplo visto anteriormente, donde utilizamos el zoom de País, no fue necesario realizar ninguna implementación o modificación al lado del Datasul. Eso se debe al hecho de que utilizamos un formulario metadatos del tipo CRUDFreeForm como zoom. También podemos implementar un zoom a través de un formulario FreeForm, en este caso se necesitará crear un código de ABLScript en el formulario para enviar al Fluig el registro seleccionado por el usuario. Veremos a continuación un ejemplo de script para FreeForm.

Suponiendo que en el formulario FreeForm existe un botón llamado Selecciona, que al accionarse debe cerrar la ventana Metadatos y enviar el registro seleccionado. En el evento de «clic» del botón Seleccionar podremos obtener un script similar a este: 

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 pais AS CHARACTER.      
   
ttGrid = GETPROPERTY("grid", "selectedItemsCheckbox").
ttGrid:SET-CURRENT(0).
pais = JSON-ENCODE(ttGrid).
CALL-BACK-WINDOW-OPENER(pais, true).

La función CALL-BACK-WINDOW-OPENER() envía los datos del registro seleccionado para el Fluig y lego cierra la ventana del formulario de zoom. El primer parámetro debe ser un string con los datos del registro seleccionado en formato JSON. El segundo parámetro es una variable de tipo boolean que cuando es true, indica la función que la ventana de zoom debe cerrar.

De manera similar al ejemplo anterior, los zooms de CRUDFreemForm responden a Fluig una string JSON con los campos del registro seleccionado. Al lado del Fluig se pueden obtener los campos del registro de la siguiente manera:

var obj = JSON.parse(value);
document.customForm.A1_PAIS.value = obj.records[0].nom_pais;
  • Sem rótulos