WebPart de contenido con formato

En este post veremos cómo definir nuestro propio WebPart de contenido con un formato diferente al habitual de tablas. Todo esto sin tirar una línea de código ya que solo nos centraremos en definir cómo presentar el contenido.

Supongamos que disponemos de una lista de Sharepoint con las noticias de la intranet y queremos disponer de una vista de las últimas noticias en la página principal.

Lo primero que haremos será abrir una página de nuestro sitio con Sharepoint Designer y agregaremos un DataFormWebPart. Seleccionaremos nuestra lista de noticias y los campos que queremos visualizar. En este ejemplo he creado una lista del tipo “Anuncios”.

Para agregar el DataFormWebPart realizaremos lo siguiente:

En vista diseño, en el menú “Insertar” seleccionaremos “Controles de Sharepoint” y luego “Vista de datos”.

A continuación iremos a la ventana de “biblioteca de orígenes de datos” seleccionaremos la lista de la que queremos obtener la información y pulsaremos en la opción “Mostrar datos”.

Esta opción nos mostrará los campos disponibles en la lista. Seleccionaremos los campos que deseamos visualizar en nuestra vista (o los que deseamos disponer) y seleccionamos “Insertar los campos seleccionados como” y “Vista de varios elementos”.

Una vez agregado cambiaremos la forma de presentar el contenido modificando el XSL del DataFormWebPart. Seleccionaremos el WebPart con Sharepoint Designer y visualizaremos el código de la página. Buscaremos la sección “<xsl:template name="dvt_1.rowview">” que corresponde al código que renderizará el WebPart para cada ítem de la lista de noticias, y tocaremos la sección “<xsl:template name="dvt_1">” que corresponde con la cabecera y la definición de la tabla.

Solo tendremos que adaptar estas secciones para que muestre el contenido con el formato que deseemos.

En mi ejemplo he dejado el siguiente código en el DataFormWebPart:

<xsl:template name="dvt_1">

<xsl:variable name="dvt_StyleName">Table</xsl:variable>

<xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row"/>

<table border="0" width="100%" cellpadding="2" cellspacing="0">

<tr valign="top">

<xsl:if test="$dvt_1_automode = '1'" ddwrt:cf_ignore="1">

<th class="ms-vh" width="1%" nowrap="nowrap"></th>

</xsl:if>

</tr>

<xsl:call-template name="dvt_1.body">

<xsl:with-param name="Rows" select="$Rows"/>

</xsl:call-template>

</table>

</xsl:template>

<xsl:template name="dvt_1.body">

<xsl:param name="Rows"/>

<xsl:for-each select="$Rows">

<xsl:call-template name="dvt_1.rowview"/>

</xsl:for-each>

</xsl:template>

<xsl:template name="dvt_1.rowview">

<tr>

<xsl:if test="position() mod 2 = 1">

<xsl:attribute name="class">ms-alternating</xsl:attribute>

</xsl:if>

<td>

<table>

<tr>

<td class="ms-vb" style="font-weight:bold">

<a>

<xsl:attribute name="href" >

<xsl:value-of select="concat('/Lists/Noticias/DispForm.aspx?ID=', @ID)"></xsl:value-of>

</xsl:attribute>

<xsl:value-of select="@Title"/>

</a>

</td>

</tr>

<tr>

<td class="ms-vb" style="font-style:italic">

<xsl:value-of select="@Resumen" disable-output-escaping="yes"/>

</td>

<td class="ms-vb">

<xsl:value-of select="ddwrt:FormatDate(string(@Created), 3082, 5)"/>

</td>

</tr>

</table>

</td>

</tr>

</xsl:template>

Al final conseguimos el siguiente aspecto:

 

Fijaros que el tag “<xsl:value-of select>” renderiza un campo, variable o función de XSL.

Para conseguir que el título vaya al Dispform del ítem, he agregado el siguiente códogio:

<a>

<xsl:attribute name="href" >

<xsl:value-of select="concat('/Lists/Noticias/DispForm.aspx?ID=', @ID)"></xsl:value-of>

</xsl:attribute>

<xsl:value-of select="@Title"/>

</a>

Mediante xsl he modificado el atributo href del hyperlink para que contenga la url compuesta al concatenar la url del formulario DispForm con el ID del ítem actual.

Una vez finalizada la edición de nuestro webpart lo exportaremos a un fichero del tipo “.webpart”. Esto lo podemos hacer guardamos la página y seleccionando la opción “exportar” accesible desde el navegador en modo edición.

O bien desde Sharepoint Designer seleccionaremos el WebPart en modo diseño u seleccionaremos “Archivo”, “Exportar”, Guardar elemento web en”, “Archivo”.

El archivo Webpart que nos genere contendrá la definición del webpart de contenidos con nuestro xsl formateado. Ahora solo tendremos que subirlo a nuestra colección desde la opción de “Elementos web” en la página de configuración del sitio y ya estará disponible para agregarlo en cualquiera de nuestras páginas.

Si quisiéramos moverlo a otro colección o web application, solo tendríamos que abrir el fichero Webpart generado y editar el parámetro “ListID” con el GUID de la instancia de nuestra lista.