Blog del CIIN

Blog del Centro de Innovación en Integración de Cantabria

This Blog

Syndication

Search

Tags

Community

Email Notifications

Archives

Enlaces Recomendados

Personalizar estilos de la Content Query Web Part

En el post anterior hemos hablado de cómo podemos utilizar y personalizar la Content Query Web Part (CQWP) de MOSS para mostrar información de nuestro sitio de SharePoint, como podemos capturar nuevos campos de las listas que tenemos creadas para que aparezcan en nuestras consultas y como podemos utilizar y personalizar los estilos propios que vienen asociados a ella y que se encuentran definidos en el fichero /Style Library/XSL Style Sheets/ItemStyle.xsl

Ahora vamos a ver cómo podemos definir gracias a algunas de las propiedades que se pueden utilizar de la CQWP que utilice un fichero XSL personalizado con sus propias plantillas de estilos, como definir que uno de estos que sea el estilo por defecto y veremos algunos ejemplos de plantillas a utilizar. Para ello vamos a realizar los siguientes pasos:

  • Vamos a la galería de web Part de nuestro sitio, editamos la ContentQuery.webpart y lo exportamos.
  • Una vez exportado el fichero .webpart lo abrimos con cualquier editor de textos y añadimos las siguientes propiedades:
    • ItemXslLink: Para utilizar un nuevo fichero de estilos XSL (ItemStyle_CIIN.xsl)

<property name="ItemXslLink" type="string">/Style Library/XSL Style Sheets/ItemStyle_CIIN.xsl</property>

  • ItemStyle: Para establecer una plantilla predeterminada de este nuevo fichero

<property name="ItemStyle" type="string">Estilo1</property>

  • CommonViewFields: Como vimos en el post anterior, con esta propiedad especificamos los campos que podemos utilizar en las plantillas:

<property name="CommonViewFields" type="string"> PublishingPageContent,Note;ArticleByLine,String;ArticleStartDate,DateTime;</property>

  • Una vez que ya tenemos el fichero configurado, le damos un nuevo nombre y lo volvemos a subir a la galería de web part.
  • Antes de empezar a utilizar esta nueva web part, tenemos que crear el nuevo fichero de estilos XSL que le hemos definido en la propiedad ItemXslLink. Para ello creamos un nuevo fichero con SharePoint Designer, le damos el nombre ItemStyles_CIIN.xsl y lo guardamos en la carpeta de /Style Library/XSL Style Sheets. Dentro de este fichero vamos a definir nuestras nuevas plantillas:

Cabecera del fichero

<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:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime"

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

 

Plantilla 1


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

    <xsl:variable name="Fecha_Noticia">

     <xsl:value-of select="ddwrt:FormatDateTime(string(@ArticleStartDate) ,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>

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

    <tr>

        <td class="Estilo1Title" colspan="2">

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

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

    <xsl:value-of select="$DisplayTitle"/>

        </a>

</td>

</tr>

<tr class="Estilo1Border">

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

    <td class="Estilo1Image">

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

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

    </td>

    </xsl:if>

    <td class="Estilo1Description" valign="top">

        <span style="font-size: smaller;">

            <xsl:value-of select="$Fecha_Noticia"/> - Publicado por: <xsl:value-of select="@ArticleByLine" />

        </span><br/>     

    <xsl:value-of select="substring(@PublishingPageContent, 0, 200)" disable-output-escaping="yes"/>...

    </td>

</tr>

</table>

</xsl:template>

 

Plantilla 2


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

        <xsl:variable name="Created">

         <xsl:value-of select="ddwrt:FormatDateTime(string(@ArticleStartDate) ,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="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 link-item">

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

</xsl:template>

 

Plantilla 3


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

        <xsl:variable name="Fecha_Noticia">

         <xsl:value-of select="ddwrt:FormatDateTime(string(@ArticleStartDate) ,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-item">

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

<xsl:value-of select="$Fecha_Noticia" /> - <xsl:value-of select="@ArticleByLine" /><br/><br/>

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

<xsl:value-of select="$DisplayTitle"/>

</a>

<div class="description">

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

</div>

</div>

</div>

</xsl:template>

 

Anexo:

Existen muchas otras propiedades que se pueden personalizar de la Content Query Web Part, para ver un listado completo visita este link de MSDN:

http://msdn2.microsoft.com/en-us/library/microsoft.sharepoint.publishing.webcontrols.contentbyquerywebpart_properties.aspx

Published 22/5/2007 13:21 por Pablo Sousa Lastra

Comparte este post:

Comentarios

# re: Personalizar estilos de la Content Query Web Part@ Friday, June 08, 2007 5:03 PM

Hola,

Estoy intentando crear un ItemStyle similar al tuyo, pero tengo problemas al intentar desplegar la imagen la cual se encuentra en una columna de mi lista, el tipo de columna fue creado como Picture, en donde yo introduzco la URL de dicha imagen. El nombre de mi columna es "Imagen". Quisiera saber si la columna debe ser creada con de algún tipo en específico para hacer que esto funcione.

Saludos!

elcarlos

# re: Personalizar estilos de la Content Query Web Part@ Friday, November 02, 2007 3:35 PM

Pablo,

a sido muy interesante tu articulo, mi problema surgio al tratar de incorporar otros campos de la lista de anuncios como el cuerpo o Body, al cambiar el parametro <xsl:call-template name="OuterTemplate.GetTitle">. Podrìas ayudarme con este problemita....de antemano gracias.

mjp@synapsis-it.com

Marcelo Jofré Pérez