SharePoint 2010: Usar Content Query Web Part para mostrar los elementos de una lista de enlaces

Escenario:

Supongamos que queremos mostrar los elementos de una lista de enlaces y, para ello queremos hacer uso de un Content Query Web Part (CQWP) por las posibilidades que éste nos da.

En la lista, por ejemplo, tendremos dos enlaces con los siguientes campos:

• General de Software
• Link: http://www.gsc.es
• Descripción: General de Software
• Turismo de Canarias
• LInk: http://www.turismodecanarias.com
• Descripción: Turismo de Canarias

Con esto, esperamos obtener el siguiente resultado:

En primer lugar, debemos añadir el CQWP a nuesta zona de Web Parts, editar las propiedades del CQWP y seleccionar la lista con los enlaces, en este caso, seleccionaré la lista de Vínculos que ofrece el sitio de SharePoint 2010.

Por defecto se mostrará el campo Título del enlace en el parámetro Título del CQWP.

Y el resultado sería el que sigue:

Por más que juguemos con los campos de la lista y los parámetros, no conseguiremos que se nos muestren los enlaces de la forma esperada.

Solución:

Propongo dos soluciones.

Solución 1, fácil, pero… nada elegante:

1. Rellenar el campo “Notas” del enlace con el texto que querríamos mostrar como título
2. En los parámetros del CQWP poner
1. Como Título, el valor del campo “Notas”
2. Como URL, el valor del campo “URL”

De esta forma, habríamos conseguido tener el resultado esperado pero, como ya dije, no es nada elegante y los usuarios podrían olvidarse de la forma de hacerlo y armar un caos.

Solución 2, un poco menos fácil y muy elegante.

• Para empezar tendríamos que editar el archivo itemstyle.xsl que contiente las plantillas de los elementos que se muestran en los Web Parts y crearíamos la siguiente plantilla.

   1:      <xsl:template name="Enlaces" match="Row[@Style='Enlaces']" mode="itemstyle">

   2:           <xsl:variable name="SafeLinkUrl">

   3:               <xsl:call-template name="OuterTemplate.GetSafeLink">

   4:                   <xsl:with-param name="UrlColumnName" select="@URL"/>

   5:               </xsl:call-template>

   6:           </xsl:variable>

   7:           <xsl:variable name="DisplayTitle">

   8:               <xsl:call-template name="OuterTemplate.GetTitle">

   9:                   <xsl:with-param name="Title" select="@URL"/>

  10:                   <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>

  11:               </xsl:call-template>

  12:           </xsl:variable>

  13:           <xsl:variable name="varLink">

  14:              <xsl:value-of select="substring-before($DisplayTitle,',')"/>

  15:           </xsl:variable>

  16:           <div id="linkitem">

  17:               <xsl:call-template name="OuterTemplate.CallPresenceStatusIconTemplate"/>

  18:               <div class="divLink">

  19:                   <a href="{$varLink}" target="_blank" title="{$DisplayTitle}">

  20:                       <xsl:value-of select="substring-after($DisplayTitle,',')"/>

  21:                   </a>

  22:               </div>

  23:           </div>

  24:      </xsl:template>

• Una vez hecho esto, tendríamos que editar las propiedades del CQWP y establecer el la plantilla de elementos y los campos correspondientes

¡HECHO! Con esto habremos obtenido el resultado deseado. Además, como controlamos nuestra plantilla para los links, también podremos personalizar más a fondo los estilos CSS para mostrar los enlaces de la forma que querramos.