Présentation et objectif
Out of the box, MOUSSE’ WebPart requête de contenu (CQWP) affiche les résultats dans un format de liste, semblables aux résultats de la recherche. Il est également possible d'afficher les résultats sous forme de grille (i.e. Format de tableau HTML). Formats de grille sont meilleures dans certaines circonstances. Je décris comment arriver à cet effet dans le présent article.
Scénario d'entreprise
J'ai travaillé avec un client sur un déploiement MOSS d'échelle de l'entreprise. Nous avons conçu leur taxinomie, telles que projets sont des citoyens de première classe dans la hiérarchie et ont leur propre site de niveau supérieur. Chefs de projet maintient une liste de singleton des informations sommaires sur le projet, par exemple, titre, budget, date d'achèvement prévue, budget restant et autres champs type de résumé. Par « singleton" Je veux dire une liste SharePoint personnalisée garantie pour ne contenir qu'un seul élément. De manière simpliste, Il ressemble à ceci:
L'approche technique est bien la même que celle décrite ici (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!447.entry). Le WebPart utilise une transformation XSL pour émettre HTML du navigateur pour le rendu.
J'envisage toujours le résultat avant de plonger dans le XSL, XSL étant un cauchemar. Voici mon résultat souhaité:
HTML comme ceci génère ce résultat:
|
|
<html>
<corps>
<Centre>
<table frontière= 1>
<!-- Étiquettes-->
<TR bgcolor= bleu>
<TD><polices Couleur= blanc><b>Nom du projet</b></polices></TD>
<TD aligner= droite><polices Couleur= blanc><b>Date complète</b></polices></TD>
<TD aligner= droite><polices Couleur= blanc><b>Budget</b></polices></TD>
<TD aligner= droite><polices Couleur= blanc><b>Dépense réelle</b></polices></TD>
<TD><polices Couleur= blanc><b>État général</b></polices></TD>
</TR>
<TR>
<TD>Recâbler salle informatique.</TD>
<TD aligner= droite>02/01/08</TD>
<TD aligner= droite>22,500.00</TD>
<TD aligner= droite>19,000.00</TD>
<TD>En cours</TD>
</TR>
<TR>
<TD>Serveurs de disposition pour la mise à niveau SQL</TD>
<TD aligner= droite>04/01/08</TD>
<TD aligner= droite>7,500.00</TD>
<TD aligner= droite>0.00</TD>
<TD>Prévues</TD>
</TR>
</table>
</Centre>
</corps>
</html>
|
Approche
Procédez comme suit pour créer la grille:
- Identifier les composantes de la grille (lignes/colonnes).
- Définir et créer des colonnes de site nécessaires.
- Créer des sous-sites pour les projets et les listes de singleton.
- Ajoutez le WebPart à une page web et le configurer pour rechercher vos listes.
- Modifier XML de la CQWP pour pouvoir les colonnes supplémentaires.
- Modifier le langage XSL pour générer une table.
Je vais me concentrer sur numéro six. Numéros d'un à quatre sont simples et quelque chose que n'importe quel utilisateur WebPart a déjà fait. Numéro cinq a été bien documenté par des tiers, y compris cet article en charge exhaustif de capture d'écran de MSDN ici (http://msdn2.microsoft.com/en-us/library/bb897399.aspx) et le blog de Heather Solomon ici (http://www.heathersolomon.com/blog/articles/CustomItemStyle.aspx).
Écrous et boulons
Commencer et mettre en œuvre les étapes une à cinq selon la documentation MSDN et article de Heather Solomon.
À ce point, vous avez ajouté votre WebPart à la page et vous avez votre <CommonViewFields> configuré selon les besoins.
Suivant la procédure habituelle, Je reçois ces résultats intermédiaires:
1. Créer un type de contenu, une liste personnalisée modélisée pour ce type de contenu et deux sites. Voici le type de contenu:
Voici la structure du site:
2. Ajoutez le WebPart après avoir créé mon projet sous-sites et singleton listes sommaires de projet:
3. Ajouter toutes les données supplémentaires je veux via le <CommonViewFields>:
<propriété nom="CommonViewFields" type="chaîne">Project_x0020_Name;Project_x0020_Expenses;Project_x0020_Status;Project_x0020_Start_x0020_Date;Project_x0020_End_x0020_Date;Project_x0020_Budget</propriété>
Notez que j'ai dû garder tous les champs de propriété sur une ligne ou il ne fonctionnerait pas (CQWP me disait que la requête a retourné aucun élément).
4. À ce point, Nous sommes prêts à aller au-delà de l'article MSDN et flip sur l'article de Heather Solomon. Suivez ses étapes commençant près étape #5 pour créer un personnalisé / version incarnée de ItemStyle.xsl. J'ai suivi les conseils de Heather, vers le haut jusqu'à l'étape 11 et d'obtenir ces résultats intermédiaires:
4.1: Nom de mon modèle XSL comme suit:
<XSL:nom du modèle = "grille" match = "Row[@Style = "Grille"]" mode = « itemstyle »>
J'ai également légèrement modifier lui a suggéré <XSL:pour chaque …> en ajoutant un <br /> balise pour fournir une liste plus propre:
<XSL:pour chaque Sélectionnez="@*">
P:<XSL:de la valeur Sélectionnez="nom()" /><br/>
</XSL:pour chaque>
4.2: J'ai modifier le composant WebPart, allez dans apparence et sélectionnez ma grille"" style:
Appliquer le changement et voici le résultat:
De ce qui précède, nous pouvons voir que les domaines que nous voulons (Nom du projet, frais, statut, etc.) n'existe pas pour nous d'utiliser lorsque nous émettons le code HTML. Non seulement cela, mais nous voyons les noms par lequel nous devons faire référence à ces colonnes dans le XSL. Par exemple, nous référençons projet statut comme « Project_x005F_x0020_Name ».
À ce point, Nous partons du blog de Heather et des épaules de ces géants, J'ajoute mon propre petit peu.
ContentQueryMain.xsl
NOTE: Lorsque des changements à la fois ContentQueryMain.xsl ainsi que ItemStyle.xsl, vous devez vérifier que ces fichiers en arrière en avant de voir l'effet de vos modifications.
À des fins de fabrication de grille, MOSS utilise deux fichiers XSL différents pour produire les résultats que nous voyons dans une CQWP. Pour générer le bit précédent de sortie, Nous avons modifié ItemStyle.xsl. MOSS utilise en fait un autre fichier XSL, ContentQueryMain.xsl pour conjointement avec ItemStyle.xsl pour générer son code HTML. Comme son nom l'indique, ContentQueryMain.xsl est le principal"" XSL qui contrôle l'ensemble du flux de traduction. Il parcourt tous les éléments trouvés et les passe un par un pour modèles ItemStyle.xsl. Nous allons modifier ItemStyle.xsl pour générer l'open <table> balise avant d'émettre la première ligne de données et de la fermeture <table> balise après émission de la dernière rangée. Pour y parvenir, ContentQueryMain.xsl est modifié pour passer deux paramètres à notre grille"" modèle en ItemStyle.xsl, "dernière ligne" et « ligne active ». ItemStyle.xsl utilise pour émettre sous certaines conditions les balises nécessaires.
À l'aide technique de Heather Solomon, Nous localiser ContentQueryMain.xsl. Il est situé au même endroit que ItemStyle.xsl. Cette capture d'écran devrait aider:
Nous avons besoin d'apporter les modifications suivantes:
- Modifier un modèle xsl, "CallItemTemplate" qui appelle en fait notre modèle de grille dans ItemStyle.xsl. Nous passerons deux paramètres dans le modèle de grille afin qu'elle aura les données qu'il doit générer sous certaines conditions d'ouverture et de fermeture <table> balises.
- Modifier un autre peu de ContentQueryMain.xsl qui appelle le "CallItemTemplate" pour réussir un LastRow"" paramètre afin que LastRow peut-être être transmise à notre modèle de grille.
Recherchez le modèle nommé "OuterTemplate.CallItemTemplate" identifié par la chaîne:
<XSL:modèle nom="OuterTemplate.CallItemTemplate">
Remplacer le modèle entier comme suit:
|
|
<XSL:modèle nom="OuterTemplate.CallItemTemplate">
<XSL:Param nom="CurPosition" />
<!--
Ajouter le LastRow"" paramètre.
Nous l'utilisons uniquement lorsque l'élément style pass en est la « Grille ».
-->
<XSL:Param nom="LastRow" />
<XSL:choisir>
<XSL:Lorsque test="@Style = 'NewsRollUpItem'">
<XSL:appliquer-templates Sélectionnez="." mode="ItemStyle">
<XSL:avec-param nom="EditMode" Sélectionnez="$cbq_iseditmode" />
</XSL:appliquer-templates>
</XSL:Lorsque>
<XSL:Lorsque test="@Style = 'NewsBigItem'">
<XSL:appliquer-templates Sélectionnez="." mode="ItemStyle">
<XSL:avec-param nom="CurPos" Sélectionnez="$CurPosition" />
</XSL:appliquer-templates>
</XSL:Lorsque>
<XSL:Lorsque test="@Style = 'NewsCategoryItem'">
<XSL:appliquer-templates Sélectionnez="." mode="ItemStyle">
<XSL:avec-param nom="CurPos" Sélectionnez="$CurPosition" />
</XSL:appliquer-templates>
</XSL:Lorsque>
<!--
Passer de la position actuelle et lastrow au modèle grille itemstyle.xsl.
ItemStyle.xsl qui utilisera pour émettre l'ouverture et de fermeture <table> balises.
-->
<XSL:Lorsque test="@Style = "Grille"">
<XSL:appliquer-templates Sélectionnez="." mode="ItemStyle">
<XSL:avec-param nom="CurPos" Sélectionnez="$CurPosition" />
<XSL:avec-param nom="Dernière" Sélectionnez="$LastRow" />
</XSL:appliquer-templates>
</XSL:Lorsque>
<XSL:autrement>
<XSL:appliquer-templates Sélectionnez="." mode="ItemStyle">
</XSL:appliquer-templates>
</XSL:autrement>
</XSL:choisir>
</XSL:modèle>
|
Les observations décrivent l'objet des modifications.
Bien sûr, le OuterTemplate.CallItemTemplate"" est elle-même appelée à partir d'un autre modèle. Localiser ce modèle en recherchant cette chaîne de texte:
<XSL:modèle nom="OuterTemplate.Body">
Faites défiler les instructions dans OuterTemplate.Body et insérer le paramètre LastRow comme suit (montré comme un commentaire en italique):
<XSL:appel-modèle nom="OuterTemplate.CallItemTemplate">
<XSL:avec-param nom="CurPosition" Sélectionnez="$CurPosition" />
<!-- Insérer le paramètre LastRow. -->
<XSL:avec-param nom="LastRow" Sélectionnez="$LastRow"/>
</XSL:appel-modèle>
Après tout cela, Nous avons enfin les choses correctement mis en place afin que nos ItemStyle.xsl peut émettre <table> balises au bon endroit.
ItemStyle.Xsl
NOTE: Encore une fois, heure d'arrivée ItemStyle.xsl après d'apporter des modifications afin que vous voyez l'effet de ces changements.
Nous avons deux tâches ici:
- Remplacer le modèle de grille complet. Vous pouvez copier/coller d'en bas.
- Ajouter certains charabia en dehors de la définition du modèle qui permet de "formatcurrency" modèle de travailler. (Vous pouvez dire que j'ai une poignée ténue sur XSL).
Première, haut de ItemStyle.xsl, Ajoutez cette ligne:
<!-- Certains charabia qui nous permet d'afficher des États-Unis. monnaie. -->
<XSL:format décimal nom="personnel" chiffres="D" />
<XSL:modèle nom="Par défaut" match de football="*" mode="ItemStyle">
Remarque que je l'ai ajouté directement avant le <XSL:nom du modèle = "par défaut" …> définition.
Prochaine, revenir à notre modèle de grille. Remplacer le modèle de grille complet avec le code ci-dessous. Il est abondamment commenté, mais n'hésitez pas à m'envoyer un email ou de laisser des commentaires sur mon blog, si vous avez des questions.
|
|
<XSL:modèle nom="Grille" match de football="Ligne[@Style = "Grille"]" mode="ItemStyle">
<!--
ContentMain.xsl passe CurPos et dernier.
Nous utilisons ces à émettre sous certaines conditions l'ouverture et de fermeture <table> balises.
-->
<XSL:Param nom="CurPos" />
<XSL:Param nom="Dernière" />
<!-- Les variables suivantes sont non modifiées de la norme ItemStyle.xsl -->
<XSL:variable nom="SafeImageUrl">
<XSL:appel-modèle nom="OuterTemplate.GetSafeStaticUrl">
<XSL:avec-param nom="UrlColumnName" Sélectionnez="'ImageUrl'"/>
</XSL:appel-modèle>
</XSL:variable>
<XSL:variable nom="SafeLinkUrl">
<XSL:appel-modèle nom="OuterTemplate.GetSafeLink">
<XSL:avec-param nom="UrlColumnName" Sélectionnez="« LinkUrl »"/>
</XSL:appel-modèle>
</XSL:variable>
<XSL:variable nom="DisplayTitle">
<XSL:appel-modèle nom="OuterTemplate.GetTitle">
<XSL:avec-param nom="Titre" Sélectionnez="@Title"/>
<XSL:avec-param nom="UrlColumnName" Sélectionnez="« LinkUrl »"/>
</XSL:appel-modèle>
</XSL:variable>
<XSL:variable nom="LinkTarget">
<XSL:Si test="@OpenInNewWindow = « True »" >_blank</XSL:Si>
</XSL:variable>
<!--
Ici, nous définissons une variable, « tableStart ». Ce dernier contient le code HTML que nous utilisons pour définir l'ouverture de la table ainsi que les étiquettes de colonne. Notez que si CurPos = 1, Il inclut le code HTML dans une balise CDATA.
Dans le cas contraire, il sera vide.
La valeur de tableStart est émise chaque fois ItemStyle est appelée via ContentQueryMain.xsl.
-->
<XSL:variable nom="tableStart">
<XSL:Si test="$CurPos = 1">
<![CDATA[
<bordure du tableau = 1>
<TR bgcolor = « blue »>
<TD><couleur de police = « white »><b>Nom du projet</b></polices></TD>
<td align = « right »><couleur de police = « white »><b>Date complète</b></polices></TD>
<td align = « right »><couleur de police = « white »><b>Budget</b></polices></TD>
<td align = « right »><couleur de police = « white »><b>Dépense réelle</b></polices></TD>
<TD><couleur de police = « white »><b>État général</b></polices></TD>
</TR>
]]>
</XSL:Si>
</XSL:variable>
<!--
Une autre variable, tableEnd définit simplement la fermeture balise de tableau.
Comme avec tableStart, Il est toujours émise. C'est pourquoi sa valeur est assignée conditionnelle basée sur si nous avons passés la dernière rangée de ContentQueryMain.xsl.
-->
<XSL:variable nom="tableEnd">
<XSL:Si test="$CurPos = $Last">
<![CDATA[ </table> ]]>
</XSL:Si>
</XSL:variable>
<!--
Émettent toujours le contenu de tableStart. Si ce n'est pas la première ligne passée à nous par ContentQueryMain.xsl, Ensuite, nous connaissons que sa valeur sera vide.
Désactiver la sortie s'échapper parce que quand tableStart il non pas vides, Il inclut HTML réel que nous voulons être restitué par le navigateur. Si nous ne disons l'analyseur XSL pour désactiver la sortie échappement, il génère des trucs comme"<table>" au lieu de"<table>".
-->
<XSL:de la valeur Sélectionnez="$tableStart" disable-output-escaping="Oui"/>
<TR>
<!--
P:Project_x005F_x0020_Name P:Project_x005F_x0020_End_x005F_x0020_Date P:Project_x005F_x0020_Budget P:Project_x005F_x0020_Expenses P:Project_x005F_x0020_Status
-->
<TD>
<XSL:de la valeur Sélectionnez="@Project_x005F_x0020_Name"/>
</TD>
<TD aligner="droit">
<XSL:de la valeur Sélectionnez="@Project_x005F_x0020_End_x005F_x0020_Date"/>
</TD>
<TD aligner="droit">
<XSL:appel-modèle nom="FormatCurrency">
<XSL:avec-param nom="valeur"
Sélectionnez="@Project_x005F_x0020_Budget"></XSL:avec-param>
</XSL:appel-modèle>
</TD>
<TD aligner="droit">
<XSL:appel-modèle nom="FormatCurrency">
<XSL:avec-param nom="valeur" Sélectionnez="@Project_x005F_x0020_Expenses">
</XSL:avec-param>
</XSL:appel-modèle>
</TD>
<TD>
<XSL:de la valeur Sélectionnez="@Project_x005F_x0020_Status"/>
</TD>
<!--
Tous les éléments suivants est commentée pour clarifier les choses.
Cependant, le ramener et tout ça dans un <TD> pour voir son effet.
-->
<!--
<div id = "linkitem" Class = « item »>
<XSL:si test = "string-length($SafeImageUrl) != 0">
<div class = « image-zone-left »>
<a href = "{$SafeLinkUrl}" cible = "{$LinkTarget}">
<IMG class = "image-fixed-width" SRC = "{$SafeImageUrl}"
Alt = "{@ImageUrlAltText}"/>
</un>
</Div>
</XSL:Si>
<div class = « lien-item »>
<XSL:appel-modèle
Name="OuterTemplate.CallPresenceStatusIconTemplate"/>
<a href = "{$SafeLinkUrl}"
cible = "{$LinkTarget}" titre = "{@LinkToolTip}">
<XSL:de la valeur select = « $DisXSLyTitle » />
</un>
<div class = « description »>
<XSL:valeur-de select="@Description" />
</Div>
</Div>
</Div>
-->
</TR>
<!--
Émettre la fermeture balise de tableau. Si nous ne sommes pas sur la dernière rangée,
ce sera vide.
-->
<XSL:de la valeur Sélectionnez="$tableEnd" disable-output-escaping="Oui"/>
</XSL:modèle>
<XSL:modèle nom="FormatCurrency">
<XSL:Param nom="valeur" Sélectionnez="0" />
<XSL:de la valeur Sélectionnez='format-nombre($valeur, $DDD",DDD,DDD.DD", « personnel »)' />
</XSL:modèle>
|
