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>