Personalización de la Content Query Web Part

En este post vamos a explicar cómo funciona la Content Query Web Part y cómo
podemos personalizarla para que muestre elementos de una lista en concreto, con
campos propios que definamos en esa lista y creando un estilo que mejore la
forma de presentarlo en el navegador.

Antes de empezar a explicar cómo se personaliza es necesario comentar que la
Content Query Web Part pertenece solamente a versiones de MOSS, no de WSS, y nos
aparece siempre que tengamos activada la feature de publicación a nivel de Site
Collection

Al insertar esta Web Part en una página, podemos observar dentro de sus
propiedades todos los elementos con los que podemos trabajar, que son el lugar
de donde queremos obtener información, que filtros aplicar, tipos de contenidos,
estilos de presentación, etc…

Por defecto, la Content Query Web Part muestra únicamente un listado de los
elementos encontrados en:

  • Todos los elementos de todos los sitios de la
    Site Collection.
  • Todos los elementos del sitio y subsitios que
    lo integran.
  • Los elementos de una lista o librería de
    documentos concreta.

Figura 1:
Orígenes para definir la consulta que se va a realizar en la Content Query Web
Part.

Nosotros vamos a seleccionar la última opción puesto que nos permitirá
mostrar los elementos de una lista o librería concretas que ya tengamos definida
en nuestra colección de sitio. Para poder mostrar más información en la consulta
devuelta por la Content Query Web Part (sólo devuelve el nombre de los elementos
encontrados), es necesario personalizarla a dos niveles:

  • Campos que se van a visualizar en la consulta
    devuelta.
  • Como se va a mostrar la información que se
    visualiza, es decir, que estilo se va a utilizar para mostrar la información.

Campos a visualizar en la consulta

Lo primero que debemos hacer a la hora de personalizar la content query web
part es exportar la existente y realizar todos los cambios, para ello vamos a la
galería de Web Parts de MOSS: Acciones el Sitio -> Configuración
del sitio
y luego en la sección Galerías
escogemos la opción Elementos Web. La pantalla que se
abre muestra el listado con las Web Parts listas para ser usadas. Buscamos en la
lista la Content Quey Web Part para editarla:

Figura 2:
Galería de Web Parts en MOSS.

Editamos la web part, y a través de la opción de exportación, la exportamos
para poder personalizarla:

Figura 3:
Edición de la Content Query Web Part.

Una vez exportada la Content Query Web Part (en formato .webpart), vamos a
modificar su comportamiento para que devuelva en la consulta los campos que
consideremos oportunos. Lo podemos hacer con cualquier editor de texto, y la
sección a modificar del archivo .webpart es la referente a la propiedad (dentro
de la sección properties) con nombre
CommonViewFields en la que especificaremos los campos
que nos interesa que nos muestre el resultado de la consulta que realiza la
Content Query Web Part:

Figura 4:
Modificación del archivo .webpart.

En este caso hemos especificado que la consulta nos devuelva los siguientes
campos de la lista (de tipo Announcements): Title,
Body, y DateTime. Además,
especificamos para cada campo su tipo. Pero, ¿qué son estos campos en la
lista de MOSS sobre la que vamos a definir la consulta de contenido?
Estos
campos son los nombres que MOSS utiliza internamente para denominar las columnas
de una lista o una librería de documentos (Nota: Una
forma de averiguar el nombre interno de cada campo es desde a través de la url
que aparece en el navegador en el momento en que entramos en la visualización de
detalle de un campo de la lista).

Una vez configurado el archivo .WebPart, la subimos a la galería de Web Parts
con otro nombre distinto al de la Content Query Web Part y definiendo otras
propiedades a nivel de elemento de la galería que consideremos convenientes
(grupo de la web part, en que agrupaciones de las existentes queremos agregarla,
una descripción,…).

Personalización de la consulta devuelta

Una vez que hemos especificado los campos que va a devolver la Content Query
Web Part personalizada, el siguiente paso es especificar cómo se va a visualizar
dicha información (recordemos que la Content Query Web Part de MOSS solo
visualiza el nombre de los elementos devueltos en la consulta). Para ello,
tenemos que personalizar el fichero xsl en el que se definen las distintas
formas en que la Content Query Web Part va a mostrar la consulta devuelta.

Figura 5:
Configuración de la presentación de la información con la Content Query Web
Part.

Para que el estilo que queremos (en este caso, junto con el nombre del
elemento aparezca la fecha en que se creó y una parte de la descripción) es
necesario que modifiquemos el archivo ItemStyle.xls. Este archivo se encuentra
almacenado en la base de datos de contenidos MOSS y para personalizarlo tenemos
que utilizar Sharepoint Designer. Se encuentra localizado en la biblioteca de
estilos del sitio raíz Style Library y luego en la
biblioteca XSL Style Sheets:

Figura 6:
Localización del archivo ItemStyle.xls con Sharepoint Designer.

Esta hoja xsl también la podemos localizar a través de la interfaz de usuario
de MOSS: Bibliotecas de Documentos -> Biblioteca de estilos
y luego la carpeta XSL Styles Sheets:

Figura 7:
Localización del archivo ItemStyle en MOSS.

Una vez que tenemos localizado el archivo, lo abrimos y tenemos que
configurar los siguientes elementos:

  • Añadir en la sección
    xsl:stylesheet del archivo el esquema XML que nos
    permita presentar la información devuelta en la consulta con los campos que
    queremos:

<xsl:stylesheet

version=”1.0″

exclude-result-prefixes=”x d xsl msxsl cmswrt”

xmlns:x=”http://www.w3.org/2001/XMLSchema”

xmlns:d=”http://schemas.microsoft.com/sharepoint/dsp”

xmlns:cmswrt=”http://schemas.microsoft.com/WebParts/v3/Publishing/runtime”

xmlns:xsl=”http://www.w3.org/1999/XSL/Transform”
xmlns:msxsl=”urn:schemas-microsoft-com:xslt”

xmlns:ddwrt=”http://schemas.microsoft.com/WebParts/v2/DataView/runtime”>

 

El esquema a añadir es el que se ha remarcado en negrita en el listado
anterior.

  • El estilo de presentación con el que vamos a
    mostrar los distintos elementos que devuelve la Content Query Web Part:

<xsl:template name=”Avisos”
match=”Row[@Style=’Avisos’]” mode=”itemstyle”>

        <xsl:variable
name=”Created”>

        
<xsl:value-of select=”ddwrt:FormatDateTime(string(@Expires)
,1033 ,’dd-MM-yyyy’)” />

        </xsl:variable>

<xsl:variable
name=”SafeLinkUrl”>

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

<xsl:with-param
name=”UrlColumnName” select=”‘LinkUrl'”/>

</xsl:call-template>

</xsl:variable>        

<xsl:variable
name=”SafeImageUrl”>

<xsl:call-template
name=”OuterTemplate.GetSafeStaticUrl”>

<xsl:with-param
name=”UrlColumnName” select=”‘ImageUrl'”/>

</xsl:call-template>

</xsl:variable>

<xsl:variable
name=”DisplayTitle”
>

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

<xsl:with-param
name=”Title” select=”@Title“/>

<xsl:with-param
name=”UrlColumnName” select=”‘LinkUrl'”/>

</xsl:call-template>

</xsl:variable>

<xsl:variable
name=”LinkTarget”>

<xsl:if
test=”@OpenInNewWindow = ‘True'” >_blank</xsl:if>

</xsl:variable>

<div
id=”linkitem” class=”item”>

<xsl:if
test=”string-length($SafeImageUrl) != 0″>

<div
class=”image-area-left”>

<a href=”{$SafeLinkUrl}” target=”{$LinkTarget}”>

<img
class=”image” src=”{$SafeImageUrl}” alt=”{@ImageUrlAltText}” />

</a>

</div>

</xsl:if>

<div
class=”link-item2″>

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

                <a href=”{$SafeLinkUrl}”
target=”{$LinkTarget}” title=”{@LinkToolTip}”>

                
<xsl:value-of select=”$Created”/> – <xsl:value-of
select=”$DisplayTitle”/>

                </a>                

                <div class=”description”>

                
<xsl:value-of select=”substring(@Body, 0, 200)”
disable-output-escaping=”yes”/>…

                <br/>

                
<a class=”link-item” href=”{$SafeLinkUrl}” target=”{$LinkTarget}” title=”Leer
mas”>Leer más…</a><br/>

                </div>

</div>

</div>

</xsl:template>

 

Como se ve en el listado anterior, al especificar
el estilo que queremos aplicar para la visualización de los datos devueltos por
la consulta, es necesario indicar los siguientes elementos:

  • El nombre de la plantilla que aparecerá en la
    configuración de la presentación de la Content Query WebPart que hemos
    personalizado. En este caso el nombre de la plantilla es
    Avisos.
  • El estilo que van a seguir los elementos de la
    plantilla, que de nuevo hemos denominado Avisos.
  • Los distintos elementos e información que se
    van a visualizar por resultado devuelto:
    • La variable Created
      que es de tipo fecha, y cuyo valor se obtiene a partir de la columna Expires
      devuelta por la consulta (Nota:
      Además, en este caso se ha formateado la fecha al formato utilizado en España
      utilizando la función FormatDateTime). Esta variable visualizará la fecha de
      creación de cada ítem de la lista sobre el que se ha definido la consulta.
    • La variable
      DisplayTitle de tipo string, y cuyo valor se obtiene a
      partir de la columna Title devuelta por la consulta. Esta variable visualizará
      el título de cada ítem de la lista sobre la que se ha definido la consulta.
    • Una porción de la columna
      Body devuelta por la consulta para visualizar un
      resumen de cada elemento devuelto por la consulta.

<xsl:value-of select=”substring(@Body, 0,
200)” disable-output-escaping=”yes”/>…

  • Finalmente, se ha añadido un vínculo a la
    noticia utilizando la forma estándar de definir enlaces en HTML y apuntando al
    detalle del elemento:

     

    <a class=”link-item” href=”{$SafeLinkUrl}” target=”{$LinkTarget}” title=”Leer mas”>Leer
    más…</a><br/>

     

Sin más, una vez que se han personalizado tanto la web part como el archive
ItemStyle.xls, ya podemos utilizarla en nuestro sitio MOSS y obtener el
resultado esperado.

Figura 8: Aspecto final que ofrece la Content
Query Web Part personalizada.

23 comentarios en “Personalización de la Content Query Web Part”

  1. Hola este articulo me parece excelente, pero me gustaria saber mas sobre los tipos de datos de XML que son equivalentes a los tipos de datos de Sharepoint!.

    Saludos desde Mexico

  2. Hola Maricela,

    Gracias por la buena crítica del post. Te iba a contestar pero no entiendo a que te estás refiriendo exactamente con tu duda de los tipos de datos XML que son equivalentes a los de SharePoint. Explícame un poco mas tu problemática para poderte dar una contestación.

    Un saludo,

    Pablo

  3. Buen artículo, al perecer es lo que estoy buscando pero tengo una pequeña gran duda ….

    ¿¿ como activo la caracteristica de publicacion a nivel del site collection ??

    Tengo instalado el MOSS 2007 for search…

    Te agradecería cualquier ayuda

  4. Hola a todos,

    Tengo un pequeño problemita, quiero saber si hay forma que desde el ItemStyle.xsl pueda acceder a columnas nuevas que se agregaron a por ejemplo las caracteristicas de una pagina.

    Saludos de Uruguay

  5. Hola Antonio,

    Para poder utilizar las columnas en el itemstyle.xsl, tienes que exportar la content query web part y añadirlas en la propiedad de CommonViewFields y despues volverlar a importar ya podras utilizarlas.

    Un saludo,

    Pablo

  6. Hola Mario,

    Con la version de MOSS 2007 for search no puedes activar la feature de publicacion ya que esa version solo esta dedicada a configurar busquedas y no crear sitios de portal. Para poder hacerlo tienes que cambiarte de version de SharePoint a MOSS Standard o Enterprise.

    Un saludo,

    Pablo

  7. Hola,
    ¿puedes comentarme como es posible personalizar el vinculo que abre el la lista o documento encontrado de la lista principal?
    Es decir, si la lista esta en el site1 y queremos verlo en el site2, no quiero que al dar a “leer mas” me abra el contenido de la lista en el site1 sino el site2.
    ¿esto es posible?

    gracias

  8. Hola Pablo,

    Me ha gustado mucho tu artículo. Tengo una duda. Al utilizar el content query web part sobre una librería con carpetas, el resultado devuelto no respeta la jerarquía de las carpetas. Los archivos se extraen (digamos que a un primer nivel), sin posibilidad de navegar a la carpeta concreta para ir a buscarlos.

    ¿Tenéis alguna idea / sugerencia?

    Muchas gracias a todos por vuestra ayuda !!!

  9. Hola pablo

    Darte la enhorabuena por este post y agradecértelo, me ha facilitado mi labor de investigación, la información es Castellano es escasa, además quiero añadir una pequeña ayuda a los lectores de este tema.
    Para ver que nombre interno que tienen los campos y que tipo de dato debes de declarar en el webpart, se puede consultar la dirección que os adjunto aquí:
    http://msdn.microsoft.com/en-us/library/ms980837.aspx# ,espero que os sea util.

  10. Hola Pablo, muy bueno el artículo.

    Me ha funcionado tu ejemplo para lo que estoy haciendo pero sólo en parte ya que hay unos campos que me dan algún problema. Veamos…

    Cuando el nombre de la columna es, por ejemplo, “Estado” todo funciona perfecto, tal cual comentas en el ejemplo. Pero, cuando el nombre de la columna es, por ejemplo, Descripción o Presupuesto convenio tengo el siguiente problema derivado de la utilización de acentos o espacios, el texto de la ruta de donde sacamos el nombre del campo, tal como explicas en el ejemplo, es Descripci%5Fx00f3%5Fn y Presupuesto%5Fx0020%5Fconvenio respectivamente. Por otra parte, en el xml aparecen como Descripci_x00f3_n y Presupuesto_x0020_convenio respectivamente.

    He probado el ejemplo de las múltiples formas posibles jugando con esos nombres y no he conseguido nada.

    ¿Sabríais cual es el problema? ¿Me podéis ayudar?

    Gracias!

  11. Muy bueno el post. Me ha ayudado mucho.
    Pero tengo una duda.En el xsl utilizas
    _blank

    ¿Cómo tendría que hacer para que el enlace se mostrara en una ventana distinta?

  12. hola pablo:

    Con el gusto de felicitarte por tu articulo quisiera preguntarte, lo siguiente:

    Como puedo ver con la webpart Content query, otros sitios que estan creados en el servidor de sharepoint

    gracias ..

  13. Hola Marco,

    En la CQWP tan solo puedes mostrar informacion referente a la coleccion de sitios en la que estas trabajando. Si lo que quieres es mostrar información de otras colecciones de sitios esta web part no te sirve, y tienes que utilizar la Data Form Web Part.

    Aqui te dejo este link para que veas un ejemplo

    http://geeks.ms/blogs/ciin/archive/2008/07/13/wss-3-0-amp-moss-sac-225-ndole-partido-a-la-data-form-web-part-i.aspx

    Un saludo,

    Pablo

  14. Buenas tardes Pablo, valioso articulo.
    Tengo un requerimiento parecido a lo que tu publicas en tu articulo, pero no se como hacerlo.
    Utilizo el webpart de consulta de contenido para mostrar los ultimos documentos modificados, pero necesito que la consulta no me coloque las extensiones de los archivos y que tampoco me traiga imagenes.
    Como puedo hacer esto? alguna ayuda? gracias

  15. Hola Amigos,

    estoy tratando de personalizar un custom query webpart para obtener el body de los blogs pero he tratado con todo ! (ver links) y no lo logro

    http://blog.henryong.com/2008/06/15/how-to-customize-the-content-query-web-part-xsl-to-aggregate-blog-posts/

    http://blogs.msdn.com/ecm/archive/2006/10/25/configuring-and-customizing-the-content-query-web-part.aspx?CommentPosted=true#commentmessage

    http://www.heathersolomon.com/blog/articles/customitemstyle.aspx

    tienen alguna idea de como obtener el body?

    gracias por su ayuda….

  16. Buenisimo el articulo Pablete, estoy tratanto de customizar el CQWP y me da el siguiente error al cambiar el CommonViewFields del .webpart:

    Unable to display this Web Part. To troubleshoot the problem, open this Web page in a Windows SharePoint Services-compatible HTML editor such as Microsoft Office SharePoint Designer. If the problem persists, contact your Web server administrator.

    he estado leyendo y parece ser porque el sharepoint no refresca el GUID del nuevo WP… pero aun asi cambiando el GUID me peta… sabes por qué puede ser ?

  17. Un artículo estupendo!!!
    ¿Sabéis cómo puedo ver cómo llama internamente SharePoint a la fecha de modificación de un elemento? Es una columna interna que no consigo ver su nombre
    Muchas gracias

  18. Me pasa lo mismo que Alejandro.
    Es decir, si la lista esta en el site1 y queremos verlo en el site2, no quiero que al dar a “leer mas” me abra el contenido de la lista en el site1 sino el site2.

    Alguien tiene una solución???

Deja un comentario

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