Acababa de terminar de publicar la guía 68 que trata de cambio del color de fondo dependiendo del valor del campo en tipo de entrada de selector radio, cuando en el foro de usuarios de Xlinesoft apareció  otro usuario preguntando lo mismo pero en el tipo de entrada de “hola de cálculo” y me puse hacer un ejemplo para dar solución a ese caso.

 

Objetivo

Cambiar el fondo del campo en los campos de tipo Selección en una entrada de información del tipo “hoja de cálculo”.

DEMO: https://fhumanes.com/excel_color/

Solución Técnica

La verdad es que este tipo de entrada de datos no me gustaba mucho, porque hay poco control sobre la entrada de datos y desconocía qué eventos se “disparaban” en la ejecución del programa.

De lo más importante que os puedo explicar es que aunque parece que estamos en un EDIT INLINE, no se utilizan los eventos de EDIT.

Los eventos que se ejecutan en este tipo de solución son los de la página LIST (para los valores que existen  en la tabla) y los de ADD, para los nuevos registros que se dan de alta.

Una vez identificadas estas características he incluido este JavaScript:

var nameFields = ['radio1','radio2','radio3']; // Array all fields

function stateChange() {
    console.log("Inicio ejecución stateChange ");
    // Programación de los eventos de cambio
    var records = pageObj.getAllRecords();
    records.forEach( function( row, idx ) {
      var k = 0;
      while (k < nameFields.length) {
        var field = nameFields[k];
        var ctrl = Runner.getControl(row.recordId(), field);
        if (typeof ctrl !== 'undefined') {
          ctrl.on('change', function() {
            console.log('Evento en field: '+this.fieldName+', item: '+this.valContId);
            putColor(this);
          });
        }
        k++;
      }
    })
    // Color change to all fields
    var records = pageObj.getAllRecords();
    records.forEach( function( row, idx ) {
      var k = 0;
      while (k < nameFields.length) {

        if (row.getFieldValue(nameFields[k]) != '' ) {
           var ctrl = Runner.getControl(row.recordId(), nameFields[k]);
           putColor(ctrl);
            }
        k++;
      }
    });

}

// Put the background-color to the field
function putColor(ctrl) {
  var field_value = ctrl.getValue();
  switch (field_value) {
    case '1':
    ctrl.addStyle('background-color: "#F1C1C1"');
    // $(reference).next().css("background-color" ,"#F1C1C1");
     break;
    case '2':
    ctrl.addStyle('background-color: "#B0FCBB"');
    // $(reference).next().css("background-color" ,"#B0FCBB");
     break;
    case '3':
    ctrl.addStyle('background-color: "#F1EEEE"');
    // $(reference).next().css("background-color" ,"#F1EEEE");
     break;
    default:
     // console.log('Otro valor diferente de 1,2 y 3');
    ctrl.addStyle('background-color: white');
    // $(reference).next().css("background-color" ,"white");
    }
}

stateChange();

Este código está en el evento “JavaScript Onload Event”, de la página LIST y la página ADD.

La función que define los colores dependiendo del valor del campo es “putColot()“.

La función “stateChange“, hace 2 funcionalidades:

• Programa el evento “trl.on(‘change’, function()“, para tomar control cuando un campo cambia de valor.
• Pone el color que corresponda cuando se carga la página LIST.

Espero que os guste y os aporte ideas para hacer esto y otras cosas. Para cualquier duda, por favor, poneros en contacto conmigo a través de mi email [email protected]

Os dejo el proyecto para que lo podáis descargar en vuestro PC y podáis hacer todos los ajustes que necesitéis.