¿Cómo puedo sumar elementos en un iterador que está dentro de un fragmento?

Sumar un elemento en todas las iteraciones existentes

Cuando tenemos un elemento en un iterador, nos puede interesar sumar su contenido en cada una de las iteraciones que se añadan, para mostrar el resultado de la suma en un campo que está fuera del iterador.

Los primero que haremos será configurar los eventos addIteration y removeIteration del iterador, luego configuraremos el evento change del campo que queremos sumar.

Configurar eventos del iterador

En el ejemplo que mostraremos a continuación, se define la suma de un campo que está en un iterador que a su vez está definido dentro de un fragmento.

Lo primero que haremos será definir las variables para el ID del iterador y el prefijo del fragmento, también definiremos las variables para el nombre del campo a sumar y el campo en el que mostraremos el resultado de la suma.

var idIterador = "[[iterator-suma]]";
var prefijoFragmento = idIterador.substr(0, idIterador.indexOf('iterator-suma'));

var nombreCampoSumar = "campo-1";
var nombreCampoSuma = prefijoFragmento + "resultado-suma-fuera-iterador";

A continuación, obtenemos los valores del campo que queremos sumar y añadimos una condición para que su valor sea cero en caso de que no se haya especificado ningún valor. También inicializamos las variables que usaremos para recorrer el iterador y para los cálculos.

var valores = wf.obtenerValor(nombreCampoSumar, idIterador)||0;
var i = 0;
var r = 0;

Sumamos los valores registrados en cada iteración. En la suma que mostraremos en el ejemplo veremos que se están sumando valores con cifras decimales por lo que usaremos parseFloat, para sumas con valores enteros usaremos parseInt.

for (i = 0; i<valores.length;i++){
	if (!isNaN(parseFloat(valores[i]))) {
 		r = r + parseFloat(valores[i]);
 }
}

Por último, mostramos el resultado en el campo que hemos definido para ese propósito.

// Si se quiere mostrar la suma final sin redondeo:
// wf.modificarValor(nombreCampoSuma, r);
// Si se quiere mostrar la suma final redondeada a dos decimales:
var resultado = parseFloat(r).toFixed(2);
wf.modificarValor(nombreCampoSuma, resultado);

Configurar evento en el campo a sumar

Ya hemos configurado los eventos del iterador, con esto garantizamos que la suma se actualiza cada vez que añadimos o eliminamos una iteración. Ahora debemos configurar el evento change del campo que queremos sumar, esto lo hacemos con el fin de garantizar que la suma también se actualiza cada vez que modificamos el campo que estamos sumando.

La configuración de este evento es muy parecida a la descrita en el aparatado anterior para los eventos del iterador, lo único que cambia es la definición de las variables para los ID de la iteración y el iterador:

var idIteracion = "[[]]";
var prefijoFragmento = idIteracion.substr(0, idIteracion.indexOf('iterator-suma'));
var idIterador = idIteracion.substr(0, idIteracion.indexOf('__-'));

El resto de pasos son idénticos al caso anterior, por lo tanto, ahora obtendríamos el valor del campo a sumar, definiríamos las variables a usar y procederíamos a realizar la suma.

var nombreCampoSumar = "campo-1";
var nombreCampoSuma = prefijoFragmento + "resultado-suma-fuera-iterador";

var valores = wf.obtenerValor(nombreCampoSumar, idIterador)||0;
var i = 0;
var r = 0;

for (i = 0; i<valores.length;i++){
	if (!isNaN(parseFloat(valores[i]))) {
 		r = r + parseFloat(valores[i]);
 }
}

// Si se quiere mostrar la suma final sin redondeo:
// wf.modificarValor(nombreCampoSuma, r);
// Si se quiere mostrar la suma final redondeada a dos decimales:
var resultado = parseFloat(r).toFixed(2);
wf.modificarValor(nombreCampoSuma, resultado);

Sumar dos campos que están dentro de un iterador en un fragmento

Si lo que queremos es sumar dos o más campos dentro del iterador y mostrar el resultado en un tercer campo dentro del iterador, debemos configurar el evento change de los campos que se usarán para la suma.

Primero debemos obtener el índice de la iteración en la que nos encontramos para poder acceder a los valores de los campos en esa iteración. También definimos las variables para construir el ID del iterador y el prefijo del fragmento.

var indice = wf.obtenerContextoPadre(this).indice;

var idIteracion = "[[]]";
var prefijoFragmento = idIteracion.substr(0, idIteracion.indexOf('iterator-suma'));
var idIterador = idIteracion.substr(0, idIteracion.indexOf('__-'));

A continuación obtenemos los valores de los campos que vamos a sumar y añadimos una condición para que su valor sea cero en caso de que no se haya especificado ningún valor.

var campo1 = wf.obtenerValor("campo-1", idIterador, indice)||0;
var campo2 = wf.obtenerValor("campo-2", idIterador, indice)||0;

Por último procedemos a realizar la suma y mostrar el resultado en un campo que está dentro del iterador.

var resultadob = parseFloat(campo1)+ parseFloat(campo2);
wf.modificarValor("resultado-suma-dentro-iterador", parseFloat(resultadob).toFixed(2), idIterador, indice);

Descarga ejemplo

Tienes disponible el código json del ejemplo de fragmento para su descarga y que puedas probarlo y adaptarlo a tus necesidades. Ver: prueba_suma_iterador.json