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:
|
<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.
|
<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.
Comparte este post: