Vue d'ensemble:
(MISE À JOUR 12/04/07: Ajouter une autre ressource intéressante à la fin qui relie à un autre blog qui traite de cela via une partie très intéressante de web)
Ce blog décrit comment créer un graphique à barres dans SharePoint. Cela fonctionne dans les environnements fois WSS et MOSS, puisqu'il dépend seulement du composant WebPart Affichage de données.
L'approche globale est la suivante:
- Créer une liste ou bibliothèque de documents qui contient les données que vous voulez graphique.
- Place de la bibliothèque de documents associés / personnalisé la liste sur une page et de le convertir à un composant WebPart Affichage de données (DVWP).
- Modifier XSL de la DVWP pour générer le code HTML qui présente sous forme de graphique.
Scénario d'entreprise / Programme d'installation:
J'ai créé une liste personnalisée avec la colonne de titre standard et une colonne supplémentaire, « Status ». Ce modèles (de manière très simpliste) une « autorisation de dépense" scénario où le titre représente le projet et le statut d'une valeur de la liste des:
- Proposé
- Dans le processus
- Au point mort
L'objectif est de produire un diagramme à barres horizontales interactive qui montre ces codes d'État.
J'ai rempli la liste et il ressemble à ceci:
Créer le composant WebPart Affichage de données:
Créer le DVWP en ajoutant la liste personnalisée à une page (page du site dans mon cas) et suivez les instructions ici (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!395.entry).
En plus de créer simplement le DVWP, Nous devons également définir la propriété de pagination pour afficher toutes les lignes disponibles. Pour moi, Cela ressemble à quelque chose comme ça:
À ce point, J'ai toujours de fermer SPD et le navigateur. J'ai ensuite ré-ouvrir la page en utilisant le navigateur. Cela évite de déblayage accidentellement jusqu'à la mise en page web part sur la page.
Modifier la transformation XSLT:
Il est maintenant temps de modifier la transformation XSLT.
J'ai toujours utiliser visual studio pour cela. (Voir ici pour une remarque importante sur intellisense qui vous aidera beaucoup).
J'ai créer un projet vide ajouter quatre nouveaux fichiers (remplaçant les mots "Original" et "New" le cas échéant):
- Original.XSLT
- New.XSLT
- Original Params.xml
- Nouveau Params.xml
Dans mon cas, Il ressemble à ceci:
Modifier le composant WebPart, puis copiez les params et XSL à l'Original"" version dans Visual Studio.
L'objectif ici est de provoquer le XSL transformer les résultats que nous revenir de la requête DVWP dans HTML qui est restitué sous un graphe.
À cette fin, Il est utile d'examiner tout d'abord ce que le code HTML devrait ressembler avant que nous ayons confondus par la folie qui est connue comme « XSL ». (Pour être clair, Ceci est simplement un exemple; ne pas taper ou copier/coller dans visual studio. Je fournis un coup complet, point de départ pour que plus tard dans l'écriture). Le graphique suivant est rendu selon le code HTML qui suit immédiatement:
HTML correspondant:
<html> <corps> <Centre> <table width = 80 %> <TR><TD><Centre>Graphique à barres horizontales</TD></TR> <TR> <TD align = « center »> <bordure de table = "1" largeur = 80 %> <TR> <TD largeur = 10 %>Ouvert</TD> <TD><table cellpadding ="0" CellSpacing ="0" border = 0 width = 50 %><TR bgcolor = rouge><TD> </TD></TR></table></TD> </TR> <TR> <TD largeur = 10 %>Fermé</TD> <TD><table cellpadding ="0" CellSpacing ="0" border = 0 width = 25 %><TR bgcolor = rouge><TD> </TD></TR></table></TD> </TR> <TR> <TD largeur = 10 %>Au point mort</TD> <TD><table cellpadding ="0" CellSpacing ="0" border = 0 width = 25 %><TR bgcolor = rouge><TD> </TD></TR></table></TD> </TR> </table> </TD> </TR> </table> </corps> </html> |
J'ai utilisé une approche simple pour créer mes barres en définissant la couleur d'arrière-plan d'une ligne « rouge ».
La vente à l'emporter ici est la suivante: En fin de compte, tout ce que nous faisons est création HTML contenant des lignes et des colonnes.
Modèle XSLT:
J'ai copié le XSLT qui génère un graphique à barres horizontal. Il est assez bien donc je n'ajoutera beaucoup ici à l'exception de ces notes a commenté:
- J'ai commencé avec la valeur par défaut XSL que SharePoint Designer m'a donné quand j'ai d'abord créé le DVWP.
- J'ai été capable d'abattre du SPD 657 lignes à 166 lignes.
- Je na pas perdre son temps avec le fichier de paramètres XML (qui est séparé de la XSL et vous saurez ce que je veux dire, quand vous allez à modifier le DVWP lui-même; Il y a deux fichiers, que vous pouvez modifier). Cependant, afin de simplifier, La quasi-totalité d'entre eux a fait retirer de XSL. Cela signifie que si vous voulez faire usage de ces paramètres, vous avez juste besoin d'ajouter leurs définitions variables vers le XSL. Qui ne sera pas facile puisque vous aurez les définitions originales de variable XSL dans votre projet visual studio.
- Vous devriez être en mesure de copier et coller ce directement dans votre projet visual studio. Puis, enlever mes appels et insérer vos propres appels à « ShowBar ».
- Le zoom fonctionne en créant un <a href> Comme ça: http://server/List?FilterField1=fieldname&FilterValue1=actualFilterValue. Cette technique peut être utile dans d'autres contextes. Dans un premier temps, J'ai pensé que j'aurais besoin pour se conformer à un format plus complexe: http://server/List/AllItems.aspx?View={guid}&FilterField1=blah&FilterValue1=blah, mais dans mon environnement qui n'est pas nécessaire. URL de la liste est passée à nous par SharePoint, donc c'est assez facile de généraliser.
C'est ici:
<XSL:feuille de style Version="1.0" exclure-résultat-préfixes="RS z o s ddwrt dt msxsl" |
Les résultats:
Le XSL ci-dessus génère ce graphique:
Explorer les données sous-jacentes en cliquant sur le code d'État:
Pensées finales:
Ceci peut être généralisé?
J'adore ce concept graphique, mais je déteste le fait que j'ai d'aller faire autant-codage à la main. J'ai donné un peu de réflexion pour savoir si elle peut être généralisée et je suis optimiste, mais je suis aussi un peu peur qu'il peut y avoir un mur de briques quelque part le long de la voie qui n'offre aucune solution de contournement. Si quelqu'un a quelques bonnes idées sur ce, Veuillez prendre note dans les commentaires ou Ecrivez-moi.
Graphes verticales:
Il s'agit d'un diagramme à barres horizontales. Il est certainement possible créer un graphique vertical. Nous avons juste besoin de modifier le code HTML. Je voudrais commencer de la même manière: Créer une représentation HTML d'un graphique à barres vertical et puis trouver un moyen d'obtenir que la via XSL. Si quelqu'un est intéressé par ce, Je pourrais être persuadé de l'essayer et travailler sur the kinks. Si quelqu'un a déjà fait, s'il vous plaît laissez-moi savoir et je vais créer un lien avec plaisir sur votre blog 🙂
Je pense que le défi avec un graphique vertical est que les étiquettes du graphique sont plus difficiles à gérer, mais certainement pas impossible.
Du champ nom Gotcha:
Il y a au moins deux choses à regarder dehors pour vos noms de domaine.
Première, un nom de domaine avec un espace doit être échappé dans le XSL. Ce sera probablement une question ici:
<XSL:variable nom="totalProposed"
Sélectionnez="comte(/dsQueryResponse/lignes/en rangée[Normalize-space(@Status) = « Proposée »])" />
Si votre statut"" colonne est en fait nommé "Code d'État" ensuite vous devez le référencer comme « Status_x0020_Code »:
<XSL:variable nom="totalProposed"
Sélectionnez="comte(/dsQueryResponse/lignes/en rangée[Normalize-space(@Status_x0020_Code) = « Proposée »])" />Seconde, et je suis un peu floue sur ce, mais il faut aussi être sur le qui-vive pour les changements de nom de domaine. Si vous nommez votre champ "Code d'État" et puis plus tard sur, Renommez-le en « AFE Status », le nom"interne" ne change pas. Le nom interne sera toujours "Code d'État" et doit être référencé comme « Status_x0020_Code ». Les « autres ressources" liens peuvent aider à diagnostiquer et corriger ce genre de problème.
Sur cette couleur:
J'ai choisi "rouge" parce que c'est agréable à moi en ce moment. Il ne serait pas une grosse affaire pour montrer les différentes couleurs afin de fournir plus qu'une description visuelle d'un certain nombre, mais aussi fournir un indicateur de performance clé utile. Par exemple, Si le pourcentage de "calé" L'AFE est > 10% alors montrez-le rouge, dans le cas contraire le montrer en noir. Utilisation <XSL:choisir> pour y parvenir.
Autres ressources:
- Déterminer le nom interne (et autres bonnes infos) pour les données dans une liste: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!134.entry
- Afficher toutes les données fournies par SharePoint (les données XML brutes): http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!190.entry
- Obtenir l'expression XPATH d'une colonne spécifique: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!155.entry
- Une autre approche à l'aide d'OWA(?). Je n'ai pas creusé dedans, mais semble prometteur, surtout pour les camemberts: http://www.waka.dk/Blog/PermaLink,guid,e2532e71-d774-4ac9-8f25-883964b830f4.aspx
Transformer heureux!
<fin />