Përmbledhje:
(UPDATE 12/04/07: Shtuar një tjetër burim interesant në fund të lidh në një tjetër blog që trajton këtë nëpërmjet një web shumë pjesë interesante)
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.
Qasja e përgjithshme është si vijon:
- Krijo një listë ose bibliotekën dokument që përmban të dhënat që ju doni të grafik.
- Vendi bibliotekë dokument lidhur / listë me porosi në një faqe dhe kthyer atë në një pjesë të të dhënave Shiko Web (DVWP).
- Ndrysho XSL e DVWP për të gjeneruar HTML që tregon se si një grafik.
Skenari Biznes / Setup:
Unë kam krijuar një listë me porosi me kolonën e Titullit standarde dhe një kolonë shtesë, "Status". This models (shumë e thjeshtë e) an "Authorization For Expense" skenar ku titulli paraqet projektin dhe statusi një vlerë nga lista e:
- Propozuar
- Në proces
- Ngecur
Objektivi është për të prodhuar një grafik interaktiv horizontal bar që tregon se këto kode statusit.
Unë kam populluar listën dhe kjo duket si ky:
Krijo Dhënave Web Part Shiko:
Krijo DVWP duke shtuar listën me porosi në një faqe (Faqja Site në rastin tim) dhe ndiqni udhëzimet këtu (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!395.entry).
Përveç thjesht krijimin e DVWP, we also need to set the paging property to show all available rows. Për mua, kjo duket diçka si kjo:
Në këtë pikë, 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.
Ndrysho XSLT:
Është koha tani për të modifikuar XSLT.
I always use visual studio for this. (Shoh këtu Një shënim i rëndësishëm për rreth Intellisense që do të ju ndihmojë shumë).
Unë krijoj një projekt bosh shtoni katër fotografi të reja (replacing the words "Original" and "New" si të përshtatshme):
- Original.xslt
- New.xslt
- Original Params.xml
- Params.xml New
Në rastin tim, kjo duket si ky:
Modify the web part and copy the params and XSL to the "Original" Versioni në Visual Studio.
Qëllimi këtu është që të shkaktojë XSL për të transformuar rezultatet ne të kthehemi nga query DVWP në HTML që bën si një grafik.
Për këtë qëllim, it helps to first consider what the HTML should look like before we get confused by the insanity that is known as "XSL". (Të jetë i qartë, Më poshtë është thjesht një shembull; 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 Korrespondon:
<html> <trup> <qendër> <Tabela width = 80%> <tr><td><qendër>Grafiku Horizontal Bar</td></tr> <tr> <td align="center"> <table border="1" width = 80%> <tr> <td width = 10%>Hapur</td> <td><Tabela cellpadding ="0" cellspacing ="0" border = 0 width = 50%><tr bgcolor = kuqe><td> </td></tr></tryezë></td> </tr> <tr> <td width = 10%>Mbyllur</td> <td><Tabela cellpadding ="0" cellspacing ="0" border = 0 width = 25%><tr bgcolor = kuqe><td> </td></tr></tryezë></td> </tr> <tr> <td width = 10%>Ngecur</td> <td><Tabela cellpadding ="0" cellspacing ="0" border = 0 width = 25%><tr bgcolor = kuqe><td> </td></tr></tryezë></td> </tr> </tryezë> </td> </tr> </tryezë> </trup> </html> |
I used a dead simple approach to creating my bars by setting the background color of a row to "red".
Të-larg këtu është kjo: Në fund, të gjithë ne po bëjmë është krijuar me HTML rreshtave dhe kolonave.
Template XSLT:
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:
- Unë fillova me XSL parazgjedhur që SharePoint Designer dha mua kur unë së pari krijoi DVWP.
- Unë kam qenë në gjendje për të shkurtuar këtë poshtë nga SPD-së 657 linja të 166 lines.
- Unë nuk bela rreth me dosjen XML parametrave (e cila është ndarë nga XSL dhe ju do të dini se çfarë dua të them, kur ju shkoni për të modifikuar DVWP vetë; ka dy fotografi ju mund të modifikoj). Megjithatë, në mënyrë që të thjeshtojë atë, 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. Pastaj, remove my calls and insert your own calls to "ShowBar".
- Stërvitja poshtë punon duke krijuar një <a href> si kjo: http://server/List?FilterField1=fieldname&FilterValue1=actualFilterValue. This technique may be of value in other contexts. Në fillim, Unë mendova se do të duhet të jenë në përputhje me një format më të ndërlikuar: 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.
Këtu ajo është:
<XSL:stylesheet version="1.0" përjashtojnë-rezultat-Parashtesat="ddwrt RS Z o s dt msxsl" |
Rezultatet:
XSL nga lart gjeneron këtij grafiku:
Stërvitja poshtë në të dhënat themelore duke klikuar mbi kodin e statusit:
Mendime përfundimtare:
Kjo mund të përgjithësohet?
Unë e dua këtë koncept grafikët, 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, ju lutem bëni një shënim në komentet ose email mua.
Grafikët Vertical:
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, ju lutem më njoftoni dhe unë me kënaqësi do të lidhem me blogun tuaj
Unë mendoj se sfida me një grafik vertikale është se etiketat për grafikun janë më të vështira për të menaxhuar, por sigurisht jo e pamundur.
Emri Fusha e Gotcha:
Ka të paktën dy gjëra për të parë jashtë për me emrat tuaj në terren.
I parë, a field name with a space has to be escaped in the XSL. This will probably be an issue here:
<XSL:variabël emër="totalProposed"
zgjedh="numëroj(/dsQueryResponse / Rreshtat / Row[normalizojë-hapësirë(@ Status) = 'Propozuar'])" />
If your "Status" column is actually named "Status Code" then you need to reference it as "Status_x0020_Code":
<XSL:variabël emër="totalProposed"
zgjedh="numëroj(/dsQueryResponse / Rreshtat / Row[normalizojë-hapësirë(@ Status_x0020_Code) = 'Propozuar'])" />I dytë, dhe unë jam një fuzzy pak në këtë, but you also need to be on the alert for field name changes. If you name your field "Status Code" dhe pastaj më vonë, 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" Lidhje mund të ndihmojë në diagnostikimin dhe korrigjuar këtë lloj problemi.
Rreth asaj Color:
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. Për shembull, if the percentage of "stalled" AFE-së është > 10% pastaj të tregojë atë të kuqe, otherwise show it in black. Përdorim <XSL:zgjedh> për të arritur këtë.
Burime të tjera:
- Përcaktoni emrin e brendshëm (dhe info tjera të mira) për të dhënat në një listë: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!134.entry
- Shfaq të gjitha të dhënat e ofruara nga SharePoint (XML papërpunuara): http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!190.entry
- Get shprehje XPath e një kolonë të veçantë: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!155.entry
- Një qasje tjetër duke përdorur Owa(?). I have not dug into it, por duket premtuese, sidomos për Listat: http://www.waka.dk/Blog/PermaLink,guid,e2532e71-d774-4ac9-8f25-883964b830f4.aspx
Gëzuar transformuar!
<Fundi />
Kjo faqe pothuajse të përfunduar detyrën isha duke kërkuar për.
Unë kam një grup që dëshiron të përdorin listën Survey SharePoint për të krijuar një sondazh javore. Kapur? Ata nuk duan të shohin kodin… Ose të ndryshojë sistemin e çdo herë ata dërgojnë sondazh (planifikuar për një përditësim javore).
Unë kam qenë në gjendje të lidhë këtë në listën Anketa dhe për të krijuar graf në kolonën Përgjigja e parë. Ajo që unë nuk mund të parashikojë edhe pse janë vlerat dhe etiketat që ata do të duhet lëvizur përpara. Për t'i bërë gjërat edhe më keq ata mund të kenë më shumë përgjigje ose më pak në dispozicion çdo javë.
Unë do të shohim diku tjetër vetëm në rast, por dikush ka gjetur një mënyrë për të krijuar rreshtave dhe etiketat bazuar jashtë e numrit të opsioneve në dispozicion dhe dinamike vendosjen e këtyre sesa e vështirë coding vlerat e pritura?
Faleminderit Paul. Shumë e dobishme. Faleminderit për punën tuaj, Unë kam qenë në gjendje të shtoni një kolonë në një grafik bar DVWP ekzistuese (e.g. për detyra të) shumë lehtë me vetëm disa rreshta të kodit tuaj.
Në SharePoint Designer, Kam futur një pamje të të dhënave me titull dhe % Kolonat e plotë nga një listë detyrë. I vënë kursorin në një nga qelizat e drejtë click. Unë zgjidhni futur një kolonë të drejtë. Në pikëpamje të kodit, Kam gjetur <td> dhe zëvendësohet <XSL:element teksti brenda qelizave me kodin tuaj:
<Tabela cellpadding ="0" cellspacing ="0" border ="0"
width="{rrumbullakët(@ PercentComplete * 100)+1}%">
<tr style="background-color:red">
<XSL:text disable-output-escaping="yes"><![CDATA[ ]]></XSL:tekst>
</tr>
</tryezë>
Note I changed the row color code from bgcolor="red" to style="background-color:i kuq"
Edhe, ishte në gjendje për të zgjedhur një prej kolonave në listën time (@ PercentComplete) in place of "$BarPercent"
Greg
Një tjetër metodë (duke përdorur vetëm UI SharePoint):
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/
xmlns:__designer =http://schemas.microsoft.com/WebParts/v2/DataView/designer xmlns:asp ="http://schemas.microsoft.com/ASPNET/20">
select="count(/dsQueryResponse / Rreshtat / Row[normalizojë-hapësirë(@ Status)=’WIP’])" />
http://www.microsoft.com/sharepoint/downloads/components/detail.asp?a1=701Ian Morrish e postoi këtë në maj 2006. Unë u përpoqa në MOSS 2007 dhe funksionon mirë. Shtuar në GAC, kishte për të execadmsvcjobs dhe iisreset…
Great post, falënderim!
Great post, falënderim!
Hi Pali!
Nice work! Unë gjithashtu kisha diçka të tillë në mendjen time për të parë listat e SharePoint në një mënyrë grafike 😉
Unë kam një ‘Duke përdorur pultet në SharePoint’ pyetje. Ne jemi një spital ushtarak që përdor standardin MOSS për Intranet-in tonë dhe do të dëshironim të ndërtonim një tabelë për Komandën tonë për të parë time në kohë reale’ nëse është e mundur. Një nga pikat kryesore është shikimin ngarkesën e punës në kohë reale aktuale brenda objektit fjalë për fjalë dhe të shikojnë atë të ndryshojë lart dhe poshtë (mund të keni të klikoni “freskoj”/F5).
Thank you in advance,
Ju mund të bëni diçka të dobishme me jQuery për të arritur këtë efekt. Email mua në galvin.paul gmail.com @ dhe unë do të jenë të lumtur për të përpiqen dhe të japë një dorë.