Cómo resaltar la celda activa en Google Sheets con Apps Script

En este tutorial vamos a crear un indicador visual en Google Sheets que cambia el color de la celda activa, así como de su fila y columna correspondientes. Esta técnica es súper útil para mejorar la lectura de informes y gráficos, ya que facilita la identificación rápida de dónde te encuentras en la hoja. Además, te mostraré cómo limitar el efecto solo a ciertas hojas específicas, para que tu archivo no se vuelva lento ni se aplique donde no quieres.

Si prefieres ver el tutorial en video, te lo dejo a continuación:

Paso 1: Configuración inicial del activador onSelectionChange

Primero, vamos a crear un script que se ejecute automáticamente cada vez que cambies la selección de celda. Para eso usamos el activador simple onSelectionChange, que se dispara al seleccionar otra celda. Este activador nos permitirá cambiar los colores de la fila, columna y celda activa.

1. Abre el editor de secuencias de comandos desde tu Google Sheets en Extensiones > Apps Script.
2. Crea un proyecto nuevo y copia el siguiente código:

function onSelectionChange(e) {
  var hoja = e.source.getActiveSheet();
  var nombreHoja = hoja.getName();

  // Limitar el efecto solo a hojas específicas
  if (nombreHoja !== 'Ventas' && nombreHoja !== 'Inventario') {
    return; // Salir si no es una de las hojas deseadas
  }

  var celdaActiva = hoja.getActiveCell();
  var filaActiva = celdaActiva.getRow();
  var columnaActiva = celdaActiva.getColumn();

  // Limpiar colores de toda la hoja para evitar acumulación
  hoja.getRange(1; 1; hoja.getMaxRows(); hoja.getMaxColumns())
    .setBackground('white')
    .setFontColor('black')
    .setFontWeight('normal');

  // Resaltar la fila y columna de la celda activa
  hoja.getRange(filaActiva; 1; 1; hoja.getMaxColumns()).setBackground('#D3D3D3'); // Gris claro
  hoja.getRange(1; columnaActiva; hoja.getMaxRows(); 1).setBackground('#D3D3D3'); // Gris claro

  // Resaltar la celda activa
  celdaActiva.setBackground('#0000FF').setFontColor('white').setFontWeight('bold');
}

Este código primero verifica el nombre de la hoja activa y solo ejecuta el resaltado si estás en las hojas «Ventas» o «Inventario». Así evitamos que el script corra en hojas donde no quieres que cambie el color.

Función para activar el script

Para que el activador funcione correctamente, solo necesitas ejecutar una vez esta función para que quede habilitado:

function activarSeleccionChange() {
  SpreadsheetApp.getActiveSpreadsheet().toast("Activador onSelectionChange habilitado.");
}

Guarda el proyecto y ejecuta activarSeleccionChange una vez desde el editor. Esto no hace mucho, pero es una buena práctica para inicializar el script.

Paso 2: Personalización de colores y estilos

Ahora que tenemos el indicador básico funcionando, puedes personalizar los colores y estilos para que se adapten a tu gusto o identidad visual.

• Color de fondo de la celda activa: Azul intenso (#0000FF), para que destaque bien.
• Color de texto de la celda activa: Blanco, para buen contraste.
• Negrita en la celda activa: Sí, para enfatizar.
• Color de fondo de la fila y columna activa: Gris claro (#D3D3D3), para no distraer demasiado.

Si quieres ir un paso más allá, puedes agregar bordes, cambiar tamaño de fuente o incluso modificar el color del texto de la fila y columna resaltadas. Aquí te dejo un ejemplo con bordes y tamaño de fuente:

function onSelectionChange(e) {
  var hoja = e.source.getActiveSheet();
  var nombreHoja = hoja.getName();

  if (nombreHoja !== 'Ventas' && nombreHoja !== 'Inventario') return;

  var celdaActiva = hoja.getActiveCell();
  var filaActiva = celdaActiva.getRow();
  var columnaActiva = celdaActiva.getColumn();

  hoja.getRange(1; 1; hoja.getMaxRows(); hoja.getMaxColumns())
    .setBackground('white')
    .setFontColor('black')
    .setFontWeight('normal')
    .setFontSize(10)
    .setBorder(false, false, false, false, false, false);

  hoja.getRange(filaActiva; 1; 1; hoja.getMaxColumns())
    .setBackground('#D3D3D3')
    .setFontSize(10);

  hoja.getRange(1; columnaActiva; hoja.getMaxRows(); 1)
    .setBackground('#D3D3D3')
    .setFontSize(10);

  celdaActiva
    .setBackground('#0000FF')
    .setFontColor('white')
    .setFontWeight('bold')
    .setFontSize(12)
    .setBorder(true, true, true, true, true, true);
}

Paso 3: Cómo restaurar la hoja a su estado original

Una pregunta común es cómo dejar la hoja como estaba originalmente, sin colores ni formatos aplicados por el script. Esto es un poco más avanzado porque el script borra los formatos cada vez que cambias de celda.

Una estrategia es guardar el formato original en otra hoja o en un rango oculto y, con un activador onOpen, restaurar esos formatos cada vez que abres el archivo. Sin embargo, implementar esto requiere un manejo cuidadoso de los datos y formatos, y puede ser un poco complejo si no tienes experiencia con Google Apps Script.

Si quieres profundizar en este tema, te recomiendo revisar algunos ejemplos avanzados en mi academia o en otros tutoriales específicos sobre manejo de formatos y activadores en Google Sheets.

Paso 4: Prueba y optimización

1. Prueba el código: Cambia de celda en las hojas Ventas o Inventario y observa cómo se resalta la fila, columna y celda activa.
2. Optimiza el rendimiento: Si notas que tu hoja se pone lenta, limita el rango de aplicación del script a un área específica de la hoja o añade condiciones para que solo funcione en rangos concretos.

Por ejemplo, puedes agregar una condición para que el script solo cambie colores si la celda activa está dentro de un rango específico, como A1:Z100:

function onSelectionChange(e) {
  var hoja = e.source.getActiveSheet();
  var nombreHoja = hoja.getName();

  if (nombreHoja !== 'Ventas' && nombreHoja !== 'Inventario') return;

  var celdaActiva = hoja.getActiveCell();
  var filaActiva = celdaActiva.getRow();
  var columnaActiva = celdaActiva.getColumn();

  // Definir rango permitido
  var rangoPermitido = hoja.getRange('A1:Z100');
  if (!rangoPermitido.getRow() <= filaActiva && filaActiva <= rangoPermitido.getLastRow() &&
      rangoPermitido.getColumn() <= columnaActiva && columnaActiva <= rangoPermitido.getLastColumn()) {

    hoja.getRange(1; 1; hoja.getMaxRows(); hoja.getMaxColumns())
      .setBackground('white')
      .setFontColor('black')
      .setFontWeight('normal');

    hoja.getRange(filaActiva; 1; 1; hoja.getMaxColumns()).setBackground('#D3D3D3');
    hoja.getRange(1; columnaActiva; hoja.getMaxRows(); 1).setBackground('#D3D3D3');
    celdaActiva.setBackground('#0000FF').setFontColor('white').setFontWeight('bold');

  } else {
    // Si la celda no está en el rango permitido, limpiar colores
    hoja.getRange(1; 1; hoja.getMaxRows(); hoja.getMaxColumns())
      .setBackground('white')
      .setFontColor('black')
      .setFontWeight('normal');
  }
}

Conclusión

Hemos creado un indicador visual en Google Sheets que resalta la celda activa, junto con su fila y columna, y aprendimos a limitar su aplicación solo a hojas o rangos específicos para evitar ralentizar el archivo. También hablamos de cómo restaurar el formato original, aunque eso puede ser un poco más avanzado.

Este tipo de indicadores son muy útiles para mejorar la experiencia al trabajar con grandes tablas o informes, facilitando la navegación y la interpretación de datos.

Si quieres aprender a usar Google Forms y Google Sheets desde cero, te invito a tomar un curso gratis de 2 horas.