Índice

Index

Índice

outline	true
style	none
exclude	.*ndice

Declaración

Statement <!DOCTYPE> HTML

Al publicar una definición de formulario no se recomienda utilizar declaracionesWhen publishing a form definition, it is not recommended to use statements such as:

Bloco de código

language	html/xml

<!DOCTYPE>, Ex: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

La utilización de las mismas puede impactar en algunas funcionalidades de la definición de formulario, o en el Workflow utilizando el navegador Microsoft® Internet Explorer ®These statements may affect some features of the definition of the form or of the Workflow when using Microsoft® Internet Explorer® browser.

FormController

O formController es el objeto que realiza la comunicación entre el formulario y la personalización de los eventos. Este objeto está disponible en cada uno de los eventos de personalización de
formularios a través de la variable form. La variable permite modificar los valores de los espacios de un registro de formulario y también obtener el estado de su edición, por ejemplo: si el
está visualizando o editando el registro del formulario. Vea a continuación los métodos disponibles para la variable form:

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:

Method	Description	Método	Descripción
long getCompanyId()	Devuelve el ID de la empresaReturns the company ID
int getDocumentId()Devuelve el	ID del documento (registro del formularioReturns the document ID (form record)
int getVersion()Devuelve la versión del documento (registro del formulario	Returns the document version (form record)
int getCardIndex()	Devuelve el ID del formularioReturns the form ID.
String getValue(String fieldName)Obtiene	el valor de espacio del formularioGets the value of a form field
void setValue(String fieldName, String fieldValue)	Define el valor de un espacio del formularioDefines the value of a form field
boolean getEnabled(String fieldName)	Verifica si un espacio está habilitadoChecks whether a field is enabled
void setEnabled(String fieldName, boolean enabled)	Define si un espacio debe estar habilitado o noDefines whether or not a field should be enabled
String getFormMode()	Obtiene el modo de edición del formulario con probabilidad de devolver los siguientes valoresGets the form editing mode, and can return the following values: ADD: Creación del formularioCreation of the form MOD: Formulario en ediciónForm being edited VIEW: Visualización del formularioForm view NONE: No existe comunicación con el formulario, por ejemplo, ocurre al momento de la validación de los espacios del formulario donde no esté siendo presentadocommunication 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)	Cuando se define con el valor true, deshabilita el botón de imprimir del formularioWhen set as true, it disables the form print button.
boolean isHidePrintLink()	Verifica si el botón para imprimir está deshabilitadoChecks whether the print button is disabled.
Map<String, String> getChildrenFromTable(String tableName)	Devuelve un mapa que contiene los nombres y valores de los espacios hijos de una tabla padreReturns a map containing the names and values of the child fields of a parent table.
void setHideDeleteButton(boolean hide)	Cuando se define con el valor true, deshabilita el botón de excluir registros hijos en un formulario con padre-hijoWhen set as true, it disables the button to delete records in a parent-child form.
boolean isHideDeleteButton()	Verifica si la exclusión de registros hijos está deshabilitadaChecks whether the deletion of child records is disabled.
boolean getMobile()	Verifica si se está ingresando al registro de formulario a través de un dispositivo mobileChecks whether the form record is being accessed through a mobile device.

Personalización de Formularios:

La personalización de definición de formularios se realiza a través de la creación de scripts en el lenguaje JavaScript. El código de implementación de cada script se almacena en un banco de datos y dispensa el uso de otros archivos, como por ejemplo, “plugin.p”.

Los eventos de personalización para definir formularios son creados a partir del Fluig Studio. Para publicar un formulario siga los pasos según el ejemplo a continuación:

Customização de Formulários

La personalización de definición de formularios se realiza a través de la creación de scripts en el lenguaje JavaScript. El código de implementación de cada script se almacena en un banco de datos y dispensa el uso de otros archivos, como por ejemplo, “plugin.p”.

Los eventos de personalización para definir formularios son creados a partir del Fluig Studio. Para publicar un formulario siga los pasos según el ejemplo a continuación:

Form Customization

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

Deck of Cards

effectDuration	0.5
id	samples
history	false
effectType	fade

Card

default	true
id	1
label	Passo1Step 1

Para crear una definición de formulario, en la visión Explorador de paquetes se debe ingresar a la carpeta forms del proyecto Fluig, luego presionar clic con el botón derecho y en el menú ingresar Nuevo> Definición de Formulario.

Image Removed

Figura 1 - Nueva Definición de Formulario

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

id	2
label	Passo Step 2

In the form definition creation screen, enter the desired name and click finish.

Image Added

Figure 2 - New Form Definition

En la ventana de creación de definición de formulario, basta completar el nombre deseado y luego presionar clic en finalizar

Image Removed

Figura 2 - Nueva Definición de Formulario

.

Card

id	3
label	Passo Step 3

Al finalizar, se creará un paquete relacionado a la definición de formulario en la carpeta forms y el editor de formulario quedará disponible para la edición.

Image Removed

Figura 3 - Nueva Definición de Formulario.

When you finish, a package that refers to the form definition is created in the forms folder and the form editor is available for editing.

Image Added

Figure 3 - New Form Definition

.

Card

id	4
label	Passo Step 4

A partir del From the editor, se desarrolla todo el contenido HTML. En el ejemplo se desarrolló un formulario simple de registroall the HTML content is developed. In the example, a simple registration form was developed.

Figura

Figure 4 -

Nueva Definición de Formulario

New Form Definition.

Después de crear una definición de formulario es posible crear scripts personalizados. Los eventos para formularios se deben crear según los pasos a continuación

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	Passo1Step 1

Para crear un script de formulario en Fluig, en la visión Explorador de paquetes se debe ingresar a la carpeta forms del proyecyo Fluig, luego presionar clic con el botón derecho y en el menú ingresar Nuevo > OtrosTo 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.

Figura 5 - Creación de script evento de la definición de formulario.

Figure 5 – Creating a form definition event script.

Card

id	2
label	Passo Step 2

Seleccione la opción Script Evento de definición de formulario y haga clic en el botón AvanzarSelect the form definition Event Script option and click the Next button.

Figura 6 - Creación de script evento de la definición de formulario

Figure 6 – Creating a form definition event script.

Card

id	3
label	Passo Step 3

En esta ventana informe los espacios pertinentes al evento que desea agregar y luego haga clic en el botón FinalizarOn this screen, enter the fields related to the event that you want to add and click the Finish button.

Figura 7 - Creación de script evento de la definición de formulario.

Figure 7 – Creating a form definition event script.

Card

id	4
label	Passo Step 4

En el ejemplo seleccionamos el evento displayFields, y relacionamos la definición de formulario In the example, we have selected the event displayFields, and related it to the form definition form_exemplo_fluig.

Figura 8 - Creación de script evento de la definición de formulario.

Figure 8 – Creating a form definition event script.

Card

id	5
label	Passo Step 5

Al finalizar estará disponible la estructura principal del método en el Upon completing the main structure of the method, it will be available in the editor.

Figura 9 - Creación de script evento de la definición de formulario

Figure 9 – Creating a form definition event script.

Cardcard

id	6
label	Passo Step 6

El evento utilizado como ejemplo - validateForm, valida el procedimiento de completos los espacios de solicitud y de usuario.El objeto formController, ha sido utilizado para verificar el valor de los espacios, a través de la sintaxis ‘form.getValue(“fieldname”)’. Al exportar la definición de formularios también se exportarán, los eventos relacionados, al servidor Fluig.

Image Removed

Figura 10 - Creación de script evento de la definición de formulario.

Todos los eventos de la definición de formularios reciben la referencia al formulario. A través de esta referencia es posible ingresar a los espacios del formulario, ingresar/definir el valor de un espacio e ingresar/definir el estado de presentación del espacio. Los detalles de cada evento se presentarán en las próximas secciones de este documento.

El Fluig puede utilizar el log de ejecución en los eventos de personalización. A través de la variable log es posible obtener un feedback respecto a la ejecución de cada evento. Existen cuatro niveles de log:

error: presentación de errores.
debug: depurar la ejecución.
warn: informar posible problema de ejecución.
info: presentación de mensajes.

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 La presentación de cada uno de los tipos de log está sujeta a la configuración del servidor de la aplicación. Por ejemplo, en JBoss ®, por patrón, los mensajes de tipo info y warn se presentan en la consola del servidor y las del tipo debug, error se presentan en el archivo de log. A continuación se indica un ejemplo respecto al uso del log en script:

Bloco de código

language	javascript

log.info(“Testando o log info”);

Tendríamos en la consola del servidor el mensaje “Probando el 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 statusEs posible saber el estado de edición de un formulario mediante la variable form informada como parámetro para los eventos de la definición formulario. Para ingresar al estado de edición:

Bloco de código

language	javascript

form.getFormMode()

La llamada a la funciónCalling the function form.getFormMode() devolverá una string con el modo de edición del formulario. Existen los siguientes valores para el modo de edición del formulario:

ADD: indicando modo de inclusión.
MOD: indicando modo de edición.
VIEW: indicando modo de visualización.
NONE: indicando que no hay comunicación con el formulario, por ejemplo, ocurre al momento de validar los espacios del formularios donde no está siendo presentado.

A continuación se detallarán los eventos disponibles para la personalización de una definición de formulario en Fluig.

AfterProcessing

Es el último evento a realizar para el fichero. El evento recibe como parámetro una referencia al formulario de la definición de formulario.

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.

ExampleEjemplo:

Bloco de código

language	javascript

function afterProcessing(form){
}

En el marco de este evento la variable form solo se puede utilizar para consultas a los espacios de la definición de formularios, sus valores y estado de presentaciónIn 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

Este evento se realiza después de crear un nuevo formulario. El evento recibe como parámetro una referencia al formulario de la definición de formulario.

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 formPara obtener el valor de un determinado espacio del formulario:

Bloco de código

language	javascript

 form.getValue("nome-do-campo")

EjemploExample:

Bloco de código

language	javascript

 function afterSaveNew(form) {
  log.info("Colaborador de abertura: " + form.getValue("RNC_colab_abertura"));
}

La consulta a los espacios del formulario es case insensitve. En el ejemplo anterior, podríamos obtener el valor del espacio utilizando The query to form fields is case insensitive. In the example above, we could get the field value using rnc_colab_abertura.

BeforeProcessing

Este evento es el primero a realizarse. Se produce antes de cualquier otro evento de la definición de formulario. El evento recibe como parámetro una referencia al formulario de la definición de formulario.

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.

ExampleEjemplo:

Bloco de código

language	javascript

function beforeProcessing(form){
}

En el marco de este evento la variable form solo se puede utilizar para consultar a los espacios de la definición de formularios, sus valores y estado de presentaciónIn 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

Este evento se realiza en el momento en que se presentan los objetos del formulario. El evento recibe como parámetro una referencia al formulario de la definición de formulario y la referencia para salida de presentación del formulario.

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 procedureEn este evento es posible modificar los valores a presentar en el espacio del formulario. Para esto basta utilizar el siguiente procedimiento:

Bloco de código

language	javascript

form.setValue(“nome-do-campo”, “valor”);

EjemploExample:

Bloco de código

language	javascript

 function displayFields(form, customHTML) {
   if ( form.getFormMode() == “MOD” ) {
     form.setValue('RNC_colab_abertura', new java.lang.Integer(1));
   }
}

Aún en el evento DisplayFields es posible utilizar tres métodos de forma independiente o conjunta para modificar la forma en qué se presenta la renderización del formulario, eliminar renglones de un fichero hijo y ocultar los botones “Imprimir” e “Imprimir en nueva Ventana”.

Para visualizar el formulario en el formato original con los espacios deshabilitados, se debe utilizar el método setShowDisabledFields.

Para habilitar o deshabilitar el botón de excluir en los renglones del fichero hijo, que por patrón está habilitado, se debe utilizar el método setHideDeleteButton.

Para ocultar los botones Imprimir e Imprimir en nueva Ventana, se debe utilizar el método setHidePrintLink.

Ejemplo de visualización sin utilizar los métodos.

Image Removed

Figura 11 - Ejemplo sin utilizar los métodos .

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 andEjemplo de utilización de los métodos setShowDisabledFields y setHidePrintLink:

Bloco de código

language	javascript

function displayFields(form, customHTML) { 
   form.setShowDisabledFields(true);
   form.setHidePrintLink(true);
}

Figura 12 - Ejemplo de utilización de los métodosFigure 12 – Example using the methods.

Ejemplo de visualización sin utilizar el método View example without using the method setHideDeleteButton:

Figura 13 - Ejemplo sin utilizar el métodoFigure 13 – Example without using the method.

Ejemplo utilizando el método Example using the method setHideDeleteButton:

Bloco de código

language	javascript

function displayFields(form, customHTML) { 
   form.setHideDeleteButton(false);
}

Figura 14 - Ejemplo de utilización de los métodos.

Es importante destacar que este evento es el único que permite la modificación de los valores a presentar en los espacios formulario antes de su renderización.

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 outputA continuación un ejemplo para utilizar la salida de presentación del formulario:

Bloco de código

language	javascript

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

Este evento se realiza en el momento que se habilitan los objetos del formulario, permitiendo deshabilitar algunos espacios, en caso sea necesario. El evento recibe como parámetro una referencia al formulario de la definición de formulario.

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 procedurePara habilitar o deshabilitar un espacio del formulario se debe ejecutar el siguiente procedimiento:

Bloco de código

language	javascript

 form.setEnabled("nome-do-campo",true/false)

Donde “true” habilita el espacio y “falso” deshabilita el campo.

Where "true" enables the field and "false" disables the field.

ExampleEjemplo:

Bloco de código

language	javascript

function enableFields(form) { 
    if ( form.getFormMode() != 'ADD' ){    
		form.setEnabled("rnc_area",false);
        form. setEnabled("rnc_tipo_ocorrencia",false);
    }
}

Cabe destacar que el evento ocurre al momento de la renderización del formulario y es el único que permite modificar el estado de presentación de los espacios del formulario.

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 belowOtra forma de deshabilitar los espacios es utilizando comandos JavaScript implementados directamente en funciones del formulario. Sin embargo, en este caso, no se permite utilizar la propiedad disabled, ya que los espacios no se grabarán al guardar la ficha. Para esta situación, se debe utilizar la propiedadreadonly según el ejemplo a continuación:

Bloco de código

language	javascript

document.forms['nomeForm'].nomeCampo.setAttribute('readonly',true);

InputFields

Este evento se realiza en el momento en que se informan los datos del formulario al BO responsable del formulario del Fluig. El evento recibe como parámetro una referencia al formulario de la definición de formulario. EjemploThis 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

language	javascript

function inputFields(form){
}

SetEnable

Este evento se puede ejecutar en diferentes eventos de las definiciones de formulario. Este evento no se implementa automáticamente en la personalización de la definición de formulario.

This event can be executed in different form definition events. This event is not implemented automatically in the customization of the form definition.

ExampleEjemplo:

Bloco de código

language	javascript

function setEnable() {
  log.info(“Teste de chamada de função”);
}
 
function displayFields(form, customHTML) {
  setEnable();
}

ValidateForm

Este evento se ejecuta antes de guardar los datos del formulario en el banco de datos. El evento recibe como parámetro una referencia al formulario de la definición de formulario. En caso de errores de validación de los datos del formulario ese evento responderá un mensaje de error.

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.

ExampleEjemplo:

Bloco de código

language	javascript

function validateForm(form) {
   if (form.getValue('RNC_colab_abertura') == null){
     throw "O colaborador de abertura não foi informado";
   }   
}

Visual controls

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

Controles visuales

En este capítulo demostraremos como interactuar con algunos tipos de controles de formularios que poseen características especiales, como por ejemplo, completar el contenido de un ComboBox utilizando Datasets.

El Fluig, por patrón realiza la importación de la biblioteca JavaScript en todos los formularios, excepto en los casos donde el formulario ya lo realice. En estos casos el Fluig identificará que el jQueri ya está definido y no realizará la importación nuevamente. En caso el formulario utilice otra biblioteca que pueda entrar en conflicto con el jQuery, será necesario definir en el formulario la variable javascript fluigjQuery, con valor false, que el Fluig dejará de realizar dicha importación, sin embargo algunas otras funcionalidades como la máscara de espacios del Fluig, también se deshabilitarán.

Máscara de Espacios

Muchos espacios en un formulario poseen un formato específico para su contenido, como datos, CEP, CPF entre otros.

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.

Field Mask

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 Para ayudar a los desarrolladores de formularios, el Fluig permite habilitar máscaras por espacio, basta informar el atributo "mask" y la máscara deseada a los objetos input del tipo text.

Bloco de código

language	javascript
title	Exemplo de utilização de máscaras

<input name="cep" type="text" mask="00000-000">

Para elaborar la máscara es posible utilizar:

To elaborate the mask, you can use:

Code	Description
0	Only Numbers.
9	Only numbers plus optional.
#	Only numbers plus recursive.
A	Numbers or letters.
S	Only letters from A-Z and
Código	Descrição
0	Solamente Números
9	Solamente números más opcional.
#	Solamente números más recursivos.
A	Números o letras.
S	Solamente letras entre A-Z y 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
En caso la importación de la biblioteca jQuery esté deshabilitada a través de la variable fluigjQuery, la funcionalidad de máscaras también estará deshabilitada If the import of the jQuery library is disabled through the fluigjQuery variable, the mask feature will also be disabled.

ComboBox

Generalmente es necesario popular un ComboBox de un formulario con un determinado grupo de valores.

En el Fluig esto es posible a través de la utilización de Datasets. Los Datasets son servicios de datos patrón disponibles por el Fluig, como por ejemplo, el servicio de “Volúmenes” del producto.

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 constructionPara habilitar el Dataset en el ComboBox basta utilizar la siguiente construcción:

Bloco de código

language	javascript

<select name="RNC_volume" id="RNC_volume" dataset="nome-dataset" datasetkey="chave" datasetvalue="valor" addBlankLine=”false”></select>

DondeWhere:

dataset es el nombre del Datasetis the Dataset name.
datasetkey es la clave del registro.
datasetvalue es el valor de un determinado espacio del registro.
addBlankLine es lo que define si el primer renglón del combo será un valor en blanco.
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.

ExampleEjemplo:

Bloco de código

language	javascript

<select name="RNC_volume" id="RNC_volume" dataset="destinationVolume" datasetkey="volumeID" datasetvalue="volumeDescription"></select>

En el ejemplo anterior realizamos una lista en un ComboBox con todos los Volúmenes registrados en el In the above example we are listing in a ComboBox all the Volumes registered in Fluig.

En caso sea necesario ordenar los datos provenientes de un dataset interno, indicamos la creación de un dataset personalizado que ejecute el interno y ordene los datos, antes de eliminar el componente combobox.

Para utilizar un ComboBox con solamente una opción no se deben utilizar carácteres especiales y espacio en el value da tag option.

Ejemplos:

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:

Correct wayForma correcta

Bloco de código

language	javascript

<select>
  <option value="te">Teste</option>
</select>

Forma IncorrectaIncorrect Way

Bloco de código

language	javascript

<select>
  <option value="te te te">Teste</option>
</select>

Zoom

Permite la consulta de entidades y otros formularios creados en el Fluig para que el usuario pueda seleccionar datos.

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 definitionEl acceso a este componente es realizado a partir de una llamada Javascript en el HTML de la definición de formulario.

Bloco de código

language	html/xml

"/webdesk/zoom.jsp?datasetId="+dataset+"&dataFields="+campos+"&resultFields="+resultFields+"$type="+"&title="+titulo

DondeWhere:

title: es el título para la ventaja de zoomis the title for the zoom window.
datasetId: es el nombre del is the name of the dataset (Built-in, CardIndex o or Customized).
dataFields: son los nombres de los espacios a presentar.
resultFields: son los espacios que se deben devolver al registro seleccionado por el usuario.
likeField: el nombre del espacio para filtro de datos (si es necesario)
likeValue: el valor a usar en el filtro de datos (si es necesario)

ATENCIÓN: Este parámetro sólo es válido para datasets internos. Datasets personalizados no permiten utilizar filtros.

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 formPara obtener el registro seleccionado por el usuario debemos agregar la siguiente función JavaScript al formulario del proceso:

Bloco de código

language	html/xml

function setSelectedZoomItem(selectedItem) {               
}

Donde selectItem es el registro seleccionado por el usuario en la ventana de zoomWhere selectItem is the record selected by the user in the zoom screen.

Nota

title	Importante

La misma función “setSelectZoomItem” se utilizará para recibir el resultado de todas las llamadas al zoom. Así, para diferenciar cada llamada se ha creado el parámetro type. Este parámetro se devuelve en selectedItem y se puede utilizar para diferenciar las llamadas al zoom.

Important

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 recordPara ingresar un espacio del registro seleccionado:

Bloco de código

language	html/xml

selectedItem["fieldName"]

Donde fieldName es el nombre del espacio de devolución que se ha definido en la llamada de zoom. Para obtener el registro componente de Zoom del Fluig se ha desarrollado para permitir que el recurso de zoom se utilice en definiciones de formularios.

Para que sea posible visualizar y rescatar información de los espacios “metadatos” del formulario, es necesario utilizar la siguiente nomenclatura:

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_id	Devuelve el código de la ficha
medatata_version	Devuelve la versión de la ficha
metadata_parent_id	Devuelva el código de la carpeta PadreReturns the Parent folder code
metadata_card_index_id	Devuelva el código del ficheroReturns the card index code
metadata_card_index_version	Devuelva la versión del ficheroReturns the card index version
metadata_active	Versión activa

Active version

Below is an example of code used for viewing and recovering these valuesA continuación un ejemplo de código utilizado para visualizar y rescatar estos valores:

Bloco de código

language	html/xml

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

La utilización de la PK en los filtros al utilizar dataset de Grupo, Papel o Colaborador es opcional, sin embargo se debe utilizar el mismo valor en la URL del zoom para obtener el valor seleccionado, según el ejemplo a continuación

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

language	html/xml

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');">

Para utilizar filtros la llamada es similar al del dataFields.

To use filters, the call is similar to that of dataFields.

For exampleSigue el ejemplo a continuación:

Bloco de código

language	html/xml

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");

En este ejemplo, el zoom devolverá solamente las fichas inactivasIn 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

En situaciones donde los datos de los elementos externos al Fluig son muy voluminosos, se recomienda la construcción de una aplicación externa al Fluig que realizará el papel de zoom para el usuario. A continuación se describirá una técnica JavaScrip donde será posible llamar una aplicación externa y la misma podrá retornar el dato solicitado por el usuario a un espacio del formulario del Fluig.

El primer paso para implementar esta técnica es crear una lógica en JavaScript que abrirá una nueva ventana llamando la aplicación externa que funcionará como zoom para el formulario. Vamos a utilizar y explicar el comando window.open en este ejemplo:

Bloco de código

language	html/xml

Window.open(URL Aplicação Externa, Nome da Janela que será aberta, comandos adicionais)

DondeWhere:

URL Aplicación Externa: Es la url de la aplicación externa que funcionará como zoom para el Fluig. EjExternal Application URL Is the url of the external application that will function as zoom for Fluig. E.g.: http://servidor/applications/forneczoom.asp.
Nombre de la Ventana: Nombre de la ventana que utilizará el navegador del usuario como identificador. Para evitar la sobreposición del contenido en ventana, se recomienda que a cada zoom llamado por un mismo formulario se agregue un nombre diferente. Ej: “ZoomFormec”.
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.Comandos Adicionales: Comandos adicionales utilizados para crear la ventana que contendrá la aplicación zoom. Ej: “width=230, height=230”.

Informações

title	NotaNote

Debido a una restricción de los navegadores, la url del programa de zoom externo al Fluig deberá estar en el mismo dominio que se encuentra el Fluig. En caso contrario no será posible atribuir al espacio del formulario el valor elegido para el zoom. Este problema ocurrirá porque los navegadores prohíben la práctica de codificación JavaScript cross-domain.

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 windowEl código a continuación programará un formulario del Fluig conteniendo un espacio y un botón lateral que invocará la ventana de la aplicación externa.

Bloco de código

language	html/xml

<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>

El segundo paso consiste en programar dentro de la aplicación externa una función JavaScript que devuelva al campo del formulario el valor elegido al usuario en la aplicación externa. Esta aplicación externa se podrá desarrollar en cualquier tecnología de desarrollo web existente en el mercado donde la misma pueda realizar la ejecución de scripts JavaScript al lado del cliente. A continuación se indica un ejemplo de una función JavaScript que informa el valor al espacio del formulario.

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

language	html/xml

<script language=”JavaScript”>
   function elegirescolha(valor) {
       // ElThe siguientefollowing renglónline pruebatests siwhether la ventana del formulario del the fluig queform abriówindow lathat ventanaopened dethe zoom window aúnis estástill abiertaopen
       if (window.opener && !window.opener.close) {
              // establecesets elthe valorvalue informadofor althe espaciofield
              window.opener.document.(id del form enid elin formularioFluig fluigform).(nombrefield del camponame).value = valorvalue;
       }
       // CierraCloses lathe ventanazoom de la aplicación zoomapplication window
       window.close();
   }
</script>

DondeWhere:

Id del form en el formulario Fluig: En caso de que se haya definido algún id para el tag <form> en el formulario del Fluig, es interesante realizar una referencia en este comando. Se puede utilizar también la referencia de colección forms dentro del comando (forms[posiciónForm 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]).
EjE.g.: ProveedorFormFornecedorForm, forms[0].

Nombre del espacio: Nombre del espacio que recibirá el valor informado a la función.
EjField Name: Name of the field that will receive the value passed to the function.
E.g.: cod_proveedfornec.
Valor: Datos que se informará al espacio del formulario del FluigValue: Data that will be passed to the Fluig form field.

El ejemplo a continuación programará un ejemplo de zoom externo realizado enteramente en HTML con datos estáticos apenas para ilustrar. Los datos de zoom provienen de cualquier fuente sea esta interna o

externa al 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

language	html/xml

<html>
  <head>
  <title>Lista<title>List deof proveedores<suppliers</title> 

<script language="JavaScript"> 
function elegirescolha(valor) { 
  // PruebaOpener de validez del Openervalidity test 
  if (window.opener && !window.opener.closed) { 
      // grabandowriting elthe valorvalue delof espaciothe cod_fornec field 
      window.opener.document.forms[0].cod_fornec.value = valor; 
  } 
   window.close(); 
} 
</script>
 
  </head>
  <body>   
  <!-- LosThe datosdata abelow continuaciónare estánfixed fijosbut perocould sebe podríanmounted configurarfrom a partir de cualquier origenany source. --> 
  <table border="1" cellpadding="5" cellspacing="0"> 
  <tbody><tr bgcolor="#cccccc"><td colspan="2"><b>Exemplo><b>ECM aplicacaoapplication ECM<example</b></td></tr> 
  <tr bgcolor="#cccccc"><td><b>Codigo<><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> 
  <!-- Fin de los datos-End-of-data-> 
  </body>
</html>

Para colocar un ejemplo en práctica en el el producto, se debe publicar la definición del formulario e informar el archivo del zoom externo como anexo de la definición de formulario.

Ejemplo de Zoom.zip

Al hacer clic en uno de los ítems de la pantalla de zoom aparecerá la función JavaScript elección que enviará el valor al campo cod_fornec en el formulario do Fluig.

Servicios de Datos

El Flui posee integración con dos tipos de servicios de datos, estos son: Dataset y Servicios Externos. Ambos se pueden utilizar en todos los eventos disponibles para personalizar la definición de formulario.

Dataset

Es un servicio de datos que provee acceso a la información, independiente del origen de los datos. El Fluig provee Datasets internos que permiten el acceso a entidades, como Usuarios, Grupo de Usuarios, entre otros. Consulte el registro de Datasets del Fluig para obtener la relación completa de los Datasets disponibles y sus respectivos espacios.

Informações

title	Nota

Los ejemplos a continuación utilizan la función getDatasetValues, disponible solamente para los Datasets de entidad y definición de formulario (cuando se informa el número de la definición de formulario). Para utilizar los Datasets personalizados consulte la Guía de Referencia Personalización de Datasets.

En la función getDatasetValues, NO se devolverán los valores de todos los espacios por cuestiones de seguridad. Para obtener todos los datos se utiliza el DatasetFactory, ejemplificado en Personalización de Datasets.

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.

Data Services

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

title	Note

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 definitionPor ejemplo, para ingresar el Dataset de usuarios del Fluig en el evento displayFields de una definición de formulario:

Bloco de código

language	html/xml

function displayFields(form,customHTML) {
     // ObteniendoGetting elthe usuariouser a travésvia de 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"));
}

También se puede realizar una llamada a los Datasets dentro de la definición de formulario a través de funciones JavaScriptIt is also possible to call the Datasets within the form definition through JavaScript functions.

El

acceso a los Datasets también se puede realizar directamente en el formulario de la definición de formulario. Por ejemplo, para ingresar el Dataset de usuario e ingresar los valores en los espacios del HTMLAccess 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

language	html/xml

  <html>
    <head>
        <title>
            PruebaTeste 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("NingúnNo UsuarioUser EncontradoFound");
				}
            }
        </script>
    </head>
    <script src="../vcXMLRPC.js"></script>
    <body onload="init()">
    <form id="form1">
        <b> NombreUser del UsuarioName: </b>
        <input type="text" name="colleagueName" id="colleagueName" />
	    <br><br>    
		<b> MatrículaUser del UsuarioRegistration: </b>
        <input type="text" name="colleagueId" id="colleagueId" />
		<br><br>
		<b>Login<b>User del UsuarioLogin:</b>
        <input type="text" name="login" id="login" />
        <br><br>            
		<b> RamalUser del UsuarioExtension: </b>
        <input type="text" name="extensionNr" id="extensionNr" />
        <br><br>
        <b> GrupoUser del UsuarioGroup: </b>
        <input type="text" name="groupId" id="groupId" />
        <br><br>
        <b> Correo electrónico del UsuarioUser Email: </b>
        <input type="text" name="mail" id="mail" />
        <br><br>
    </form>
    </body>
</html>

El Dataset para definir el formulario utiliza la misma llamada del Dataset de entidades, como en el caso del usuario. Mientras al contrario de pasar como parámetro el nombre del Dataset informaremos el número de la definición de formulario, por ejemplo

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

language	html/xml

function displayFields(form,customHTML) {
     // ObteniendoGetting elthe usuariouser avia través de dataset.
     filter = new java.util.HashMap();
     filter.put("RNC_nr_solicitacao",new java.lang.Integer(20));
     fichas = getDatasetValues(Number(676),filter);
	 log.info("UsuarioUsuário de AperturaAbertura: "+ fichas.get(0).get("RNC_colab_abertura"));
}

Download de ejemplo de Formulario Combobox y of example of Form Combobox and Dataset: form.html.

DataService

Es un servicio de datos que permite el acceso de aplicaciones de terceros a través del Fluig. Este servicio de datos soporta dos tipos de conexión, estos son: AppServer del Progress® y Web Services.

Los servicios de datos se registran y configuran a partir de la función Visualización de Servicios del Fluig Studio.

Para más información sobre el registro de los servicios, consulte: Integración con Aplicaciones Externos. Y para información sobre el uso de los productos en los eventos, consulte:; Personalización de Workflow.

Padre Hijo

La técnica Padre X Hijo ha sido modificada y ahora la posición del tag tablename se realiza dentro del tag "table" en el código html.

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.

Parent Child

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 followsEn el nuevo modelo implementado ahora el procesador del fichero aplicará los cambios de padre hijo de la siguiente manera:

<table tablename="pruebateste"> - La propriedad tablename determina que ahora abajo de esa tabla se implementará un sistema de padre hijo dentro de la definición de formulario. La etiqueta < table > tendrá sus barridos en la búsqueda de otros parámetros relacionados a la técnica que se explicarán más adelante en este texto. Se creará una otra <table> alrededor de la tabla principal que contendrá un botón que permite agregar nuevos hijos. Esto no ocurrirá apenas en los casos en que la propiedad noaddbutton también se ha informado en conjunto con la propiedad tablename.

<TR> (primero abajo del table) - El primer tag de <TR> encontrada dentro de la tabla se visualiza como un tag que contendrá los labels de la tabla padre hijo a esta tag se agregará una columna <TD> conteniendo el ícono y la función de eliminar hijos existentes en ventana. Esta nueva columna será la primera columna a la izquierda de la tabla.

<TR> (Segundo abajo del table) - La técnica padre hijo ocultará el renglón <TR> original, y transforma en su “template mestre” para crear hijos de aquellos tabla. Cada vez que se activa el botón “nuevo” todo el conjunto de espacios existentes dentro de este segundo <TR> se replicará en la ventana con los datos iniciales definidos para estos espacios.

</table> - Fin del objetivo de la técnica.

La técnica también soporta nuevos atributos que se pueden pasar y utilizar para personalizar la técnica padre e hijo. Son ellas:

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 objectnoaddbutton - Remueve el botón “agregar” de la ventana en el momento de la edición del formulario. Esto permite al desarrollador elegir donde colocará la función que creará los hijos en ventana pudiendo amarrar la llamada de la función en un link texto o una figura u otro objeto del html.

Bloco de código

language	html/xml

<table tablename="teste" noaddbutton=true>

nodeletebutton - Remueve el botón “papelera” de la ventana en el momento de la edición de la ficha. Esto permite al desarrollador impedir la eliminación de los registros o definir otra forma de ejecutar la función que removerá los hijos de la tablaRemoves 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

language	html/xml

 <table tablename="teste" nodeletebutton=true>

addbuttonlabel - Determina que texto será colocado en el botón de agregar hijos de la técnica. En caso que no se indique el botón vendrá con el texto patrón (nuevo) 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

language	html/xml

 <table tablename="testetest" addbuttonlabel="AdicionarAdd novonew ingredienteingredient">

addbuttonclass - Permite definir que clases css será utilizada por el botón. Esa clase css deberá estar disponible en el documento html del ficheroAllows 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

language	html/xml

 <table tablename="teste" addbuttonclass="wdkbuttonClass">

deleteicon - Permite determinar que imagen funcionará como icono de la eliminación de hijos en ventana. Esta imagen deberá ser un anexo de la definición de formulario, y se deberá informar en la clase como cualquier imagen utilizada como anexo en la definición de formularioAllows 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

language	html/xml

<table tablename="teste" deleteicon="teste.jpg">

customFnDelete - Permite la personalización de la función que aparece al presionar clic que elimina un hijo de la table. La función personalizada deberá estar disponible en el documento html de la definición de formulario y, obligatoriamente, llamar la función patrónAllows 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

language	html/xml

<table tablename="pruebatest" customFnDelete="fnCustomDelete(this)">
    function fnCustomDelete(oElement){
    //PersonalizaciónCustomization
	alert ("¡EliminandoDeleting hijochild!");
    // LlamadaDefault lafunction funcióncalled, patrón,DO NONOT RETIRAR.REMOVE
    fnWdkRemoveChild(oElement);
    //PersonalizaciónCustomization
    alert ("¡HijoChild eliminadodeleted!");
}

Es posible utilizar la combinación de uno o más atributos en la misma tabla padre hijo. No obstante si se utiliza la propiedad noaddbutton los valores de las propiedades addbuttonlabel y addbuttonclass serán ignorados. No se generará un mensaje de error en la publicación o apersonamiento de esta definición de formulario, sin embargo en el momento de la edición del formulario la misma no presentará el botón patrón que permite registrar nuevos hijos en la definición de formulario. La propiedad deleteicon no se afecta por la propiedad noaddbutton. Ejemplo de uso combinado de parámetros

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

language	html/xml

<table tablename="teste" addbuttonlabel="Adicionar novo ingrediente" addbuttonclass="wdkbuttonClass" deleteicon="teste.jpg">

Nota

La técnica

The Parent Child 2.0

Padre hijo no es compatible con la primera implementación. Definición de formularios que se han realizado con la primera técnica se deberán volver a trabajar para utilizar esta nueva técnica.

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

La técnica 2.0 del padre Hijo no acepta todos los componentes html, pero acepta los principales, siendo los homologados por el producto los tipos

: text, radio button, checkbox, select, select multiple, hidden, textarea, image

e

and button. Download

de ejemplo de Formulario Padre x Hijo

of Parent x Child Form example: form.htm.

Espacios de una tabla padre e hijo no estarán disponibles para utilizar como descripción de las fichas en la configuración del formulario.

Padre Hijo Radio Button

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 correctlyPara utilizar los espacios radio button, además de la definición patrón del componente html, es necesario que se utilice el atributo ‘value’ para que los datos se guarden correctamente.

Bloco de código

language	html/xml

<table border="1" tablename="pruebatest" addbuttonlabel="AgregarAdd HijoChild"  nodeletebutton="true">
	<thead>
		<tr>
			<td><b>Nome<<td><b>Name</b></td>
			<td><b>Idade<<td><b>Age</b></td>
			<td><b><font face =	"arial" size=5 color ="blue">Sim>Yes:</b></td>
		 	<td><b><font face = "arial" size=5 color ="blue">Não>No:</b></td>
	 	</tr>
	</thead>
	<tr>
		<td><input type="text" name="nombrehijonomefilho"></td>
		<td><input type="text" name="edadhijoidadefilho"></td>
 		<td><input type="radio" name="nameradiohijonameradiofilho" id = "idsimhijoidsimfilho" value="ant_yes"></td>
	 	<td><input type="radio" name="nameradiohijonameradiofilho" id = "idnaohijoidnaofilho" value="ant_no"></td>
	</tr>
</table>

Parent Child Form Events

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.

getChildrenFromTable

This event returns a map with all the child fields of a Parent Child from its tablename.

getChildrenIndexes

This event returns the indexes of the records (rows) contained in a Parent Child from its tablename.

Example

Eventos de Formulario Padre Hijo

Para facilitar la manipular de los datos en una personalización de formularios que utilizan la técnica Padre Hijo, están disponibles los siguientes métodos: Ambos son llamados a partir del objeto form que se pasa como parámetro en las funciones de personalización de formularios.

getChildrenFromTable

Este evento devuelve un mapa con todos espacios hijos de un Padre Hijo a partir de su form

getChildrenIndexes

Este evento devuelve los índices de los registros (renglones) contenidos en un Padre Hijo a partir de su tablename.

Ejemplo

:

Bloco de código

theme	Eclipse
language	java

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 "ValorRequest Total da requisição não pode ser inferior aValue cannot be less than 100";
    }
}

Formularios para dispositivos móviles

Incluyendo la definición de formularios que soporten la visualización en dispositivos móviles, es posible ejecutar solicitudes Workflow a través de estos dispositivos y completar la información de la definición de formularios HTML, garantizando mayor movilidad y agilidad para realizar ejecuciones de solicitudes workflow.

Para incluir un nuevo fichero con soporte de dispositivos móviles, realice el procedimiento patrón para exportar la definición de formulario y seleccione los espacios que estarán en el formulario mobile en la ventana antes que termine la exportación. Después de realizar la exportación se incluirá, también, otro archivo HTML y señalizado como "mobile" en la carpeta forms del proyecto Fluig.

Vea la imagen a continuación en la ventana de selección mobile en la exportación de una definición de formulario.

Image Removed

Figura 15 - Definición de formulario mobile.

Después de realizar la exportación el formulario debe quedar según se indica a continuación:

Image Removed

Figura 16 - Resultado formulario mobile.

Padre Hijo para dispositivos móviles

Los espacios que emplean la técnica de padre e hijo no se añadirán en el formulario generado automáticamente para dispositivos móviles por el Fluig. Sin embargo el producto le permite desarrollar un formulario personalizado para dispositivos móviles consultando estos espacios.

Nota
La edición de espacios padre e hijo a través de dispositivos móviles no es posible, aún en formularios personalizados. Solamente consulta.

La consulta a los espacios padre e hijo en dispositivos móviles se realiza a través de funciones javaScript, disponibles dentro del objeto masterList al momento de exhibir el formulario. Son ellas:

getValue

Forms for mobile devices

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 fieldDevuelve un string con el valor de un espacio padre e hijo, recibiendo como parámetros el número de secuencia del hijo y el nombre del espacio.

Bloco de código

language	javascript

masterList.getValue(sequence,field);

getValues

Devuelve un objeto con todos los valores de los espacios padre e hijo, agrupados por el número de secuencia. Este método no posee parámetrosReturns 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

language	javascript

masterList.getValues();

getValuesBySequence

Devuelve un objeto con todos los valores de los espacios de una determinada secuencia. Recibe como parámetro el número de la secuenciaReturns an object with all the values of the fields of a given sequence. Receives the sequence number as parameter.

Bloco de código

language	javascript

masterList.getValuesBySequence(sequence);

getValuesByField

Devuelve todas as secuencias y valores de un determinado campo. Recibe como parámetros el nombre del espacioReturns all the sequences and values of a given field. Receives the name of the field as parameter.

Bloco de código
masterList.getValuesByField(field);

Ejemplos

Examples: Formularios Padre Hijo + Eventos.

Traducción de formularios

Parent Child Forms + Events

Translation of forms

To translate forms, you need to use the function Para traducir los formularios se debe utilizar la función i18n.translate (“literal"literal_de_la_traducción”) en los puntos del archivo HTML que se deben traducir, según el ejemplo a continuaciónda_tradução") in the sections of the HTML file that should be translated, as in the following example:

Bloco de código

language	html/xml

<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

Las literales y sus respectivos valores se informan en archivos de propiedades con la extensión .properties para cada uno de los idiomas deseados. Los idiomas soportados para la traducción son los mismos soportados por le Fluig.
Portugués

(pt_BR);

Inglés

English (en_US);

Español

Spanish (es).

Los archivos que contienen las literales tienen la siguiente nomenclatura:

The files containing the literals have the following naming convention:

Portuguese: nome_doPortugués: nombre_del_formulario_pt_BR.properties;
InglésEnglish: nombre form_del_formularioname_en_US.properties;
EspañolSpanish: nombrenome_deldo_formulario_es.properties.

Los archivos de propiedades se crearán según los pasos presentados a continuación

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	Passo1Step 1

Para generar los archivos de propiedades en la visión Explorador de Paquetes, se debe ingresar el archivo HTML del formulario a traducir, presionar clic con el botón derecho e ingresar a la opción Externalizar To generate the property files in Package Explorer, you should access the form’s HTML file to be translated, right click it and access the option Externalize Strings.

Figura

Figure 1 -

Menú Contextual Externalizar

Context Menu to Externalize Strings.

Card

id	2
label	Passo Step 2

Los archivos que contienen las literales son creados en la carpeta del formularioThe files containing the literals are created in the form folder.

Figura

Figure 2 -

Archivos Properties en la Carpeta del Formulario

Property Files in the Form Folder.

Card

id	3
label	Passo Step 3

Informe los valores correspondientes a las literales para el idioma de cada archivoProvide the values corresponding to the literals to the language of each file.

Figura

Figure 3 -

Edición de un Archivo Properties.

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 userAl exportar un formulario para el Fluig, los archivos de propiedades conteniendo las literales son publicados como sus anexos.
El formulario se presenta en el idioma que está configurado para el usuario corriente.

Árvore de páginas

Histórico da Página

Versões comparadas

Versão antiga 1

Nova versão Atual

Chave

Index

Statement <!DOCTYPE> HTML

FormController

Personalización de Formularios:

Customização de Formulários

Form Customization

AfterProcessing

AfterProcessing

AfterSaveNew

BeforeProcessing

DisplayFields

EnableFields

InputFields

SetEnable

ValidateForm

Visual controls

Controles visuales

Máscara de Espacios

Field Mask

ComboBox

Zoom

External Zoom

Servicios de Datos

Dataset

Data Services

Dataset

DataService

Padre Hijo

Parent Child

Padre Hijo Radio Button

Parent Child Radio Button

Parent Child Form Events

getChildrenFromTable

getChildrenIndexes

Eventos de Formulario Padre Hijo

getChildrenFromTable

getChildrenIndexes

Formularios para dispositivos móviles

Padre Hijo para dispositivos móviles

getValue

Forms for mobile devices

Parent Child pages for mobile devices

getValue

getValues

getValuesBySequence

getValuesByField

Traducción de formularios

Translation of forms