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" |
Cela a été incroyablement utile. Merci!
AAH… C'était parce que j'ai nommé mon Style de liste différemment et ne savait pas que dans le ContentQueryMain.xsl, il vérifie pour le « style »:
<XSL:Lorsque test="@Style='NameOfMyStyle'">
Avec celui renommé, il a travaillé. 🙂
Pratiquement, cela a fonctionné pour moi: J'ai réussi à la sortie du </table> balise de fin correctement, mais la départ balise est manquante.. Il semble le test = "$CurPos = 1" ne retourne pas true. Mais pourquoi?
Grand poste. Paul, j'ai fait tout ce qui précède. J'ai une requête, Comment puis-je atteindre la somme de "TOTAL frais réels" ou la somme des valeurs de deux colonnes.
Avez-vous fait des travaux avec la création de fichiers xsl personnalisés ContentQueryMain et ItemStyle? La raison pour laquelle que je demande, c'est que je ne veux pas à vous soucier de mon styles personnalisés soient écrasés avec des correctifs ou mises à niveau. Avez-vous des exemples? J'ai essayé de faire une copie identique de le ContentQueryMain.xsl et le téléchargement de cette nouvelle copie personnalisée à la bibliothèque de styles. En mettant une référence à ce fichier xsl dans la propriété MainXslLink de la .webpart, J'obtiens 401 non autorisé. Le fichier xsl personnalisé est une version publiée et tout le monde a accès en lecture à elle.
poste fantastique Merci! Ont dû faire face à cela maintenant pour les derniers jours.
Salut, Il s'agissait d'une annonce vraiment utile. Je l'ai tout travail, et changement d'également implémenté Mike Brown donc elle regroupe
les résultats à l'intérieur de la table de tout ce que j'ai choisi comme paramètre dans les propriétés de le CQWB Group By.
J'ai fait le titre un lien aussi, pour qu'elle fonctionne bien. J'ai encore un problème, Bien que. Je suis regroupant les résultats par nom de site. À l'intérieur de la table, Il regroupe les bien, et il est super, mais c'est quand même impression de tout le groupe
noms de(dans mon cas les noms des sites) au-dessus de la table. Est-ce que quelqu'un sait comment se débarrasser de ces?
Merci,
Greg
Bel article. J'ai réussi à donner à ma table l'apparence des listes de Sharepoint par défaut en analysant le code source de la liste. Voici les principaux blocs HTML nécessaires pour s'adapter dans ItemStyle:
<Largeur de la TABLE = "100 %" Class = "ms-listviewtable" border = 0 cellspacing = 0 cellpadding = 1 dir = « None »>
<!–EN-TÊTE–>
<Classe TR = "ms-viewheadertr" VALIGN = TOP>
<Portée nowrap TH = "col" class = « ms-vh2 »><div style = "width:100%;position:relative;gauche:0;Retour au début:0;">
<Style de TABLE = "largeur:100%;" CtxNum = "1" height = "100 %" CellSpacing = 1 cellpadding = 0 class = « ms-unselectedtitle »>
<TR>
<TD largeur = "100 %" Class = "ms-vb" NoWrap>
Texte du titre ici
</TD>
<Style TD = "position:absolue;">
</TD>
</TR>
</TABLE></Div>
</TH>
<!–Répéter pour toutes les cellules d'en-tête–>
</TR>
<!– Données de la table –>
<Classe TR = "">
<!–Colonne de données, Utilisez le code de Paul pour l'une avec le lien hypertexte –>
<TD Class = « ms-vb2 »>Données ici</TD>
<!–Colonne vide–>
<TD Class = « ms-vb2 »>
<span dir = None></travée><
/TD>
<!–Colonne date–>
<TD Class = « ms-vb2 »>
<NOBR>11/12/2008</NOBR>
</TD>
</TR>
<!–***Ligne remplaçant – Utiliser une nouvelle variable XSL qui insère la classe alternative basée sur la ligne actuelle modulo 2–>
<Classe TR = « ms-alternance »>
…
</TR>
</TABLE>
Thatz justement je cherchais...Vous rock homme...Longue vie à...T'aime pour le poste..
<XSL:sélectionnez appliquer-templates = "." mode = « itemstyle »>
<XSL:avec-param name = "CurPos" Sélectionnez = "$CurPosition" />
<XSL:avec-param name = "Last" Sélectionnez = "$LastRow" />
<XSL:avec-param name = "StartNewGroup" SELECT="@__begingroup" />
</XSL:Lorsque>
<XSL:Quand tester = "$StartNewGroup = « True »">
<TR>
<TD >
<XSL:name="OuterTemplate.GetGroupName call-template">
<XSL:avec-param name = "GroupName" SELECT="@*[nom()= $Group]"/>
<XSL:avec-param name = "GroupType" Sélectionnez = « $GroupType » />
</XSL:appel-modèle>
</TD>
</TR>
</XSL:Lorsque>
<XSL:autrement>
</XSL:autrement>
</XSL:choisir>
Bonjour Paul,
Lorsque vous travaillez avec le composant WebPart requête de contenu et xml/xsl, est-ce que vous avez trouvé tout de bons moyens pour mettre en forme votre xslt? Essayant d'apporter des modifications et la conception de l'essai s'avère une bonne douleur dans l'un ** juste en utilisant un éditeur de texte…
Tout le meilleur
(e.g. https://myweb.com/Marketing/images/icn-order.gif, )
Dois-je utiliser Image ou photo dans le Type de champ CommonViewFields? (e.g. InternalColumnName, Image)
Votre message est exactement ce que je cherchais. Cependant, Je ne peux pas faire fonctionner.
J'ai des documents qui sont stockés dans divers doc. bibliothèques classées mais en utilisant une colonne de classe personnalisée (choix: 1 ou 2. Je veux utiliser la WebPart pour afficher ces documents en fonction de leur classe.
J'ai pu ajouter la CQWP, exporter vers SPD, configurer la itemStyle.xls pour afficher les champs personnalisés en vue de la liste. Cependant, Je ne pouvais pas implémenter avec succès ce que vous décrivez ici.
Ce sont les colonnes que je veux montrer à mon CQWP:
Type de fichier (pour afficher l'icône)
Nom du fichier
Date de dernière modifiée
Modifié par l'OMS
Extrait vers
Vérifié dans les commentaires
J'ai actuellement le résultat sous forme de liste. Comment puis-je changer un format talble.
Merci.
Sand
Désolé pour le missspelling sur mon nom ne sais pas où le ” sont venus.