Procédure : personnaliser le format XSL pour le composant WebPart Contenu par requête

Dernière modification : lundi 27 septembre 2010

S’applique à : SharePoint Server 2010

Vous pouvez utiliser le composant WebPart Contenu par requête pour agréger le contenu de plusieurs sources de données de votre site Web, et le présenter dans un seul emplacement. Avant de configurer et personnaliser le composant WebPart Contenu par requête, vous devez envisager la personnalisation et la conception du site que vous souhaitez obtenir. Microsoft SharePoint Server 2010 intègre trois fichiers XSL (Extensible Style Language) que vous pouvez modifier pour le rendu des champs dans des styles utilisés par le composant WebPart Contenu par requête pour afficher le contenu agrégé.

Cette rubrique identifie les trois fichiers XSL utilisés par le composant WebPart Contenu par requête et décrit leur fonctionnement ; identifie les modèles et les variables pouvant être modifiés ; et explique comment modifier les fichiers afin que le composant WebPart Contenu par requête effectue le rendu des données avec l’apparence spécifiée.

Le tableau suivant contient la liste et la description des trois fichiers XSL qui décrivent le composant WebPart Contenu par requête.

Par défaut, les modèles suivants sont inclus dans les fichiers ItemStyle.xsl et Header.xsl. Le fichier Header.xsl contient les définitions des styles de groupe, alors que le fichier ItemStyle.xsl contient les définitions qui s’appliquent aux éléments des lignes dans le composant WebPart Contenu par requête. Ces styles correspondent aux options disponibles dans les listes déroulantes Style du groupe et Style d’élément qui s’affichent lorsque vous sélectionnez les styles dans la Bibliothèque de styles.

Chaque modèle contient deux sections d'instructions de traitement :

• les sections <xsl:variable> traitent les données et assurent la mise en forme appropriée.

• les sections <div> effectuent le rendu HTML et insèrent les données.

Le code du modèle ImageRight suivant est annoté avec des commentaires :

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

Plusieurs fonctions sont disponibles pour être utilisées avec la section <xsl:variables> des fichiers XSL SharePoint Server 2010, tel que décrit dans le tableau suivant.

Pour ajouter un composant WebPart Contenu par requête et personnaliser le fichier XSL du composant WebPart Requête de contenu

1. Accédez à la page d'accueil de votre site, cliquez sur Actions du site, puis sur Modifier la page pour extraire la page en mode Édition.

2. Dans une des zones de composants WebPart, cliquez sur Ajouter un composant WebPart, puis sélectionnez et ajoutez un composant WebPart Requête de contenu.

3. Cliquez sur Modifier, puis sur Modifier le composant WebPart partagé.

4. Modifiez les propriétés et ajoutez des champs au composant WebPart Requête de contenu le cas échéant. Pour plus d'informations, voir Procédure : Personnaliser le composant WebPart Contenu par requête à l’aide de propriétés personnalisées.

   Notes

   Lorsque vous modifiez le composant WebPart Contenu par requête, il y a deux listes déroulantes dans la section Styles : une pour le style de groupe et une pour le style d’élément. Ces éléments de liste sont définis par des modèles dans les fichiers ItemStyle.xsl et Header.xsl.

5. Modifiez les valeurs des instructions select, variables et expressions en modifiant le XSL, en utilisant les informations de référence de cette rubrique comme guide. Par exemple, vous pouvez modifier les valeurs des instructions select dans la section <div> pour demander à l'expression de se résoudre en autre variable.

Pour créer un style d'élément

1. Identifiez un style semblable à celui que vous souhaitez créer.

2. Copiez le style et modifiez les valeurs de propriété name et match :

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

Voir aussi

Tâches

Procédure : Personnaliser le composant WebPart Contenu par requête à l’aide de propriétés personnalisées

Procédure : personnaliser le format RSS pour le composant WebPart Contenu par requête

Procédure : Afficher des champs personnalisés dans un composant WebPart Contenu par requête