Etiquetas

, ,

Una  situación muy común en proyectos de Sharepoint es que se quiera personalizar el comportamiento de las paginas de agregar/ modificar ítems de las listas de manera que unos campos se muestren o se oculten según valores de otros campos de la lista. Una de las formas más sencillas de conseguir esto es  inyectando código javascript en nuetras paginas y a la vez esto podemos hacerlo de dos formas, una es editando nuestras paginas desde el Sharepoint Designer o la otra agregando un Content Editor web part a la pagina que queremos editar.

Para ver el ejemplo supongamos que queremos editar la pagina AddItem.aspx de una lista en específico, entonces tendríamos que ir a la página desde nuestro portal como si quisiéramos agregar un nuevo ítem y entonces agregar el Content Editor web part, pero antes de esto nos daremos cuenta que la vista por defecto de la página no nos deja editarla, por lo que tendremos que agregar a la URL &ToolPaneView=2, esto no colocara la página en modo de edición y agregara el Edit Page al menú de acciones del sitio.

En este ejemplo podemos ver como agregar el Content Editor web part y como configurarlo, la diferencia en este caso será el código javascrip que vamos a insertar.

Este es el código JavaScript que nos valdría para hacer lo que queremos.

<script type=”text/javascript”>

//Hacemos que se ejecute la function despues que se ha cargado la pagina

_spBodyOnLoadFunctionNames.push(“HideField”)

function HideField ()

{

//Agregamos el método onchange a un campo del  tipo select

getField(‘select’,’Estatus’).onchange = function() {CambiaEstatus()};

}

//Función que nos devuelve un control basado en su tag y titulo

function getField(fieldType,fieldTitle) {

var docTags = document.getElementsByTagName(‘fieldTitle );

for (var i=0; i < docTags.length; i++) {

if (docTags[i].title == fieldTitle) {

return docTags[i]

}

}

}

function CambiaEstatus () {

//obtenemos el valor de control select

var a =getField(‘select’,’Estado Oferta’).options[b].text;

//si tiene un valor determinado por nosotros escondemos otro campo del formulario en este caso el campo Estado

if (a==”Estatus X”)

{

var control =getField(‘select’,’Estado’);

//Realmente estamos escondiendo la fila de la table a la que pertenece el control

control.parentNode.parentNode.parentNode.style.display=”none”;

}

}

</script>