JUAN PABLO PUSSACQ LABORDE

Ocultar columnas en base al valor de otra columna en SharePoint 2007

Introducción

En este breve artículo vamos a explicar cómo ocultar o mostrar columnas en base al valor que tome una columna en la pantalla NewForm.aspx. La solución la implementaremos a través de jQuery y JavaScript dentro de una CEWP (content editor webpart).

Comportamiento de la pantalla

Imaginemos que tenemos una pantalla de alta que posee una columna llamada “SiNo” y que dependiendo del valor de esa columna, queremos que se muestren u oculten otras columnas. Si el valor de la columna “SiNo” es “Si”, entonces queremos que la pantalla se vea de esta manera:

Pero si el valor de la columna “SiNo” es NO, entonces queremos que se oculte el campo “Eleccion” y se muestren los campos “Texto” y “Busqueda”

Enfoque de la solución

Para ello trabajamos con una solución que agrega un evento “click” en la casilla de verificación “SiNo”. Este evento oculta o muestra campos en base al valor de esta casilla.

Esta porción de código está realizada con jQuery y está basada en la idea de este artículo: http://www.codeproject.com/Articles/252468/Hide-column-in-SharePoint-custom-list-based-on-val

La forma de encontrar, ocultar y mostrar columnas en SharePoint se realiza a través de JavaScript, aprovechando los comentarios de SharePoint que indican los nombres internos de las columnas. Nos basamos en este artículo: http://www.cleverworkarounds.com/2008/02/28/more-sharepoint-branding-customisation-using-javascript-part-2/

Configuración del código

Para utilizar el código, podemos pegar el mismo en una CEWP o integrarlo dentro de alguna librería JavaScript. El código posee tres partes a configurar:

1. La indicación de cuál es el campo que nos permite decidir qué campos mostrar u ocultar. Debe ser un campo de tipo “Si/No”

2. La especificación de los campos a mostrar u ocultar cuando el valor es Si

3. La especificación de los campos a mostrar u ocultar cuando el valor es No

Código de la solución

Por último les dejo el código completo, espero les sea útil. Hasta la próxima!

<!--

Esta función oculta y muestra un conjunto de columnas de acuerdo al valor de un campo Si/No
Se aplica dentro de una CEWP en la página NewForm.aspx

Utiliza una variante de la función de CleverWorkarounds para ocultar y encontrar controles de SharePoint
http://www.cleverworkarounds.com/2008/02/28/more-sharepoint-branding-customisation-using-javascript-part-2/

Utiliz una variante de la función de CodeProject para agregar el evento click con jQuery a una columna Si/No
http://www.codeproject.com/Articles/252468/Hide-column-in-SharePoint-custom-list-based-on-val

Requiere jQuery

El código puede ser insertado dentro de una CEWP

-->

<script src="/internal/jquery-1.7.2.min.js">
</script>  

<script type="text/javascript">

OcultarMostrarCondicional ('SiNo'); // Internal Name del campo de tipo Si/No que decide
     
/* Completar en esta función los controles a mostral u ocultar cuando la opción es SI */

function OcultarMostrar_Cuando_SI () {
    ocultar_control('Texto');
    ocultar_control('Busqueda');
    mostrar_control('Eleccion');
}

/* Completar en esta función los controles a mostral u ocultar cuando la opción es NO */

function OcultarMostrar_Cuando_NO () {
    mostrar_control('Texto');
    mostrar_control('Busqueda');
    ocultar_control('Eleccion');
}

/*************************************/
/* A PARTIR DE ACA NO MODIFICAR NADA */
/*************************************/

function OcultarMostrarCondicional (CampoSiNo) {

    // Busco el campo Si/No que decide que campos ocultar y qué campos mostrar
    var SiNo = retornar_id_control(CampoSiNo);

    // Situación predeterminada de la pantalla
    if($("#"+SiNo).is(':checked')) {
        OcultarMostrar_Cuando_SI ();
    }
    else {
        OcultarMostrar_Cuando_NO ();
    }


    // Agrego el evento click
    $("#"+SiNo).bind('click',function() { 

        if($(this).is(':checked')) {                   
            OcultarMostrar_Cuando_SI();
         }
         else {
            OcultarMostrar_Cuando_NO();
         }
    });    

    }

function ocultar_control (FieldName) {
   var arr = document.getElementsByTagName("!");
   for (var i=0;i < arr.length; i++ ) {
      if (arr[i].innerHTML.indexOf("FieldInternalName=\""+FieldName+"\"") > 0) {
          arr[i].parentNode.parentNode.style.display="none";
          }
      }
   }

function mostrar_control (FieldName) {
   var arr = document.getElementsByTagName("!");
   for (var i=0;i < arr.length; i++ ) {
      if (arr[i].innerHTML.indexOf("FieldInternalName=\""+FieldName+"\"") > 0) {
          arr[i].parentNode.parentNode.style.display="inline";
          }
      }
   }

function retornar_id_control (FieldName) {
   var arr = document.getElementsByTagName("!");
   for (var i=0;i < arr.length; i++ ) {
      if (arr[i].innerHTML.indexOf("FieldInternalName=\""+FieldName+"\"") > 0) {
         return arr[i].parentNode.lastChild.firstChild.id;
          }
      }
   }

</script>