Privire de ansamblu:
(ACTUALIZARE 12/04/07: Adăugat o altă resursă interesantă la sfârşitul conectarea la un alt blog care se adresează acest lucru prin o parte web foarte interesant)
Această intrare de blog descrie modul de a crea un grafic cu bare în SharePoint. Acest lucru funcţionează în ambele WSS şi MOSS medii ca aceasta depinde doar partea web Vizualizare date.
Abordării globale este după cum urmează:
- Creaţi o listă sau bibliotecă de documente, care conţine datele pe care doriţi să grafic.
- Loc în biblioteca de documente asociate / particularizat lista de pe o pagină şi convertizor it la spre un partea de web date vizualizare (DVWP).
- Modifica DVWP XSL pentru a genera HTML care arată ca un grafic.
Scenariu de afaceri / Programul de instalare:
Am creat o listă particularizată cu standardul titlu coloană şi o coloana suplimentară, "Statutul". Acest modele (foarte simplist) o "autorizaţie pentru cheltuieli" scenariu în cazul în care titlul reprezinta proiectul şi statutul o valoare din lista de:
- Propus
- În procesul de
- Au stagnat
Obiectivul este de a produce un interactive orizontală bar grafic care prezinta aceste coduri de stare.
Am au populat lista si se pare ca acest lucru:
Crea datelor partea Web vizualizare:
Crea DVWP prin adăugarea de listă particularizată la o pagină (pagina site-ului în cazul meu) şi urmaţi instrucţiunile aici (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!395.entry).
Pe lângă crearea pur şi simplu DVWP, de asemenea, trebuie să setați proprietatea de paginare pentru a afişa toate rândurile disponibile. Pentru mine, Aceasta arata ceva de genul:
La acest punct, Am aproape întotdeauna SPD şi browser-ul. Am apoi re-deschide pagina folosind browser-ul. Acest lucru evită accidental mucking până aspectul de parte web pe pagina.
Modifica XSLT:
Acum este momentul pentru a modifica XSLT.
I always folos visual student pentru acest. (A se vedea aici pentru o notă importantă despre intellisense care vă va ajuta foarte mult).
Crea un proiect gol adăuga fişiere noi patru (înlocuind cuvintele "Original" şi "nou" după caz):
- Original.XSLT
- New.XSLT
- Original Params.xml
- Noi Params.xml
În cazul meu, se pare ca asta:
Modifica partea web şi copiaţi params şi XSL original"" versiunea în Visual Studio.
Scopul aici este de a provoca XSL pentru a transforma rezultatele am sa ma intorc din interogarea de DVWP în HTML, care face ca un grafic.
În acest scop, El ajută să ia în considerare în primul rând ceea ce HTML ar trebui să arate înainte ne-am lua confuz de nebunie care este cunoscut ca "XSL". (Să fie clar, Aceasta este doar un exemplu; nu de tip-l sau de copiere/lipire în visual studio. Am oferi o lovitură completă punct de plecare pentru că mai târziu, în a scrie-up). Următorul eşantion grafic este randat ca pe HTML imediat după:
Corespunzătoare HTML:
<HTML> <corpul> <Centrul> <lăţimea de masa = 80%> <TR><TD><Centrul>Graficul cu bare orizontale</TD></TR> <TR> <TD alinia = "centru"> <masă de frontieră = "1" latime = 80%> <TR> <TD lăţime = 10%>Deschis</TD> <TD><tabelul cellpadding ="0" cellSpacing ="0" frontieră = 0 width = 50%><TR bgcolor = roşu><TD> </TD></TR></tabel></TD> </TR> <TR> <TD lăţime = 10%>Închis</TD> <TD><tabelul cellpadding ="0" cellSpacing ="0" frontieră = 0 width = 25%><TR bgcolor = roşu><TD> </TD></TR></tabel></TD> </TR> <TR> <TD lăţime = 10%>Au stagnat</TD> <TD><tabelul cellpadding ="0" cellSpacing ="0" frontieră = 0 width = 25%><TR bgcolor = roşu><TD> </TD></TR></tabel></TD> </TR> </tabel> </TD> </TR> </tabel> </corpul> </HTML> |
Am folosit o abordare mort simplu la crearea baruri mea prin stabilirea culoarea de fundal a unui rând în "roşu".
Ia-te de aici este acest: În cele din urmă, toate vom face este de a crea HTML cu rânduri şi coloane.
Şablon XSLT:
I-am copiat XSLT care generează un grafic cu bare orizontale. Este destul de bine a comentat astfel încât nu va adăuga mult aici cu excepţia aceste note:
- Am inceput cu XSL care SharePoint Designer mi-a dat când am creat primul DVWP implicit.
- Am fost capabil de a reduce acest lucru la SPD pe 657 linii de 166 linii.
- Eu nu mizerie în jurul cu fişierul XML parametrii (care este separat de XSL şi veţi şti ce vreau să spun atunci când te duci pentru a modifica DVWP sine; Există două fişiere puteţi modifica). Cu toate acestea, pentru a simplifica aceasta, Elimina aproape tot de pe ei la XSL. Aceasta înseamnă că dacă doriţi să faceţi uz de acei parametri, trebuie doar să adăugaţi variabile definiţiile lor înapoi la XSL. Că va fi uşor, deoarece aveţi originale XSL variabilă definiţii în dumneavoastră proiect visual studio.
- Ar trebui să fie în măsură să copiaţi şi inseraţi acest lucru direct în dumneavoastră proiect visual studio. Apoi, Scoateţi apelurile mele şi introduceţi apelurile la "ShowBar".
- Burghiu în jos de lucrări prin crearea unui <a href> aşa: http://server/List?FilterField1=fieldname&FilterValue1=actualFilterValue. Aceasta tehnica poate fi de valoare în alte contexte. La prima, M-am gândit mi-ar trebui să fie conforme cu un format mai complexe: http://server/List/AllItems.aspx?View={guid}&FilterField1=blah&FilterValue1=blah, dar în mediul meu care nu este necesar. Lista pe URL-ul este trecut la noi de SharePoint astfel încât acesta este destul de uşor să generalizeze.
Aici este:
<XSL:foaie de stil versiunea="1.0" exclude-rezultat-Prefixe="RS z o s ddwrt dt msxsl" |
Rezultatele:
XSL de mai sus genereaza acest grafic:
Detalia la care stau la baza de date făcând clic pe codul de stare:
Gânduri finale:
Acest lucru poate fi generalizată?
Îmi place acest concept grafice, dar urăsc faptul că trebuie să meargă şi face parte atât de mult de codificare. I-am dat un pic crezut să dacă acesta poate fi generalizată şi eu sunt optimist, dar eu sunt, de asemenea, un pic de teamă că ar putea exista un zid de cărămidă undeva de-a lungul calea care nu va oferi orice lucru-în jurul. Dacă cineva are unele idei bune pe acest, vă rugăm să faceţi o notă în comentarii sau e-mail-mă.
Verticală grafice:
Acesta este un grafic cu bare orizontale. Este cu siguranţă posibil pentru a crea un grafic verticale. Avem nevoie doar de a schimba HTML. Aş începe acelaşi mod: A crea o reprezentare HTML de un grafic cu bare verticale şi apoi dau seama cum să obţineţi că prin intermediul XSL. Dacă cineva este interesat în care, Am putea fi convins să-l încercaţi şi elaborarea îndoit. Dacă cineva a făcut deja că, te rog să-mi spuneți și voi cu bucurie link către blog-ul dvs. 🙂
Cred că provocarea cu un grafic de verticală este că etichetele pentru grafic sunt mai dificil de a gestiona, dar cu siguranţă nu imposibil.
Câmpul nume Gotcha:
Există cel puţin două lucruri să se uite cu numele de domeniu.
Prima, un nume de câmp cu un spaţiu de a fi scăpat în XSL. Acest lucru va fi, probabil, o problemă aici:
<XSL:variabila nume="totalProposed"
Selectaţi="Contele(/Rânduri/dsQueryResponse/rând[normalizarea-spaţiu(@Status) = 'Propuse'])" />
Dacă starea"" coloana este de fapt numit "codul de stare" atunci ai nevoie să referinţă-l ca "Status_x0020_Code":
<XSL:variabila nume="totalProposed"
Selectaţi="Contele(/Rânduri/dsQueryResponse/rând[normalizarea-spaţiu(@Status_x0020_Code) = 'Propuse'])" />Al doilea, şi eu sunt un pic fuzzy pe acest, dar, de asemenea, trebuie să fie în alertă pentru schimbări de nume câmp. Dacă numele de domeniu "codul de stare" şi apoi mai târziu, redenumiţi-o ca "AFE Status", "numele intern" nu se schimba. Numele intern va fi în continuare "codul de stare" şi trebuie să fie menţionate ca "Status_x0020_Code". "Alte resurse" link-uri pot ajuta la diagnosticarea şi de a corecta acest tip de problemă.
Despre acea culoare:
Am luat "roşu" pentru că este plăcut pentru mine în acest moment. Nu ar fi o afacere mare pentru a arăta culori diferite pentru a oferi mai mult decât o descriere vizuale a unui număr, dar, de asemenea, a furniza un KPI utile. De exemplu, în cazul în care procentul de "stagnat" Este AFE pe > 10% apoi Arată roşu, altfel arată-l în negru. Utilizarea <XSL:alege> pentru a realiza acest lucru.
Alte resurse:
- Determina numele intern (şi alte bun info) pentru o listă de date: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!134.entry
- Arată toate datele furnizate de SharePoint (XML-ul brut): http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!190.entry
- Obţine expresia XPATH o anumita coloana: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!155.entry
- O altă abordare folosind OWA(?). Nu am săpat în ea, dar pare promiţător, mai ales pentru diagrame plăcintă: http://www.waka.dk/Blog/PermaLink,guid,e2532e71-d774-4ac9-8f25-883964b830f4.aspx
Transformarea fericit!
<final />
Această pagină aproape finalizată sarcina am fost în căutarea pentru.
Am un grup care vrea să utilizeze lista SharePoint sondaj pentru a crea un sondaj săptămânal. Captura? Ei nu doresc să vadă codul… Sau schimbarea sistemului de fiecare dată le trimit sondaj (planificate pentru un update saptamanal).
Am fost capabil de a conecta acest lucru la lista de studiu şi de a crea graficul pe prima coloană răspunsul. Deşi ceea ce eu nu pot prezice sunt valorile și etichetele care vor avea nevoie de progresa. Pentru a face probleme mai rău pot avea mai mult sau mai puţin răspunsuri disponibile în fiecare săptămână.
Mă voi uita în altă parte în cazul, dar cineva a găsit o modalitate de a crea rânduri şi etichete bazate pe jos numărul de opţiuni disponibile şi dinamic setarea acestea, mai degrabă decât greu de codificare valorile?
Multumesc Paul. Foarte util. Vă mulţumim pentru munca ta, Am fost capabili de a adăuga o coloană de bar grafic la o DVWP existente (ex. pentru sarcini) foarte uşor cu doar câteva linii de cod.
În SharePoint Designer, Am introdus o vizualizare de date cu titlu şi % completează coloanele dintr-o listă de sarcini. Am pus cursorul într-una din celulele şi faceţi clic dreapta. Am selectaţi insera o coloană la dreapta. În Vizualizare cod, Am găsit <TD> şi înlocuit <XSL:element de textul din interiorul celulei cu codul dvs.:
<tabelul cellpadding ="0" cellSpacing ="0" frontieră ="0"
latime = "{Runda(@PercentComplete * 100)+1}%">
<stil TR = "culoare de fundal:roşu">
<XSL:textul nu fi de acord-ieşire-evadarea = "da"><![CDATA[ ]]></XSL:textul>
</TR>
</tabel>
Notă am schimbat codul de culoare rând bgcolor = "roşu" stilul = "culoare de fundal:rosu"
De asemenea, a fost capabil să selectaţi una dintre coloanele din lista mea (@PercentComplete) în loc de "$BarPercent"
Greg
O altă metodă (folosind numai 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">
Selectaţi = "Contele(/Rânduri/dsQueryResponse/rând[normalizarea-spaţiu(@Status)= "PN"])" />
http://www.microsoft.com/sharepoint/downloads/components/detail.asp?a1=701Ian Morrish a postat acest lucru în mai 2006. Am încercat în MOSS 2007 si functioneaza bine. Adăugat la GAC, a trebuit să execadmsvcjobs şi iisreset…
Mare post, mulţumesc!
Mare post, mulţumesc!
Hi Paul!
Buna treaba! Am avut, de asemenea, ceva de genul asta în mintea mea să vizualizați listele SharePoint într-un mod grafic 😉
Am o „Utilizarea tablourilor de bord în SharePoint’ întrebare. Suntem un spital militar, folosind standardul MOSS pentru Intranet și ar dori să construiască un tablou de bord pentru grupul nostru de comandă pentru a vedea „în timp real’ dacă este posibil. Unul dintre principalele puncte este vizualizarea volumul curent în timp real în interiorul instalației și literalmente ma uit la o schimbare în sus şi în jos (poate fi necesar să faceţi clic pe “Reîmprospătare”/F5).
Vă mulţumesc în avans,
Puteti face ceva util cu jQuery pentru a realiza acest efect. Email-mă la Galvin.Paul@gmail.com și voi fi fericit să încerce și să dea o mână.