Mostrar / Ocultar campos con jQuery – DispForm.aspx

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”>

<script type=’text/javascript’ src=’/js/jquery-1.3.2.min.js’></script>

<script type=”text/javascript”>

$(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):

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js” type=”text/javascript”></script>

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

<style type=”text/css” media=”screen”>

#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.

<td width=”400px” valign=”top” class=”ms-formbody”>

<p class=”expandInfo”><xsl:value-of select=”@Title”/><a href=”#expand2>+</a></p>

<div id=”expand2″>

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:

[View:http://video.msn.com/video.aspx?vid=e7380ed4-abf0-4b18-bcaf-ba9928b9df56&from=writer:550:0]

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

Saludos y Felices Fiestas a todos los lectores del blog.

Jesús del Rio.

2 comentarios en “Mostrar / Ocultar campos con jQuery – DispForm.aspx”

  1. Gracias por tu comentario Gonzalo xD.

    La verdad es que con jQuery podemos extender todavia mas lejos las capacidades de la plataforma, trasladando carga de trabajo al cliente, dejando el servidor centrado en sus tareas.

    Saludos.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *