lunes, 23 de julio de 2012

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:

image

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”

image

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”

image

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

image

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

image

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>

10 comentarios:

Lo intento en SP2010 y no me funciona, sabras porqué?

La verdad no sé Manuel, es una solución que implementé en 2007, pero nunca la he probado en 2010... :-(

Hola, Juan Pablo.

Necesito una solución en JavaScript pero que me pueda ocultar campos en formularios de SharePoint 2013. La verdad, he andado buscando, pero sin resultados exitosos. Me podrías ayudar?..mi mail es fvega2401@gmail.com

Saludos cordiales,

No le he tenido que hacer en 2013, pero debería funcionar la misma idea con algunos ajustes de código.

Otra alternativa es ir por formato condicional con SharePoint Desginer: http://social.msdn.microsoft.com/Forums/sharepoint/en-US/4c366cd9-dd84-440c-bdbc-30ee2c81876e/conditionally-hide-a-field-in-a-custom-form-using-sharepoint-designer

Y acá hay otra solución con un componente que no probé: https://www.youtube.com/watch?v=58p0b8vGioI

Hola,

Ante todo, muchísimas gracias. Descubrir este blog me ha abierto una puertas que me han dado mucho terrero por investigar.
Soy un autodidacta de SP y mis tiempos de programación se pararon hace muchos años en Cobol y TransTools.
He podido implementar esta solución y aprovecharla para el control de varios campos dentro de un mismo Form.
El problema que me encuentro ahora es que no he encontrado forma alguna para hacer lo mismo en el DispForm y el EditForm.

Gracias de nuevo.

Hola Rafael, por nada. Para editar esos formularios, tienes que agregar en la URL a la derecha lo siguiente:

?toolpaneview=2

Este comentario ha sido eliminado por el autor.

Muchas gracias por tu respuesta.

Me expliqué mal. Realmente lo que no consigo que funcione es dentro de una CEWP. Creo que el problema está en la función "retornar_id_control". En el NewForm devuelve el valor del campo pero si la aplico en el DispForm devuelve "undefined". En el EditForm creo que ocurre lo mismo.
He probado también a incluirlo dentro de un "$(document).ready" para controlar (creo) que se ha cargado correctamente, pero nada.

Gracias, cualquier comentario será muy valioso para mi.

Rafael, quizá este link te ayude http://surpoint.blogspot.com.ar/2013/03/master-detail.html

Este también Rafael: http://surpoint.blogspot.com.ar/2013/12/relaciones-de-maestro-detalle-en.html

Publicar un comentario en la entrada