Mostrar / Ocultar campos con jQuery – DispForm.aspx

jdelrio — Wed, 23 Dec 2009 13:26:00 GMT

Con jQuery podemos añadir multitud de efectos a nuestro sitio de SharePoint que no solamente sea un efecto llamativo, sino funcional también (como en este otro post).

Lo que pretendemos es añadir funcionalidad a un formulario por defecto de Sharepoint como los DispForm.aspx, para mostrar datos de una forma mas ergonómica, sin necesidad de mostrar una gran párrafo del cual solo necesitaremos el encabezado.

Mediante SharePoint Designer, en el menú insertar, SharePoint Controls, custom list form, seleccionando el origen de datos prueba (lista previamente creada), y todo en DispForm_copy.aspx. Así pues conseguí incrustar el script en una placeholder que la pagina no usaba para nada, los estilos también fueron incrustados justo antes de la etiqueta <WebPartPages:DataFormWebPart> , entonces solo nos queda modificar la tabla que ha sido creada al insertar el custom list form.

Suelo añadir un div dentro del TD que contiene la información añadida ya que da más libertad para las transformaciones.

Como estamos tratando con jQuery deberemos añadir el script que nos ofrece las múltiples funciones para realizar efectos y diferentes funcionalidades:

<asp:Content runat="server" ContentPlaceHolderid="PlaceHolderPageImage">

$(function () {

$('.expandInfo a').click(function () {

$(this.hash).slideToggle(2000);

return false;

});

})

</script>

</asp:Content>

Elegí ese content place holder porque no se utilizaba en este marco, como veis tengo una libreria de js solo para tener ordenados los scripts, seria también valido, llamar al recurso publico en google o colocarlo en _layouts del directorio 12 (14 para SP2010):

Los estilos, justo antes de la etiqueta:<WebPartPages:DataFormWebPart>.

#expand2 { background-color: #fff; display: none;}

#expand2 div { padding: 16px; }

.expandInfo { background-color: #fff; margin: 0; padding: 10px; }

a { color: #0000C4; text-decoration: none;}

</style>

Y finalmente localizar la zona donde queremos queremos añadir texto adicional, con SharePoint Designer lo tenemos fácil, en la vista de diseño nos posicionamos en la tabla sobre el TD escogido.

Para que se produzca el efecto persiana en cada TD debemos utilizar clases diferentes enumeradas para mejor control, esta es Expand2.

</div>

</td>

Este seria el aspecto del formulario creado:

Nos muestra datos de la lista de Sharepoint que podemos acotar, o añadir explicaciones propias pulsando el “+” que vemos al final de cada TD. Demostración de la animación:

(Por favor, visita la web para ver este medio)

Fuente:http://jqueryfordesigners.com/demo/animation-jump.html

Saludos y Felices Fiestas a todos los lectores del blog.

Jesús del Rio.

Blog del CIIN : MOSS, jQuery, SharePoint Designer 2007

Mostrar / Ocultar campos con jQuery – DispForm.aspx