miércoles, 11 de diciembre de 2013

Relaciones de Maestro Detalle en SharePoint 2007 con jQuery (simple y efectivo)

Introducción

Un requerimiento que siempre surge en SharePoint tiene que ver con manejar relaciones de maestro-detalle. He visto y utilizado diferentes formas, con ventajas y desventajas que siempre dependen del escenario en que nos encontremos. En este artículo vamos a mostrar un ejemplo para WSS 3.0 que utiliza programación del lado del cliente.

Funcionalidades que necesitamos

En esta lista detallo lo que necesitamos. A lo largo del artículo veremos cómo implementaremos cada caso:

· ¿Cómo vincular en las listas al padre y al hijo?

· ¿Cómo mostrar los hijos de un padre?

· ¿Cómo tener un botón que dispare la creación un hijo para el padre seleccionado?

· ¿Cómo crear un hijo sin tener que completar manualmente los datos del padre?

· ¿Cómo ocultar los datos del padre en el momento de editar el hijo?

¿Cómo vincular en las listas el padre y al hijo?

Para vincular, yo prefiero usar el campo ID del padre como referencia en el hijo. No creo que ese campo necesite ser de tipo “búsqueda”, con lo cual, simplemente creamos en el hijo un campo con estas características:

· Nombre = Padre (o lo que se adapte mejor a nuestro caso)

· Tipo = Texto

· Obligatorio

¿Cómo mostrar los hijos de un padre?

Una forma sencilla para evitar programación es usar las conexiones entre elementos web. Con lo cual, simplemente creamos una página de elementos web en donde:

· Agregamos en la parte superior una lista del padre

· Agregamos en la parte inferior la lista con los hijos

· Conectamos los dos elementos web, vinculando el ID del elemento web de arriba con el Padre del elemento web de abajo.

¿Cómo tener un botón que dispare la creación un hijo para el padre seleccionado?

Para disparar la creación de un hijo, vamos a agregar un botón llamado “Nuevo” en cada fila de la lista padre. Este botón puede ser simplemente un enlace. En principio existen al menos tres enfoques para agregar este botón:

· Mediante un flujo de trabajo

· Mediante un manejador de eventos

· Mediante código JavaScript

En este caso vamos a trabajar con código JavaScript. ¿Por qué? Porque las dos primeras opciones son asincrónicas y puede generar la necesidad de que el usuario tenga que actualizar la pantalla luego del alta del padre, para poder ver el botón “Nuevo”. Esto es difícil de explicar al usuario final.

Nuestro enfoque consistirá en:

· Un elemento web de edición de contenido (CEWP) que ejecute código Java Script que reemplace la columna ID por el nuevo botón.

· Para ello trabajaremos con jQuery

· El contenido de la CEWP lo almacenaremos en un archivo en una librería, para facilitar futuros cambios: maestro_dedalle_boton_nuevo.html

A continuación vemos el código necesario.

 

<script type="text/javascript">

// Agregar esta CEWP debajo de la vista de la lista Padre

// Parámetros importantes

// Posición en que se encuentra la columna ID

var posicion_id = 3;

// Nombre de la lista hija

var lista_hija = "Registros SP";

// Texto para el botón o imagen

var texto_boton = "<img style='border: none;' src='/_layouts/images/itann.gif'/ title='Agregar registro' >";

// Estilo del botón nuevo

var estilo_boton = "";

// Título columna

var titulo_columna = "Agregar";

// Fin de Parámetros importantes

// Id de ítem

var identificador;

// URL del sitio

var sitio= window.location.href;

var origen = encodeURIComponent(sitio);

var posicion_listas = sitio.indexOf("Lists/");

sitio = sitio.substring(0, posicion_listas);

// URL de nuevo elemento en el hijo

var nuevo_hijo = sitio + "Lists/" + lista_hija + "/NewForm.aspx?source=" + origen + "&padre=";

// Cambiar Título de columna

$(".ms-listviewtable > tbody > tr > th #diidSortID").text(titulo_columna);

// Cambiar columna

// Asumo que la lista usa la vista standar que posee la clase .ms-listviewtable

$(".ms-listviewtable > tbody > tr > td:nth-child("+posicion_id+")").each(function( index ) {

// Obtengo el ID del elemento

identificador = $( this ).text();

// Cambio el ID por el botón nuevo

$( this ).html("<a style='" + estilo_boton + "' href='" + nuevo_hijo + identificador + "'>" + texto_boton + "</a>") ;

});

</script>

En la imagen, podemos ver cómo se ve la lista antes y cómo se ve luego:

clip_image002

¿Cómo crear un hijo sin tener que completar manualmente los datos del padre?

Dentro de la pantalla NewForm vamos a realizar lo siguiente:

· Completar el valor del campo Padre

· Ocultar el campo Padre (la fila completa)

A continuación el código necesario:

<script type="text/javascript">

// Agregar esta CEWP en la parte de abajo de la pantalla NewForm.aspx

// Para que se abra el editor, utilizar ?toolpaneview=2

// Parámetros importantes

// Nombre del campo Padre

var campo_padre = "ID.";

// Fin de Parámetros importantes

// Completamos el valor del campo Padre

var valor_padre = url_param("padre");

$('input[title="' + campo_padre + '"]').attr("value",valor_padre);

$('input[title="' + campo_padre + '"]').parent().parent().parent().css("display","none");

// Función para leer un valor de parámetro de URL

function url_param ( name ){

name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");

var regexS = "[\\?&]"+name+"=([^&#]*)";

var regex = new RegExp( regexS );

var results = regex.exec( window.location.href );

if( results == null )

return "";

else

return results[1];

}

</script>

¿Cómo ocultar los datos del padre en el momento de editar el hijo?

Esto aplica tanto a la pantalla de edición, como a la pantalla de display. A continuación el código requerido:

Para la pantalla DispForm:

<script type="text/javascript">

// Agregar esta CEWP en la parte de abajo de la pantalla DispForm.aspx

// Para que se abra el editor, utilizar ?toolpaneview=2

// Parámetros importantes

// Nombre del campo Padre

var campo_padre = "ID_x002e_";

// Fin de Parámetros importantes

// Ocultar la fila

$('a[name="SPBookmark_' + campo_padre + '"]').parent().parent().parent().css("display","none");

</script>

 

Para la pantalla EditForm:

<script type="text/javascript">

// Agregar esta CEWP en la parte de abajo de la pantalla EditForm.aspx

// Para que se abra el editor, utilizar ?toolpaneview=2

// Parámetros importantes

// Nombre del campo Padre

var campo_padre = "ID.";

// Fin de Parámetros importantes

// Ocultar la fila

$('input[title="' + campo_padre + '"]').parent().parent().parent().css("display","none");

</script>

Conclusión

Hemos visto un método bastante simple y efectivo para crear relaciones de maestro detalle en SharePoint 2007. No requiere programación del lado del servidor y soporta cambios futuros a las listas al no requerir la programación de pantallas a medida.

Espero les resulte útil. Hasta la próxima.

0 comentarios:

Publicar un comentario en la entrada