איבערבליק:
(דערהייַנטיקן 12/04/07: צוגעגעבן אן אנדער טשיקאַווע מיטל אין די סוף פֿאַרבינדונג צו אן אנדער בלאָג אַז ווענדט דעם דורך אַ זייער טשיקאַווע וועב טייל)
This blog entry describes how to create a bar graph in SharePoint. This works in both WSS and MOSS environments as it only depends upon the data view web part.
די קוילעלדיק צוגאַנג איז ווי גייט:
- שאַפֿן אַ רשימה אָדער דאָקומענט ביבליאָטעק אַז כּולל די דאַטן איר ווילן צו גראַפיק.
- אָרט דעם פארבונדן דאָקומענט ביבליאָטעק / מנהג רשימה אַנטו אַ בלאַט און בייַטן עס צו אַ דאַטן מיינונג וועב טייל (דוווופּ).
- מאָדיפיצירן די דוווופּ ס קססל צו דזשענערייט HTML וואָס ווייזט ווי אַ גראַפיק.
ביזנעס סינעריאָו / סעטאַפּ:
איך האב באשאפן אַ מנהג רשימה מיט דער נאָרמאַל ענין זייַל און איינער נאָך זייַל, "Status". This models (זייער סימפּליסטיקאַללי) an "Authorization For Expense" סצענאַר ווו די טיטל רעפּראַזענץ די פּרויעקט און דער סטאַטוס אַ ווערט פון דער רשימה פון:
- פארגעלייגט
- אין פּראַסעס
- סטאַללעד
די אָביעקטיוו איז צו פּראָדוצירן אַ ינטעראַקטיוו האָריזאָנטאַל באַר גראַפיק וואָס ווייזט די סטאַטוס קאָודז.
איך האָבן פּאַפּיאַלייטאַד דער רשימה און עס קוקט ווי דעם:
שאַפֿן דאַטאַ View וועב חלק:
שאַפֿן דעם דוווופּ דורך אַדינג דער מנהג רשימה צו אַ בלאַט (פּלאַץ בלאַט אין מיין פאַל) און נאָכגיין די ינסטראַקשאַנז דאָ (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!395.entry).
אין דערצו צו פשוט שאפן די דוווופּ, we also need to set the paging property to show all available rows. פֿאַר מיר, דאָס קוקט עפּעס ווי דעם:
אין דעם פונט, I always close SPD and the browser. I then re-open the page using the browser. This avoids accidentally mucking up the web part layout on the page.
מאָדיפיצירן די קססלט:
עס ס איצט צייַט צו מאָדיפיצירן די קססלט.
I always use visual studio for this. (זען דאָ פֿאַר אַ וויכטיק טאָן וועגן ינטעלליסענסע וואָס וועט העלפן איר אַ פּלאַץ).
איך שאַפֿן אַ ליידיק פּרויעקט לייגן פיר נייַ טעקעס (replacing the words "Original" and "New" ווי צונעמען):
- אָריגינאַל.קססלט
- נעוו.קססלט
- אָריגינעל פּאַראַמס.קסמל
- ניו פּאַראַמס.קסמל
אין מיין פאַל, עס קוקט ווי דעם:
Modify the web part and copy the params and XSL to the "Original" ווערסיע אין וויסואַל סטודיאָ.
די אָביעקטיוו דאָ איז צו פאַרשאַפן די קססל צו יבערמאַכן די רעזולטאַטן מיר באַקומען צוריק פון די דוווופּ אָנפֿרעג אין HTML אַז רענדערז ווי אַ גראַפיק.
צו דעם סוף, it helps to first consider what the HTML should look like before we get confused by the insanity that is known as "XSL". (צו זייַן קלאָר, די פאלגענדע איז פשוט אַ בייַשפּיל; don’t type it or copy/paste into visual studio. I provide a full blow starting point for that later in the write-up). The following sample graph is rendered as per the HTML immediately following:
קאָראַספּאַנדינג HTML:
| <HTML> <גוף> <צענטער> <טיש ברייט = 80%> <טר><טד><צענטער>האָריזאָנטאַל בר גראַף</טד></טר> <טר> <td align="center"> <table border="1" ברייט = 80%> <טר> <טד ברייט = 10%>עפענען</טד> <טד><טיש סעללפּאַדדינג ="0" סעללספּאַסינג ="0" גרענעץ = 0 ברייט = 50%><טר בגקאָלאָר = רויט><טד>&נבספּ;</טד></טר></טיש></טד> </טר> <טר> <טד ברייט = 10%>פארמאכט</טד> <טד><טיש סעללפּאַדדינג ="0" סעללספּאַסינג ="0" גרענעץ = 0 ברייט = 25%><טר בגקאָלאָר = רויט><טד>&נבספּ;</טד></טר></טיש></טד> </טר> <טר> <טד ברייט = 10%>סטאַללעד</טד> <טד><טיש סעללפּאַדדינג ="0" סעללספּאַסינג ="0" גרענעץ = 0 ברייט = 25%><טר בגקאָלאָר = רויט><טד>&נבספּ;</טד></טר></טיש></טד> </טר> </טיש> </טד> </טר> </טיש> </גוף> </HTML> |
I used a dead simple approach to creating my bars by setting the background color of a row to "red".
די נעמען-אַוועק דאָ איז דעם: אין די סוף, אַלע מיר זענען טאן איז שאפן HTML מיט ראָוז און שפאלטן.
מוסטער קססלט:
I’ve copied the XSLT that generates a horizontal bar graph. It’s fairly well commented so I won’t add much here except for these notes:
- איך אנגעהויבן מיט די פעליקייַט קססל אַז שאַרעפּאָינט דיזיינער האט מיר ווען איך ערשטער באשאפן דעם דוווופּ.
- איך איז געווען ביכולת צו שנייַדן דעם אַראָפּ פון ספּד ס 657 שורות צו 166 lines.
- איך האט נישט באַלאַגאַן אַרום מיט די פּאַראַמעטערס קסמל טעקע (וואָס איז באַזונדער פון די קססל און איר וועט וויסן וואָס איך מיינען ווען איר גיין צו מאָדיפיצירן די דוווופּ זיך; עס זענען צוויי טעקעס איר קענען מאָדיפיצירן). אָבער, אין סדר צו פאַרפּאָשעטערן עס, I did remove nearly all of them from the XSL. This means that if you want to make use of those parameters, you just need to add their variable definitions back to the XSL. That will be easy since you will have the original XSL variable definitions in your visual studio project.
- You ought to be able to copy and paste this directly into your visual studio project. דעמאָלט, remove my calls and insert your own calls to "ShowBar".
- די בויער אַראָפּ אַרבעט דורך שאפן אַ <אַ הרעף> ווי דאָס: http://server/List?FilterField1=fieldname&FilterValue1=actualFilterValue. This technique may be of value in other contexts. אין ערשטער, איך געדאַנק איך וואָלט דאַרפֿן צו קאַנפאָרם צו אַ מער קאָמפּליצירט פֿאָרמאַט: http://server/List/AllItems.aspx?View={guid}&FilterField1=blah&FilterValue1=blah, but in my environment that is not necessary. The List’s URL is passed to us by SharePoint so this is quite easy to generalize.
דאָ עס איז:
<קססל:סטילעשעעט ווערסיע="1.0" ויסשליסן-רעזולטאַט-פּרעפיקסעס="רס ז אָ ס דדוורט דט מסקססל" |
די רעזולטאַטן:
די קססל פון אויבן דזשענערייץ דעם גראַפיק:
בויער אַראָפּ צו די אַנדערלייינג דאַטן דורך געבן אַ קליק אויף דעם סטאַטוס קאָד:
קאַנקלודינג טאָץ:
קענען דאס זייט גענעראַליזעד?
איך ליבע דעם גראַפינג באַגריף, but I hate the fact that I have to go in and do so much hand-coding. I’ve given a little thought to whether it can be generalized and I’m optimistic, but I’m also a little fearful that there may be a brick wall somewhere along the path that won’t offer any work-around. If anyone has some good ideas on this, ביטע מאַכן אַ טאָן אין די באַמערקונגען אָדער Email מיר.
ווערטיקאַל גראַפס:
This is a horizontal bar graph. It’s certainly possible to create a vertical graph. We just need to change the HTML. I would start the same way: Create an HTML representation of a vertical bar graph and then figure out how to get that via XSL. If anyone is interested in that, I could be persuaded to try it out and work out the kinks. If someone has already done that, please let me know and I’ll gladly link to your blog 🙂
איך טראַכטן אַז אַרויסרופן מיט אַ ווערטיקאַל גראַפיק איז אַז די לאַבעלס פֿאַר די גראַפיק זענען מער שווער צו פירן, אָבער אַוואַדע נישט אוממעגלעך.
פעלד נאָמען גאָטטשאַ ס:
עס זענען לפּחות צוויי זאכן צו קוקן אויס פֿאַר מיט דיין פעלד נעמען.
ערשטער, a field name with a space has to be escaped in the XSL. This will probably be an issue here:
<קססל:בייַטעוודיק נאָמען="טאָטאַלפּראָפּאָסעד"
קלייַבן="ציילן(/דסקווערירעספּאָנסע / ראָוז / ראָוו[נאָרמאַלייז-אָרט(@ סטאַטוס) = 'פּראָפּאָסעד'])" />
If your "Status" column is actually named "Status Code" then you need to reference it as "Status_x0020_Code":
<קססל:בייַטעוודיק נאָמען="טאָטאַלפּראָפּאָסעד"
קלייַבן="ציילן(/דסקווערירעספּאָנסע / ראָוז / ראָוו[נאָרמאַלייז-אָרט(@ סטאַטוס_קס0020_קאָדע) = 'פּראָפּאָסעד'])" />צווייט, און איך בין אַ ביסל פאַזי אויף דעם, but you also need to be on the alert for field name changes. If you name your field "Status Code" און דעמאָלט שפּעטער אויף, rename it to "AFE Status", the "internal name" does not change. The internal name will still be "Status Code" and must be referenced as "Status_x0020_Code". The "other resources" לינקס זאל העלפן דיאַגנאָזירן און ריכטיק דעם מין פון פּראָבלעם.
וועגן וואָס קאָליר:
I picked "red" because it’s pleasing to me at the moment. It would not be a big deal to show different colors so as to provide more than just a visual description of a number, but to also provide a useful KPI. לעמאָשל, if the percentage of "stalled" אַפע ס איז > 10% דעמאָלט ווייַזן עס רויט, otherwise show it in black. נוצן <קססל:קלייַבן> צו ויספירן דעם.
אנדערע רעסורסן:
- באַשטימען די ינערלעך נאָמען (און אנדערע גוט אינפֿאָרמאַציע) פֿאַר די דאַטן אין אַ רשימה: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!134.entry
- ווייַזן אַלע די דאַטן צוגעשטעלט דורך שאַרעפּאָינט (די רוי קסמל): http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!190.entry
- באַקומען די קספּאַטה אויסדרוק פון אַ ספּעציפיש זייַל: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!155.entry
- אן אנדער צוגאַנג ניצן אָוואַ(?). I have not dug into it, אָבער קוקט פּראַמאַסינג, ספּעציעל פֿאַר פּיראָג טשאַרץ: http://www.waka.dk/Blog/PermaLink,guid,e2532e71-d774-4ac9-8f25-883964b830f4.aspx
מזל טראַנספאָרמינג!
<סוף />
דעם בלאַט כּמעט געענדיקט די אַרבעט איך איז געווען קוקן פֿאַר.
איך האָבן אַ גרופּע וואָס וויל צו נוצן די שאַרעפּאָינט יבערבליק רשימה צו שאַפֿן אַ וואכנשריפט באַקומען. די כאַפּן? זיי טאָן נישט וועלן צו זען קאָד… אָדער טוישן די סיסטעם יעדער מאָל זיי שיקן דעם באַקומען (פּלאַננעד פֿאַר אַ וואכנשריפט דערהייַנטיקן).
איך איז געווען ביכולת צו פאַרבינדן דעם צו די יבערבליק רשימה און שאַפֿן די גראַפיק אויף דער ערשטער ענטפער זייַל. וואָס איך קען ניט פאָרויסזאָגן כאָטש זענען די וואַלועס און לאַבעלס אַז זיי וועלן דאַרפֿן מאָווינג פאָרויס. צו מאַכן זאכן ערגער זיי זאלן האָבן מער אָדער ווייניקער ענטפֿערס פאַראַנען יעדער וואָך.
איך וועל קוקן אנדערש נאָר אין פאַל, אָבער האט ווער עס יז געפונען אַ וועג צו מאַכן ראָוז און לאַבעלס באזירט אַוועק פון די נומער פון פאַראַנען אָפּציעס און דינאַמיקאַללי באַשטעטיקן די גאַנץ ווי שווער קאָודינג די געריכט וואַלועס?
דאַנק פאולוס. זייער נוציק. דאַנק צו דיין אַרבעט, איך איז געווען ביכולת צו לייגן אַ גראַפיק באַר זייַל צו אַן שאַפֿן דוווופּ (e.g. פֿאַר טאַסקס) זייער לייכט מיט נאָר אַ ביסל שורות פון אייער קאָד.
אין שאַרעפּאָינט דיזיינער, איך ינסערטאַד אַ דאַטן מיינונג מיט די ענין און % גאַנץ שפאלטן פון אַ אַרבעט רשימה. איך לייגן דער לויפֿער אין איינער פון די סעלז און רעכט גיט. איך אויסקלייַבן אַרייַנלייגן אַ זייַל צו דער רעכט. אין קאָד מיינונג, איך געפונען די <טד> און ריפּלייסט די <קססל:טעקסט עלעמענט ין דער צעל מיט דיין קאָד:
<טיש סעללפּאַדדינג ="0" סעללספּאַסינג ="0" גרענעץ ="0"
width="{קייַלעכיק(@ פּערסענטקאָמפּלעטע * 100)+1}%">
<tr style="background-color:red">
<קססל:text disable-output-escaping="yes"><![קדאַטאַ[&נבספּ;]]></קססל:טעקסט>
</טר>
</טיש>
Note I changed the row color code from bgcolor="red" to style="background-color:רויט"
אויך, איז ביכולת צו אויסקלייַבן איינער פון די שפאלטן אין מיין רשימה (@ פּערסענטקאָמפּלעטע) in place of "$BarPercent"
גרעג
אן אנדער אופֿן (ניצן נאָר די שאַרעפּאָינט וי):
http://pathtosharepoint.wordpress.com/2008/09/02/a-progress-bar-for-your-tasks-list/
http://pathtosharepoint.wordpress.com/2008/10/21/progress-bar-color-coding/
קסמלנס:__דעסיגנער =http://schemas.microsoft.com/WebParts/v2/DataView/designer קסמלנס:אַספּ ="http://schemas.microsoft.com/ASPNET/20">
select="count(/דסקווערירעספּאָנסע / ראָוז / ראָוו[נאָרמאַלייז-אָרט(@ סטאַטוס)=’WIP’])" />
http://www.microsoft.com/sharepoint/downloads/components/detail.asp?a1=701Ian Morrish posted this in May 2006. I tried in MOSS 2007 and it works well. Added to GAC, האט צו עקסעקאַדמסווקדזשאָבס און ייסרעסעט…
גרויס פּאָסטן, דאַנק!
גרויס פּאָסטן, דאַנק!
הי פאולוס!
פייַן אַרבעט! I also had something like this in my mind to view SharePoint lists in a graphical way 😉
I have a ‘Using Dashboards in SharePoint’ פרעגן. We are a military hospital using MOSS standard for our Intranet and would like to build a dashboard for our Command Group to see ‘real time’ אויב מעגלעך. איינער פון די הויפּט פונקטן איז וויוינג דער עמעס-צייַט קראַנט ווערקלאָוד ין דער מעכירעס און ממש היטן עס טוישן אַרויף און אַראָפּ (זאל האָבן צו גיט “דערפרישן”/פ 5).
דאנק איר אין שטייַגן,
איר קענען טאָן עפּעס נוצלעך מיט דזשקווערי צו ויספירן דעם ווירקונג. בליצפּאָסט מיר אין גאַלווינ.פּאַול @ gmail.com און איך וועט זייַן צופרידן צו פּרובירן און געבן אַ האַנט.