Compartir a través de

Procedimiento para personalizar XSL para el elemento web de consulta por contenido

  • Artículo

Última modificación: lunes, 27 de septiembre de 2010

Hace referencia a: SharePoint Server 2010

Puede usar el elemento web de consulta de contenido para agregar contenido de varios orígenes de datos de todo el sitio web y presentarlo en un mismo lugar. Antes de configurar y personalizar el elemento web de consulta de contenido, debe tener en cuenta el diseño de marca y de sitio que desea obtener. Microsoft SharePoint Server 2010 incluye tres archivos de lenguaje de estilo extensible (XSL, Extensible Style Language) que se pueden modificar para representar los campos en los estilos que usa el elemento web de consulta de contenido para mostrar el contenido que reúne.

En este tema se identifican los tres archivos XSL que usa el elemento web de consulta de contenido y se describe cómo funcionan. Además, se identifican las plantillas y las variables que se pueden modificar y se describe cómo modificar los archivos para que el elemento web de consulta de contenido represente los datos con la apariencia y el funcionamiento que se especifiquen.

En la siguiente tabla se enumeran y detallan los tres archivos XSL que describen el elemento web de consulta de contenido.

Archivo

Ubicación

Descripción

ContentQueryMain.xsl

\Style Library\XSL Style Sheets\ContentQueryMain.xsl

  • Contiene la lógica que genera las llamadas adecuadas a las plantillas de encabezado y elemento para cada elemento.

  • Contiene funciones que permiten a los diseñadores modificar las transformaciones XSLT de elemento y encabezado.

  • Recibe todo el contenido, lo analiza y envía las piezas correspondientes a las plantillas ItemStyle y de encabezado.

  • Mantiene la estructura del elemento web de consulta de contenido.

  • Almacena los datos recuperados al consultar el contenido de la ruta de acceso /dsQueryResponse/Rows/Row.

ItemStyle.xsl

\Style Library\XSL Style Sheets\ItemStyle.xsl

Contiene plantillas que definen cómo mostrar un elemento. Estas plantillas reciben y procesan una fila de datos cada vez, lo que permite garantizar que el estilo y los datos de las filas de elementos sean coherentes.

Se pueden recuperar datos sobre una fila mediante la directiva @Property.

Header.xsl

\Style Library\XSL Style Sheets\Header.xsl

Contiene plantillas que definen cómo mostrar un encabezado y garantizan la coherencia de los encabezados de grupo.

Las plantillas especificadas en Header.xsl reciben la siguiente fila de elementos para procesar, que generalmente es la primera fila de un grupo (a menos que existan varias columnas). Si hay varias columnas, las plantillas reciben la primera fila de la columna.

Se pueden recuperar datos sobre la siguiente fila de elementos mediante la directiva @Property. Puede usar el parámetro $Group que contiene el nombre de la columna Agrupar por y el parámetro $GroupType que representa el tipo de columna de la columna Agrupar por.

De forma predeterminada, las siguientes plantillas se incluyen en los archivos ItemStyle.xsl y Header.xsl. El archivo Header.xsl contiene las definiciones de estilo de grupo, mientras que el archivo ItemStyle.xsl contiene las definiciones que se aplican a los elementos de fila del elemento web de consulta de contenido. Estos estilos corresponden a las opciones disponibles en las listas desplegables de estilo de grupo y elemento que aparecen al elegir los estilos en la biblioteca de estilos.

Nota

En las siguientes tablas, las plantillas se muestran en el orden en que aparecen en los archivos.

Nombre de archivo

Plantilla

Acción del elemento web de consulta de contenido

ItemStyle.xsl

Default

LinkImage aparece a la izquierda.

LinkTitle aparece en la parte superior.

Description aparece en la parte inferior.

ItemStyle.xsl

NoImage

LinkTitle aparece en la parte superior.

Description aparece en la parte inferior.

ItemStyle.xsl

TitleOnly

El elemento contiene sólo LinkTitle.

ItemStyle.xsl

Bullets

El elemento contiene LinkTitle precedido por una viñeta.

ItemStyle.xsl

ImageRight

LinkImage aparece a la derecha.

LinkTitle aparece en la parte superior.

Description aparece en la parte inferior.

ItemStyle.xsl

ImageTop

LinkImage aparece en la parte superior.

LinkTitle aparece en el centro.

Description aparece en la parte inferior.

ItemStyle.xsl

ImageTopCentered

LinkImage aparece en la parte superior y centrado.

LinkTitle aparece en el centro.

Description aparece en la parte inferior.

ItemStyle.xsl

LargeTitle

LinkImage aparece a la izquierda.

LargeLinkTitle aparece en la parte superior.

Description aparece en la parte inferior.

ItemStyle.xsl

ClickableImage

Contiene sólo LinkImage.

ItemStyle.xsl

NotClickableImage

Contiene sólo Image, sin un vínculo.

ItemStyle.xsl

FixedImageSize

LinkImage con restricción de tamaño a la izquierda.

LinkTitle aparece en la parte superior.

Description aparece en la parte inferior.

ItemStyle.xsl

TitleWithBackground

Contiene LinkTitle con color de fondo.

Nombre de archivo

Plantilla

Acción del elemento web de consulta de contenido

Header.xsl

DefaultHeader

Muestra el encabezado de grupo en tamaño de fuente mediano.

Header.xsl

LargeText

Muestra el encabezado de grupo en tamaño de fuente grande.

Header.xsl

SmallText

Muestra el encabezado de grupo en tamaño de fuente pequeño.

Header.xsl

Band

Muestra el encabezado de grupo con color de fondo cuadrado.

Header.xsl

Centered

Centra el encabezado de grupo.

Header.xsl

Separator

Inserta una línea entre el encabezado de grupo y el contenido siguiente.

Header.xsl

Whitespace

Inserta un espacio en blanco entre el encabezado de grupo y el contenido siguiente.

Cada plantilla incluye dos secciones de instrucciones de procesamiento:

  • Secciones <xsl:variable> que procesan los datos y garantizan el formato correcto.

  • Secciones <div> que representan el código HTML e incluyen los datos.

A continuación, se incluye el código de plantilla para ImageRight, con comentarios:

///Declares an XSL template named ImageRight that

///processes row style elements defined as ImageRight.

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

///The <xsl:variable> sections process and ensure correct formatting of the data.

///This section declares the variable named SafeLinkUrl, includes instructions to call the OuterTemplate.GetSafeLink function, and includes the LinkUrl expression to scope the call to the UrlColumnName parameter.
  - <xsl:variable name="SafeLinkUrl">
       /// The OuterTemplate.GetSafeLink variable passes in the UrlColumnName that represents the column name containing the ItemUrl.
    - <xsl:call-template name="OuterTemplate.GetSafeLink">
        <xsl:with-param name="UrlColumnName" select="'LinkUrl'" />
      </xsl:call-template>
    </xsl:variable>

///This section declares the variable named SafeImageUrl and calls the OuterTemplate.GetSafeStaticUrl function.
  - <xsl:variable name="SafeImageUrl">
    - <xsl:call-template name="OuterTemplate.GetSafeStaticUrl">
        <xsl:with-param name="UrlColumnName" select="'ImageUrl'" /> 
      </xsl:call-template>
    </xsl:variable>

///This section declares the variable named SafeImageHtml and calls the OuterTemplate.GetColumnDataForUnescapedOutput function, and passes the 'PublishingRollupImage' and 'Image' parameter values to the template rule.
  - <xsl:variable name="SafeImageHtml">
    - <xsl:call-template name="OuterTemplate.GetColumnDataForUnescapedOutput">
        <xsl:with-param name="Name" select="'PublishingRollupImage'" /> 
        <xsl:with-param name="MustBeOfType" select="'Image'" /> 
      </xsl:call-template>
    </xsl:variable>

///This section declares the variable named DisplayTitle, includes calls to the OuterTemplate.GetTitle function, and passes the @Title and 'LinkUrl' parameter values to the template rule.
  - <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>

///This section declares the variable named LinkTarget and tests whether it should open the target URL in a new window. If the test returns True, then the template rule processes the instruction to open the target URL in a new window.
  - <xsl:variable name="LinkTarget">
      <xsl:if test="@OpenInNewWindow = 'True'">_blank</xsl:if> 
    </xsl:variable>

///The <div> sections define the data to render and provide instructions on how to render it. This code block defines item data, and uses the OuterTemplate.CallPresenceStatusIconTemplate function to verify whether it should create an icon.
- <div class="item">
    <xsl:call-template name="OuterTemplate.CallPresenceStatusIconTemplate" />
///The <xsl:if test> instruction supplies a condition for the XSLT engine to evaluate. If the test evaluates to True after converting it to a Boolean value, the ItemStyle renders the content.
    - <xsl:if test="string-length($SafeImageUrl) = 0 and string-length($SafeImageHtml) != 0">
      - <div class="image-area-right">
          <xsl:value-of disable-output-escaping="yes" select="$SafeImageHtml" /> 
        </div>
      </xsl:if>
    - <xsl:if test="string-length($SafeImageUrl) != 0">
      - <div class="image-area-right">
        - <a href="{$SafeLinkUrl}" target="{$LinkTarget}">
            <img class="image" align="left" border="0"   src="{$SafeImageUrl}" alt="{@ImageUrlAltText}" /> 
          </a>
        </div>
      </xsl:if>
  - <div class="link-item">
    - <a href="{$SafeLinkUrl}" target="{$LinkTarget}" title="{@LinkToolTip}">
       <xsl:value-of select="$DisplayTitle" /> 
      </a>
      - <div class="description">
          <xsl:value-of select="@Description" /> 
        </div>
     </div>
  </div>
  </xsl:template>

Hay varias funciones disponibles para su uso en la sección <xsl:variables> de los archivos XSL de SharePoint Server 2010, según se describe en la siguiente tabla.

Función

Descripción

OuterTemplate.GetSafeLink

Cuando el usuario pasa UrlColumnName (el nombre de columna que contiene el valor ItemUrl), esta función devuelve una dirección URL que es segura para mostrar al elemento.

Si la dirección URL no es segura para mostrar, la función devuelve una dirección URL en blanco.

Si el elemento no se transfiere, la función devuelve la dirección URL CopyUtil.

OuterTemplate.GetSafeStaticUrl

Cuando el usuario pasa UrlColumnName (el nombre de la columna donde se almacena la dirección URL) y si la dirección URL es segura para mostrar, la función devuelve la dirección URL.

Si la dirección URL no es segura para mostrar, la función devuelve una dirección URL en blanco.

OuterTemplate.GetColumnDataForUnescapedOutput

Cuando el usuario pasa Name (el nombre de columna desde la que se recuperarán los datos), esta función obtiene datos de columna para resultados sin caracteres de escape.

Cuando el usuario pasa MustBeOfType (el tipo de columna esperado), la función devuelve el contenido si la columna es del tipo correcto. De lo contrario, no devuelve ningún dato.

OuterTemplate.GetTitle

Cuando el usuario pasa Title (los datos de la columna Title), esta función devuelve un título.

Si Title está en blanco, el nombre de página aparece en blanco o como el título.

OuterTemplate.FormatColumnIntoUrl

Cuando el usuario pasa UrlColumnName (el nombre de columna que contiene una dirección URL), esta función devuelve la dirección URL incluida en la columna.

OuterTemplate.FormatValueIntoUrl

Cuando el usuario pasa un Value que representa los datos de un tipo de columna de dirección URL de Windows SharePoint Services 3.0, la columna de dirección URL de Windows SharePoint Services 3.0 devuelve la dirección URL y el texto alternativo.

Devuelve la dirección URL incluida en la columna.

OuterTemplate.Replace

Si el usuario realiza una de las siguientes acciones:

  • Pasa Value y representa la cadena en la que se debe reemplazar;

  • Pasa Search y representa la cadena con la que se debe coincidir;

  • Pasa Replace y representa la cadena con la que se debe reemplazar la coincidencia;

Esta función devuelve el texto de búsqueda y reemplazo adecuado.

OuterTemplate.GetPageNameFromUrl

Cuando el usuario pasa UrlColumnName (el nombre de columna de la dirección URL del elemento), la función devuelve el nombre de página desde la dirección URL.

OuterTemplate.GetPageNameFromUrlRecursive

Método auxiliar para GetPageNameFromUrl.

OuterTemplate.GetGroupName

Cuando el usuario pasa el valor de la columna GroupName, la función devuelve el nombre de grupo en el formato adecuado.

Si el valor está vacío, devuelve un nombre de grupo en blanco.

Cuando el usuario pasa el valor de la columna GroupType (el tipo de columna para el grupo), la función devuelve el nombre de página si el tipo es URL.

OuterTemplate.CallPresenceStatusIconTemplate

Si el atributo @SipAddress existe en la fila actual, genera el marcado adecuado para crear un icono de presencia para Microsoft Office Outlook 2007 o Microsoft Office Communicator 2007.

Para agregar un elemento web de consulta de contenido y personalizar el XSL del elemento web de consulta de contenido

  1. Vaya a la página principal del sitio, haga clic en Acciones del sitio y elija Editar página para desproteger la página en modo de edición.

  2. En una de las zonas de elementos web, haga clic en Agregar elementos web y, a continuación, seleccione y agregue un elemento web de consulta de contenido.

  3. Haga clic en Editar y, a continuación, elija Modificar elemento web compartido.

  4. Modifique las propiedades y agregue campos al elemento web de consulta de contenido según sea necesario. Para obtener más información, consulte Procedimiento para personalizar el elemento web de consulta de contenido mediante propiedades personalizadas.

    Nota

    Al modificar el elemento web de consulta de contenido, existen dos listas desplegables en la sección Estilos: una para el estilo de Grupo y otra para el estilo de Elemento. Estos elementos de lista se definen mediante las plantillas de los archivos ItemStyle.xsl y Header.xsl.

  5. Puede editar el archivo XSL para modificar instrucciones select, variables y expresiones, usando la información de referencia de este tema como guía. Por ejemplo, puede modificar valores de instrucciones select en la sección <div> para indicar que la expresión se resuelva en otra variable.

Para crear un estilo de elemento

  1. Identifique un estilo similar al que desea crear.

  2. Copie el estilo y cambie los valores de las propiedades name y match:

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

Vea también

Tareas

Procedimiento para personalizar el elemento web de consulta de contenido mediante propiedades personalizadas

Procedimiento para personalizar RSS para el elemento web de consulta de contenido

Procedimiento para mostrar campos personalizados en un elemento web de consulta de contenido