Procédure : personnaliser le rendu d’un champ d’un affichage de liste

Article
09/24/2014

Dernière modification : mardi 29 mars 2011

S’applique à : SharePoint Foundation 2010

Dans cet article
Vue d’ensemble du rendu de champ personnalisé sur les affichages de liste
Définition du rendu personnalisé pour un champ personnalisé
Exemple : personnalisation du champ Currency (Monétaire)

Cette rubrique explique comment vous pouvez définir la façon dont votre champ personnalisé est restitué sur les affichages de listes.

Vue d’ensemble du rendu de champ personnalisé sur les affichages de liste

Microsoft SharePoint Foundation utilise les feuilles de style XSLT pour rendre les affichages de listes (pour un débat sur le système, voir Vue d’ensemble du système de rendu d’affichage Liste XSLT). Une liste s’affiche comme tableau HTML et la valeur d’un champ est rendue dans la cellule appropriée du tableau par un simple modèle XSLT du fichier fldtypes.xsl situé dans %ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\TEMPLATE\LAYOUTS\XSL. Il existe de nombreux modèles dans ce fichier pour le rendu de la valeur de champ. Le modèle utilisé dépend de plusieurs facteurs, dont le plus important est le type du champ tel que défini par l’énumération SPFieldType. Par exemple, il existe un modèle FieldRef_Number_body pour les champs Number et un modèle FieldRef_Text_body pour les champs Text.

Notes

Il n’y a pas de correspondance un-à-un des types de champ et des modèles. Par exemple, il existe plusieurs modèles différents pour les champs calculés et le modèle FieldRef_Number_body est utilisé pour les champs Currrency() ainsi que pour les champs Number.

Ci-après, par exemple, figure le modèle FieldRef_Text_body.

<xsl:template name="FieldRef_Text_body" ddwrt:dvt_mode="body" match ="FieldRef" mode="Text_body">
  <xsl:param name="thisNode" select="."/>
  <xsl:choose>
    <xsl:when test="@AutoHyperLink='TRUE'">
      <xsl:value-of select="$thisNode/@*[name()=current()/@Name]" disable-output-escaping ="yes"/>
    </xsl:when>
    <xsl:otherwise>
      <xsl:value-of select="$thisNode/@*[name()=current()/@Name]"/>
    </xsl:otherwise>
  </xsl:choose>
</xsl:template>

Le paramètre thisNode passé à ce modèle se compose du balisage dsQueryResponse qui contient les éléments de la liste (jusqu’au maximum autorisé par page). Pour obtenir un exemple du balisage, voir Exemples d’arborescences de nœuds d’entrée et de résultat dans les transformations XSLT.

Notez aussi que le modèle se ramifie selon que le champ est défini ou pas pour mettre automatiquement en forme les chaînes qui ressemblent à des URL comme les liens <a> HTML. Si tel est le cas, quand le processeur XSLT restitue le code HTML du champ, il ne remplace pas les caractères significatifs tels que « < » et « & » par leurs équivalents comme entités de caractère (< et &), comme le ferait ordinairement par défaut un processeur XSLT conforme. En dehors de cette complication, le modèle émet la valeur du champ avec la ligne ci-après.

<xsl:value-of select="$thisNode/@*[name()=current()/@Name]"/>

Comme cette ligne figure dans pratiquement tous les modèles XSLT de rendu de champ, elle mérite un examen plus attentif. La première étape de l’expression XPath qui identifie le nœud dont la valeur doit être affichée représentant une simple référence au paramètre thisNode, les étapes restantes sont interprétées en rapport à la racine du balisage du paramètre. L’étape suivante, avant l’application des prédicats, est /@*. Elle se réfère à tous les attributs de la racine et à ses descendants ; elle se réfère dans ce cas à tous les attributs de tous les éléments de thisNode. L’attribut avec prédicat [name()=current()/@Name] affine plus avant la sélection. À la gauche du signe « = » se trouve la fonction XSLT name(). Elle représente le nom d’un nœud dans la séquence produite par la partie « $thisNode/@* ». Autrement dit, elle représente le nom d’un attribut dans un élément de thisNode. Si nous appliquons ceci à l’exemple thisNode de Exemples d’arborescences de nœuds d’entrée et de résultat dans les transformations XSLT, nous constatons que certains attributs sont nommés d’après les noms internes des champs de l’élément de liste ; par exemple, Attachments, Title et le champ personnalisé ISBN. À droite du signe « = » se trouve une référence à l’attribut Name du nœud courant de l’arborescence des nœuds source : current()/@Name. Comme ce modèle est déclaré avec match ="FieldRef", il ne s’applique qu’aux éléments FieldRef ; de ce fait, la fonction current() fait référence à un élément FieldlRef. Par conséquent, la totalité de l’élément xsl:value-of fait état du message suivant : « émets la valeur de l’attribut à partir de thisNode dont le nom est le même que le nom du FieldRef courant dans l’arborescence des nœuds source ».

Aussi, quand le Title FieldRef de l’exemple d’arborescence des nœuds source est en cours de traitement, le processeur XSLT émet pour lui la valeur de l’attribut Title de l’élément Row actif dans le balisage thisNode (il s’agit de « Theories of Truth », pour la première ligne). De manière similaire, il restitue la valeur de l’attribut ISBN du même Row quand il traite le ISBN FieldRef de l’arborescence de nœuds source (« 0-262-61107-4 »).

Dans la plupart des cas, la restitution par défaut que votre champ personnalisé obtient, laquelle est principalement déterminée par son type de base, est exactement celle recherchée. Dans le cas d’un champ Texte, par exemple, la valeur est restituée sous forme de texte brut dans la cellule appropriée du tableau HTML. Si vous voulez que le champ personnalisé s’affiche d’une manière particulière, vous devez utiliser une feuille de style XSLT pour définir la façon dont il doit être rendu. La section suivante montre comment procéder.

Définition du rendu personnalisé pour un champ personnalisé

La procédure suivante montre comment créer une feuille de style XSLT personnalisée pour afficher un type de champ personnalisé.

Pour créer une feuille de style XSLT personnalisée pour le rendu de champ

Créez un fichier texte avec l’extension « xsl ». Il doit être nommé de la forme fldtypes_*.xsl, où l’astérisque (*) désigne une chaîne de caractères autorisés de nom de fichier. Pensez à utiliser le nom du fichier personnalisé, tel que fldtypes_ISBN.xsl. Si vous disposez de plusieurs feuilles de style XSLT personnalisées, pensez à utiliser le nom de votre entreprise, par exemple fldtypes_Contoso.xsl, et à toutes les inclure dans le même fichier. Évitez d’utiliser une chaîne qui risque d’être utilisée par un autre fournisseur de solutions.

Ajoutez la déclaration de feuille de style suivante au fichier.

<xsl:stylesheet xmlns:x="http://www.w3.org/2001/XMLSchema"
                xmlns:d="https://schemas.microsoft.com/sharepoint/dsp"
                version="1.0"
                exclude-result-prefixes="xsl msxsl ddwrt"
                xmlns:ddwrt="https://schemas.microsoft.com/WebParts/v2/DataView/runtime"
                xmlns:asp="https://schemas.microsoft.com/ASPNET/20"
                xmlns:__designer="https://schemas.microsoft.com/WebParts/v2/DataView/designer" 
                xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                xmlns:msxsl="urn:schemas-microsoft-com:xslt"
                xmlns:SharePoint="Microsoft.SharePoint.WebControls"
                xmlns:ddwrt2="urn:frontpage:internal">


</xsl:stylesheet>

Ouvrez le fichier intitulé fldtypes.xsl dans %ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\TEMPLATE\LAYOUTS\XSL et cherchez le modèle qui affiche votre champ par défaut. Si, par exemple, le type de base de votre champ est Currency (Monétaire), son modèle est FieldRef_Number_body. Copiez le modèle comme enfant de votre élément xsl:stylesheet. Voici un exemple d’utilisation du modèle FieldRef_Number_body.

<xsl:stylesheet > <!-- stylesheet attributes omitted for brevity -->

  <xsl:template name="FieldRef_Number_body" ddwrt:dvt_mode="body" match="FieldRef" mode="Number_body">
    <xsl:param name="thisNode" select="."/>
    <xsl:choose>
      <xsl:when test="$FreeForm">
        <xsl:call-template name="FieldRef_ValueOf_DisableEscape">
          <xsl:with-param name="thisNode" select="$thisNode"/>
        </xsl:call-template>
      </xsl:when>
      <xsl:otherwise>
        <div align="right">
          <xsl:call-template name="FieldRef_ValueOf_DisableEscape">
            <xsl:with-param name="thisNode" select="$thisNode"/>
          </xsl:call-template>
        </div>
      </xsl:otherwise>
    </xsl:choose>
  </xsl:template>

</xsl:stylesheet>

Supprimez l’attribut name de l’élément xsl:template (dans ce cas, name="FieldRef_Number_body"). De même, supprimez l’attribut ddwrt:dvt_mode s’il existe.
Modifiez l’attribut match de sorte que le modèle ne corresponde qu’aux champs avec le nom interne exact de votre champ personnalisé. À cette fin, utilisez un prédicat XSLT qui spécifie la valeur requise de l’attribut Name de l’élément FieldRef. Par exemple, supposons que vous ayez un champ Net Profit/Loss dont le nom interne est « Net_x0020_Profit_x002f_Loss », la balise de début de votre modèle doit se présenter comme suit.
```
<xsl:template match="FieldRef[@Name='Net_x0020_Profit_x002f_Loss']" mode="Number_body">
```
Ainsi, vous êtes assuré de personnaliser uniquement la restitution de votre type de champ personnalisé, et non de tous les champs ayant Currency (Monétaire) ou Number (Nombre) comme type de base.
Modifiez et complétez le balisage du modèle pour produire l’effet de rendu que vous souhaitez. Voir la section ci-après pour un exemple concret.
Enregistrez et copiez le fichier fldtypes_*.xsl sur %ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\TEMPLATE\LAYOUTS\XSL sur tous les serveurs.
Réinitialisez l’application Web de façon à ce que les fichiers %ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\ de TEMPLATE\LAYOUTS\XSL soient rechargés. Votre fichier personnalisé remplace l’un des fichiers intégrés.

Exemple : personnalisation du champ Currency (Monétaire)

À titre d’exemple détaillé de l’étape 6, cette section montre comment restituer en rouge la valeur du champ Net Profit/Loss chaque fois qu’il s’agit d’un nombre négatif. Après l’étape 5, votre modèle doit se présenter comme suit.

<xsl:stylesheet > <!-- stylesheet attributes omitted for brevity -->

  <xsl:template match="FieldRef[@Name='Net_x0020_Profit_x002f_Loss']" mode="Number_body">
    <xsl:param name="thisNode" select="."/>
    <xsl:choose>
      <xsl:when test="$FreeForm">
        <xsl:call-template name="FieldRef_ValueOf_DisableEscape">
          <xsl:with-param name="thisNode" select="$thisNode"/>
        </xsl:call-template>
      </xsl:when>
      <xsl:otherwise>
        <div align="right">
          <xsl:call-template name="FieldRef_ValueOf_DisableEscape">
            <xsl:with-param name="thisNode" select="$thisNode"/>
          </xsl:call-template>
        </div>
      </xsl:otherwise>
    </xsl:choose>
  </xsl:template>

</xsl:stylesheet>

Notez d’abord que la restitution par défaut ramifie cela en fonction du test du paramètre FreeForm. Le test retourne la valeur true si l’attribut Type de l’élément Toolbar de l’arborescence des nœuds source est « FreeForm ». Si la valeur de l’attribut est « Standard » ou si l’attribut n’est simplement pas présent, le modèle ajoute le balisage HTML pour justifier à droite la valeur du champ au sein de sa cellule. (Voir Exemples d’arborescences de nœuds d’entrée et de résultat dans les transformations XSLT pour un exemple d’une arborescence de nœuds source et de son élément Toolbar. Pour plus d’informations, voir aussi Toolbar, élément (View).) Comme les valeurs négatives doivent être en rouge quel que soit le type de barre d’outils, vous devez apporter les modifications qui s’imposent du balisage aux deux branches.

Notez également que le modèle appelle un autre modèle, intitulé FieldRef_ValueOf_DisableEscape, pour afficher réellement la valeur. Le dernier modèle se trouve aussi dans fldtypes.xsl et est défini comme suit.

<xsl:template name="FieldRef_ValueOf_DisableEscape" ddwrt:dvt_mode="body">
  <xsl:param name="thisNode" select="."/>
  <xsl:value-of disable-output-escaping="yes" select="$thisNode/@*[name()=current()/@Name]" />
</xsl:template>

Comme l’exemple nous le démontre, ce modèle est différent, par rapport au modèle de restitution de champ standard qui utilise la ligne <xsl:value-of select="$thisNode/@*[name()=current()/@Name]" /> pour afficher la valeur du champ, uniquement en ce qu’il ajoute l’attribut disable-output-escaping="yes" (voir plus haut dans la présente rubrique).

Au sein de l’élément <xsl:when test="$FreeForm">, ajoutez une structure choose-when-otherwise et déplacez l’appel existant du modèle FieldRef_ValueOf_DisableEscape vers l’élément <xsl:otherwise>, comme illustré dans l’exemple suivant.

<xsl:when test="$FreeForm">
  <xsl:choose> 
    <when test=""> 

    </when> 
    <otherwise>
        <xsl:call-template name="FieldRef_ValueOf_DisableEscape">
          <xsl:with-param name="thisNode" select="$thisNode"/>
        </xsl:call-template>
    </otherwise> 
  </choose>
</xsl:when>

La valeur de test doit être true chaque fois que la valeur du champ Net_x0020_Profit_x002f_Loss actif est négative, c’est-à-dire chaque fois que la valeur est inférieure à zéro. Nous avons déjà vu que $thisNode/@*[name()=current()/@Name] correspond au champ actif. Cependant, les champs monétaires SharePoint Foundation obtiennent une mise en forme de bas niveau même avant que la mise en forme XSLT ne soit appliquée. Plus précisément, une valeur monétaire négative s’exprime à l’aide de parenthèses plutôt que du signe « - » (moins). Par exemple, une perte de 497 882,87 € s’exprime sous la forme « (497 882,87 €) » au lieu de « -497 882,87 € ». Il s’ensuit un problème parce que le processeur XSLT traite toute expression entre parenthèses comme supérieure à 0 et, par conséquent, nous ne pouvons pas comparer directement la valeur de $thisNode/@*[name()=current()/@Name] à zéro. Heureusement, pour les types de champ Currency (Monétaire), SharePoint Foundation ajoute au balisage du paramètre thisNode une seconde version de la valeur du champ comme valeur de type double qui, lorsqu’elle est négative, s’exprime accompagnée du signe « - » (moins). Plus précisément, cette version représente la valeur d’un attribut de l’élément Row qui porte le même nom que l’attribut Net_x0020_Profit_x002f_Loss, à la seule différence qu’un seul « . » est ajouté à la fin du nom de l’attribut. Comparez, par exemple, les attributs « Retail_x0020_Price » et « Retail_x0020_Price. » de l’élément Rowde l’exemple de « thisNode » dans Exemples d’arborescences de nœuds d’entrée et de résultat dans les transformations XSLT.

Utilisez cet attribut avec le nom terminé par le point (.) pour tester une valeur négative. L’expression test doit se présenter comme suit.

<xsl:when test="$thisNode/@*[name()=concat(current()/@Name, '.')] &lt; 0">

Conseil
L’opérande « < » doit être utilisé à la place de « < », parce que ce dernier apparaîtrait aux yeux du processeur XSLT comme le début d’un élément. Si vous préférez, vous pouvez inverser les opérandes, ce qui vous permet d’utiliser un simple signe « > » : "0 > $thisNode/@*[name()=concat(current()/@Name, '.')]".

Maintenant, à l’intérieur de la structure when interne, copiez l’appel au modèle FieldRef_ValueOf_DisableEscape, mais enveloppez-le dans les littéraux HTML qui colorient la valeur en rouge. L’exemple suivant illustre ce à quoi la structure when externe doit maintenant ressembler.

<xsl:when test="$FreeForm">
  <xsl:choose> 
    <xsl:when test="$thisNode/@*[name()=concat(current()/@Name, '.')] &lt; 0"> 
      <span style="color:red">
        <xsl:call-template name="FieldRef_ValueOf_DisableEscape">
          <xsl:with-param name="thisNode" select="$thisNode"/>
        </xsl:call-template>
      </span>
    </xsl:when> 
    <xsl:otherwise>
      <xsl:call-template name="FieldRef_ValueOf_DisableEscape">
        <xsl:with-param name="thisNode" select="$thisNode"/>
      </xsl:call-template>
    </xsl:otherwise> 
  </xsl:choose>
</xsl:when>

Comme noté précédemment, le champ doit afficher la même couleur quel que soit le type de barre à outils et, par conséquent, la totalité de la structure choose interne doit devenir le contenu de l’élément div de la partie otherwise de la structure choose externe. Vous obtenez alors la définition de modèle suivante.

<xsl:template match="FieldRef[@Name='Net_x0020_Profit_x002f_Loss']" mode="Number_body">
    <xsl:param name="thisNode" select="."/>

  <xsl:choose>
    <xsl:when test="$FreeForm">
      <xsl:choose> 
        <xsl:when test="$thisNode/@*[name()=concat(current()/@Name, '.')] &lt; 0"> 
          <span style="color:red">
            <xsl:call-template name="FieldRef_ValueOf_DisableEscape">
              <xsl:with-param name="thisNode" select="$thisNode"/>
          </xsl:call-template>
          </span>
        </xsl:when> 
        <xsl:otherwise>
          <xsl:call-template name="FieldRef_ValueOf_DisableEscape">
            <xsl:with-param name="thisNode" select="$thisNode"/>
          </xsl:call-template>
        </xsl:otherwise> 
      </xsl:choose>
    </xsl:when>
    <xsl:otherwise>    
      <div align="right">
        <xsl:choose> 
          <xsl:when test="$thisNode/@*[name()=concat(current()/@Name, '.')] &lt; 0"> 
            <span style="color:red">
              <xsl:call-template name="FieldRef_ValueOf_DisableEscape">
                <xsl:with-param name="thisNode" select="$thisNode"/>
            </xsl:call-template>
            </span>
          </xsl:when> 
          <xsl:otherwise>
            <xsl:call-template name="FieldRef_ValueOf_DisableEscape">
              <xsl:with-param name="thisNode" select="$thisNode"/>
            </xsl:call-template>
          </xsl:otherwise> 
        </xsl:choose>
      </div>
    </xsl:otherwise>
  </xsl:choose>
</xsl:template

Cette solution peut être rendue plus facile à maintenir à l’aide de variables et de paramètres XSLT pour encapsuler les parties répétitives, et par l’imbrication des modèles. L’exemple suivant illustre une version de la feuille de style qui utilise ces techniques.

<xsl:stylesheet xmlns:x="http://www.w3.org/2001/XMLSchema"
                xmlns:d="https://schemas.microsoft.com/sharepoint/dsp"
                version="1.0"
                exclude-result-prefixes="xsl msxsl ddwrt"
                xmlns:ddwrt="https://schemas.microsoft.com/WebParts/v2/DataView/runtime"
                xmlns:asp="https://schemas.microsoft.com/ASPNET/20"
                xmlns:__designer="https://schemas.microsoft.com/WebParts/v2/DataView/designer" 
                xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                xmlns:msxsl="urn:schemas-microsoft-com:xslt"
                xmlns:SharePoint="Microsoft.SharePoint.WebControls"
                xmlns:ddwrt2="urn:frontpage:internal">

  <xsl:template match="FieldRef[@Name='Net_x0020_Profit_x002f_Loss']" mode="Number_body">
    <xsl:param name="thisNode" select="."/>
    
    <xsl:variable name="FieldValue">   
      <xsl:call-template name="FieldRef_ValueOf_DisableEscape">
        <xsl:with-param name="thisNode" select="$thisNode" />
      </xsl:call-template>
    </xsl:variable>
           
    <xsl:variable name="ValueIsNegative">
      <xsl:value-of select="$thisNode/@*[name()=concat(current()/@Name, '.')]  &lt; 0" />
    </xsl:variable>
    
    <xsl:choose>
      <xsl:when test="$FreeForm">
        <xsl:call-template name="RedWhenNegative_ElseBlack" >  
             <xsl:with-param name="thisNode" select="$thisNode" />
             <xsl:with-param name="ValueIsNegative" select="$ValueIsNegative" />
               <xsl:with-param name="FieldValue" select="$FieldValue" />
          </xsl:call-template>
      </xsl:when>
      <xsl:otherwise>    
        <div align="right">
          <xsl:call-template name="RedWhenNegative_ElseBlack" >  
        <xsl:with-param name="thisNode" select="$thisNode" />
        <xsl:with-param name="ValueIsNegative" select="$ValueIsNegative" />
        <xsl:with-param name="FieldValue" select="$FieldValue" />
              </xsl:call-template>
        </div>
      </xsl:otherwise>
    </xsl:choose>
    
  </xsl:template>
  
  <xsl:template name="FieldValueInRed">
    <xsl:param name="thisNode" select="." />
    <xsl:param name="FieldValue" select="." />
    
    <span style="color:red">
      <xsl:value-of select="$FieldValue" />
    </span>
    
  </xsl:template>
  
  <xsl:template name="RedWhenNegative_ElseBlack">
    <xsl:param name="thisNode" select="." />
    <xsl:param name="ValueIsNegative" select="." />
    <xsl:param name="FieldValue" select="." />
    
    <xsl:choose> 
      <xsl:when test="$ValueIsNegative='true'">
          <xsl:call-template name="FieldValueInRed">
            <xsl:with-param name="thisNode" select="$thisNode" />
                <xsl:with-param name="FieldValue" select="$FieldValue" />
          </xsl:call-template>      
      </xsl:when> 
      <xsl:otherwise>
        <xsl:value-of select="$FieldValue" />
      </xsl:otherwise> 
    </xsl:choose>

  </xsl:template>
  
</xsl:stylesheet>

La figure 1 montre comment le champ apparaît sur une liste.

Figure 1 : champ monétaire avec valeurs négatives en rouge

Colonne Devise avec valeur négative en rouge.

Voir aussi

Tâches

Procédure pas à pas : création d'un type de champ personnalisé

Concepts

Types de champ personnalisés

Partager via