Tinjauan:
(UPDATE 12/04/07: Ditambah sumber lain yang menarik di hujung menghubungkan ke blog lain yang menangani ini melalui sebahagian web yang sangat menarik)
Entri blog ini menerangkan bagaimana untuk mencipta graf bar dalam SharePoint. Ini bekerja dalam persekitaran WSS dan MOSS kerana ia hanya bergantung kepada bahagian data paparan web.
Pendekatan keseluruhan adalah seperti berikut:
- Buat senarai atau perpustakaan dokumen yang mengandungi data yang anda ingin graf.
- Meletakkan perpustakaan dokumen yang berkaitan / Senarai adat ke halaman dan menukarkan ia kepada pandangan sebahagian data web (DVWP).
- Ubahsuai XSL yang DVWP untuk menjana HTML yang menunjukkan sebagai graf.
Senario Perniagaan / Persediaan:
Saya telah mencipta satu senarai adat dengan ruangan Title standard dan satu ruang tambahan, "Status". Model ini (sangat simplistically) Kebenaran"untuk perbelanjaan" senario di mana tajuk mewakili projek dan Status nilai daripada senarai:
- Cadangan
- Dalam Proses
- Terhenti
Tujuannya adalah untuk menghasilkan graf bar interaktif mendatar yang menunjukkan kod status.
Saya telah penduduk senarai dan ia kelihatan seperti ini:
Membuat Data Lihat laman web Bahagian:
Buat DVWP dengan menambah senarai adat ke halaman (halaman tapak dalam kes saya) dan ikut arahan di sini (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!395.entry).
Di samping itu untuk hanya mewujudkan DVWP yang, kita juga perlu menetapkan harta penghalaman untuk menunjukkan semua baris yang ada. Bagi saya, ini kelihatan seperti ini:
Pada ketika ini, Saya sentiasa menutup SPD dan pelayar. Saya kemudian buka semula laman menggunakan pelayar. Ini mengelakkan secara tidak sengaja mucking atas susun atur bahagian web pada halaman.
Ubah suai XSLT:
Ia kini masa untuk mengubah suai XSLT.
Saya sentiasa menggunakan visual studio ini. (Lihat di sini untuk nota penting tentang INTELLISENSE yang akan membantu anda banyak).
Saya buat projek kosong menambah empat fail baru (menggantikan perkataan "asal" dan "New" yang sesuai):
- Original.xslt
- New.xslt
- Params.xml Asal
- New Params.xml
Dalam kes saya,, ia kelihatan seperti ini:
Ubahsuai bahagian web dan Salin params dan XSL asalnya"" versi dalam Visual Studio.
Objektif di sini ialah untuk menyebabkan XSL untuk mengubah keputusan yang kita kembali dari pertanyaan DVWP ke dalam HTML yang menjadikan sebagai graf.
Untuk tujuan ini, Ia membantu untuk pertama kali mempertimbangkan apa HTML akan terlihat seperti sebelum kami mendapatkan keliru dengan gila yang dikenali sebagai "XSL". (Untuk menjadi jelas, berikut adalah hanya contoh; Jangan menaip atau copy/paste ke dalam visual studio. Saya memberi tamparan hebat penuh titik awal untuk itu kemudian dalam penulisan). Graf contoh berikut diberikan seperti HTML dengan serta-merta berikutan:
Sama HTML:
<html> <badan> <pusat> <lebar jadual = 80%> <tr><td><pusat>Graf Bar mendatar</td></tr> <tr> <TD menyelaraskan = "Pusat"> <Jadual border = "1" width = 80%> <tr> <td width = 10%>Buka</td> <td><jadual cellpadding ="0" cellspacing ="0" border = 0 width = 50%><tr bgcolor = red><td> </td></tr></jadual></td> </tr> <tr> <td width = 10%>Ditutup</td> <td><jadual cellpadding ="0" cellspacing ="0" border = 0 width = 25%><tr bgcolor = red><td> </td></tr></jadual></td> </tr> <tr> <td width = 10%>Terhenti</td> <td><jadual cellpadding ="0" cellspacing ="0" border = 0 width = 25%><tr bgcolor = red><td> </td></tr></jadual></td> </tr> </jadual> </td> </tr> </jadual> </badan> </html> |
Saya menggunakan satu pendekatan yang mudah mati untuk mewujudkan Bar saya dengan menetapkan warna latarbelakang baris yang "merah".
Pengambilalihan jauh di sini adalah ini: Pada akhir, semua yang kita lakukan adalah mewujudkan HTML dengan baris dan lajur.
Templat XSLT:
Saya telah Salin XSLT yang menjana graf bar melintang. Ianya agak baik komen supaya saya tidak akan menambah banyak di sini kecuali Nota ini:
- Saya bermula dengan lalai XSL yang SharePoint Designer memberikan saya apabila saya mula-mula dicipta DVWP yang.
- Saya dapat memotong ini turun dari itu SPD 657 garisan 166 garisan.
- Saya tidak kucar-kacir di sekitar dengan parameter fail XML (yang berasingan daripada XSL dan anda akan tahu apa yang saya maksudkan apabila anda pergi untuk mengubah suai DVWP itu sendiri; terdapat dua fail yang anda boleh mengubah suai). Walau bagaimanapun, untuk memudahkan ia, Saya pula mengeluarkan hampir semua daripada mereka dari XSL dalam. Ini bermakna bahawa jika anda ingin menggunakan parameter tersebut, anda hanya perlu menambah definisi pembolehubah mereka kembali ke XSL dalam. Yang akan menjadi mudah kerana anda akan mempunyai definisi pembolehubah XSL yang asal projek visual studio anda.
- Anda sepatutnya mampu untuk copy dan paste ini terus ke dalam projek visual studio anda. Kemudian, panggilan saya Keluarkan dan masukkan sendiri panggilan ke "ShowBar".
- Gerudi ke bawah kerja-kerja dengan mewujudkan <a href> seperti ini: http://server/List?FilterField1=fieldname&FilterValue1=actualFilterValue. Teknik ini mungkin nilai-nilai dalam konteks lain. Pada mulanya, Saya fikir saya akan perlu mematuhi format yang lebih kompleks: http://server/List/AllItems.aspx?View={guid}&FilterField1=blah&FilterValue1=blah, tetapi dalam persekitaran saya yang tidak perlu. Dalam senarai URL yang dihantar kepada kami oleh SharePoint jadi ini adalah agak mudah untuk umum.
Di sini adalah:
<Pemacu:stylesheet versi="1.0" tidak termasuk-hasil-awalan="rs z o s ddwrt dt msxsl" |
Keputusan:
The XSL dari atas menjana graf ini:
Mengesan kepada data asas dengan klik pada kod status:
Kesimpulan Pemikiran:
Bolehkah ini Be umum?
Saya suka konsep grafik ini, tapi aku benci hakikat bahawa saya perlu masuk dan melakukan begitu banyak tangan-pengkodan. Saya telah diberi sedikit pemikiran sama ada ia boleh teritlak dan saya yakin, tetapi saya juga berasa sedikit takut mungkin ada dinding batu-bata di suatu tempat di sepanjang laluan yang tidak menawarkan apa-apa kerja-sekitar. Jika sesiapa yang mempunyai beberapa idea yang bernas ini, sila membuat nota dalam komen atau e-mel saya.
Graf menegak:
Ini adalah graf bar melintang. Ini pasti mungkin untuk membuat graf menegak. Kita hanya perlu mengubah HTML. Saya akan memulakan dengan cara yang sama: Mencipta satu perwakilan HTML graf bar menegak dan kemudian mencari jalan bagaimana untuk mendapatkan bahawa melalui XSL. Kalau ada yang berminat untuk yang, Saya dapat dipujuk untuk mencubanya dan bekerja di luar The kinks. Jika seseorang telah melakukan yang, sila beritahu saya dan saya dengan senang hati akan memautkan ke blog anda 🙂
Saya berfikir bahawa cabaran dengan graf tegak bahawa label untuk graf adalah lebih sukar untuk menguruskan, tetapi sudah tentu tidak mustahil.
Nama Field Gotcha:
Terdapat sekurang-kurangnya dua perkara untuk melihat keluar untuk dengan nama-nama bidang anda.
Pertama, nama bidang dengan ruang yang terpaksa melarikan diri dalam XSL dalam. Ini mungkin akan menjadi satu isu di sini:
<Pemacu:berubah-ubah Nama="totalProposed"
pilih="mengira(/dsQueryResponse / Baris / Row[menormalkan-ruang(@ Status) = 'Cadangan'])" />
Jika Status"anda" kolum sebenarnya dinamakan "Kod Status" maka anda perlu untuk rujukan sebagai "Status_x0020_Code":
<Pemacu:berubah-ubah Nama="totalProposed"
pilih="mengira(/dsQueryResponse / Baris / Row[menormalkan-ruang(@ Status_x0020_Code) = 'Cadangan'])" />Kedua, dan saya sedikit kabur mengenai perkara ini, tetapi anda juga perlu menjadi amaran bagi Pertukaran nama bidang. Jika anda sebut sahaja bidang anda "Kod Status" dan kemudian pada, menamakannya "AFE status", "dalaman nama" tidak berubah. Nama dalaman masih akan "Kod Status" dan mesti dirujuk sebagai "Status_x0020_Code". "Sumber-sumber lain" link boleh membantu mendiagnosis dan membetulkan jenis ini masalah.
Mengenai Warna yang:
Saya memilih "merah" kerana ia adalah menyenangkan bagi saya buat masa ini. Ia tidak akan menjadi masalah besar untuk menunjukkan warna yang berbeza bagi memberikan lebih daripada sekadar huraian visual beberapa, tetapi juga menyediakan KPI yang berguna. Sebagai contoh, Jika peratusan "terhenti." Ini adalah AFE > 10% kemudian menunjukkan ia merah, Jika tidak menunjukkannya dalam warna hitam. Gunakan <Pemacu:memilih> untuk mencapai ini.
Sumber-sumber Lain:
- Tentukan nama dalaman (dan maklumat lain yang baik) untuk data dalam senarai: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!134.entry
- Tunjukkan semua data yang disediakan oleh SharePoint (XML mentah): http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!190.entry
- Dapatkan ungkapan 'xPath tiang tertentu: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!155.entry
- Satu lagi pendekatan menggunakan OWA(?). Saya tidak mempunyai digali ke dalamnya, tetapi kelihatan menjanjikan, terutama bagi carta pai: http://www.waka.dk/Blog/PermaLink,guid,e2532e71-d774-4ac9-8f25-883964b830f4.aspx
Happy mengubah!
<akhir />
Laman ini hampir selesai tugas yang saya cari.
Saya mempunyai kumpulan yang mahu menggunakan senarai Survey SharePoint untuk mewujudkan satu pungutan suara mingguan. Tangkapan? Mereka tidak mahu untuk melihat kod… Atau menukar sistem setiap kali mereka menghantar pengundian (dirancang untuk mengemaskini mingguan).
Saya dapat menyambung ke senarai Survey dan mewujudkan graf di ruang jawapan yang pertama. Apa yang saya tidak boleh meramalkan walaupun adalah nilai-nilai dan label yang mereka perlu bergerak ke hadapan. Lebih teruk lagi mereka mungkin mempunyai lebih kurang jawapan yang disediakan setiap minggu.
Saya akan mencari tempat lain hanya dalam kes, tetapi sesiapa menemui satu cara untuk mencipta baris dan label berdasarkan kira bilangan pilihan yang ada dan dinamik menetapkan ini bukannya sukar pengekodan nilai jangkaan?
Terima kasih Paul. Sangat membantu. Terima kasih kepada kerja anda, Saya dapat menambah ruang bar graf kepada DVWP sedia ada (e.g. untuk tugas-tugas) sangat mudah dengan hanya beberapa baris kod anda.
Dalam SharePoint Designer, Saya dimasukkan paparan data dengan Tajuk dan % ruangan lengkap dari senarai tugas. Saya meletakkan kursor di dalam salah satu daripada sel-sel dan klik kanan. Saya memilih memasukkan lajur di sebelah kanan. Memandangkan kod, Saya dapati <td> dan menggantikan <Pemacu:elemen teks dalam sel dengan kod anda:
<jadual cellpadding ="0" cellspacing ="0" border ="0"
lebar = "{pusingan(@ PercentComplete * 100)+1}%">
<gaya TR = "latar belakang-warna:merah">
<Pemacu:teks mematikan-output-melarikan diri = "Ya"><![CDATA[ ]]></Pemacu:teks>
</tr>
</jadual>
Nota saya mengubah kod warna berturut-turut dari bgcolor = "merah" untuk gaya = "latar belakang-warna:merah"
Juga, dapat untuk memilih salah satu daripada tiang-tiang dalam senarai saya (@ PercentComplete) tempat "$BarPercent"
Greg
Satu lagi kaedah (hanya menggunakan SharePoint UI):
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">
Pilih = "kiraan(/dsQueryResponse / Baris / Row[menormalkan-ruang(@ Status)= '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, terpaksa execadmsvcjobs dan iisreset…
Great post, terima kasih!
Great post, terima kasih!
Hi Paul!
Nice kerja! I also had something like this in my mind to view SharePoint lists in a graphical way 😉
I have a ‘Using Dashboards in SharePoint’ soalan. 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’ jika boleh. Salah satu perkara utama melihat beban kerja masa nyata semasa dalam kemudahan dan benar-benar menonton menukar atas dan ke bawah (mungkin perlu klik “menyegarkan”/F5).
Terima kasih terlebih dahulu,
Anda boleh melakukan sesuatu yang berguna dengan jQuery untuk mencapai kesan ini. E-mel saya di galvin.paul @ gmail.com dan saya akan gembira untuk mencuba dan memberikan tangan.