Genel bakış:
(GÜNCELLEŞTİRME 12/04/07: Bu çok ilginç bir web bölümü adresleri başka bir blog bağlantı sonunda başka bir ilginç kaynak eklendi)
Bu blog girişi SharePoint'te bir çubuk grafik oluşturma açıklanmaktadır. Sadece veri görünümü web bölümü bağlıdır gibi bu WSS ve MOSS ortamlarda çalışır.
Genel yaklaşım aşağıdaki gibidir:
- Grafik istediğiniz verileri içeren bir liste veya belge kitaplığı oluşturma.
- Yer ilişkili belge kitaplığı / Özel liste bir sayfaya ve bir veri görünümü web bölümünü dönüştürmek (DVWP).
- DVWP'ın XSL bir grafik gösterir HTML oluşturmak için değiştirme.
İş senaryosu / Kurulum:
Standart başlık sütun içeren özel bir liste ve bir ek sütun oluşturduk, "Durum". Bu modelleri (çok basitçe) Masraf için bir "yetkilendirme" Senaryo burada başlık proje ve durumunu bir değer listesinden gösterir:
- Önerilen
- Süreç içinde
- Durmuş
Bu durum kodları gösteren etkileşimli bir yatay çubuk grafik üretmek için hedeftir.
Liste doldurulur ve bu gibi görünüyor:
Veri Görünümü Web Bölümü oluşturma:
DVWP özel listeyi bir sayfaya ekleyerek oluşturun. (Benim durumumda site sayfası) ve bu yönergeleri izleyin Burada (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!395.entry).
Sadece DVWP oluşturmanın yanı sıra, Ayrıca tüm mevcut satırları göstermek için disk belleği özelliğini ayarlamanız gerekir. Benim için, Bu şuna benzer:
Bu noktada, Ben her zaman SPD ve tarayıcı yakın. Tarayıcı kullanarak sayfa sonra yeniden açın. Bu sayfadaki web bölümü düzeni yanlışlıkla mucking önler.
XSLT değiştirme:
Şimdi XSLT değiştirme zamanı.
Her zaman bunun için visual studio kullanın. (Bkz: Burada için çok yardımcı olacaktır IntelliSense hakkında önemli not).
Boş bir projeyi oluşturmak dört yeni dosya ekleme ("orijinal kelimeler yerine" ve "yeni" uygun olarak):
- Original.XSLT
- New.XSLT
- Özgün Params.xml
- Yeni Params.xml
Benim durumumda, Bu gibi görünüyor:
Web bölümü'nü değiştirme ve params ve XSL "orijinal kopya" Visual Studio sürümü.
Amaç burada XSL Dönüşümü geri içine bir grafik görüntüleyen bir HTML DVWP sorgudan almak sonuçları neden olmaktır..
Bu amaçla, ilk önce biz "XSL" bilinen delilik tarafından karışık HTML gibi görünmelidir düşünmeye yardımcı olur. (Açık olmak, Sadece bir örnek aşağıdadır; yok bu yazın veya kopya/visual Studio'ya Yapıştır. Bunun için daha sonra yazmak-Up başlangıç noktası tam bir darbe sağlamak). Aşağıdaki örnek grafik hemen ardından HTML göre işlenir:
Karşılık gelen HTML:
<HTML> <vücut> <Merkezi> <Masa genişliği % 80 => <tr><TD><Merkezi>Yatay çubuk grafik</TD></tr> <tr> <TD align = "center"> <tablo kenarlığı = "1" Genişlik = > <tr> <TD genişlik = >Açık</TD> <TD><Tablo CELLPADDING ="0" CellSpacing ="0" sınır = 0 genişlik = % 50><tr bgcolor = kırmızı><TD> </TD></tr></Tablo></TD> </tr> <tr> <TD genişlik = >Kapalı</TD> <TD><Tablo CELLPADDING ="0" CellSpacing ="0" Kenarlık genişliği 0 = % 25 =><tr bgcolor = kırmızı><TD> </TD></tr></Tablo></TD> </tr> <tr> <TD genişlik = >Durmuş</TD> <TD><Tablo CELLPADDING ="0" CellSpacing ="0" Kenarlık genişliği 0 = % 25 =><tr bgcolor = kırmızı><TD> </TD></tr></Tablo></TD> </tr> </Tablo> </TD> </tr> </Tablo> </vücut> </HTML> |
Ölü basit bir yaklaşım "kırmızı" satırının arka plan rengini ayarlayarak benim çubukları oluşturmak için kullanılan.
Bu paket var: Sonunda, Tüm yapıyoruz-oluştururken HTML satır ve sütunları.
XSLT şablonu:
Yatay bir çubuk grafik oluşturur XSLT kopyaladıktan sonra. Oldukça iyi öylesine çok burada dışında bu notlar eklemek olmayacak yorumladı:
- Varsayılan DVWP ilk oluşturduğunuzda SharePoint Designer verdi XSL ile başladı.
- SPD'den 's bu kesmek başardı 657 hatları için 166 satırları.
- Parametreler XML dosyası ile uğraşmak istemedim (XSL ayrı olan ve DVWP değiştirmeye gittiğinde ne demek istediğimi anlarsınız; değiştirebileceğiniz iki dosya). Ancak, Bunu kolaylaştırmak için, Neredeyse tüm XSL kaldırmak. Bu demektir ki yapmak istiyorsanız bu parametreleri kullanın, Sadece onların değişken tanımlar XSL geri eklemek gerekir. Özgün XSL değişken tanımları, visual studio proje içinde olacak bu kolay olacaktır.
- Kopyala ve yapıştır bu doğrudan visual studio projenize mümkün olsa gerek. O zaman, Telefonlarıma çıkartın ve takın "ShowBar" için bir arama.
- Ayrıntıya inme oluşturarak çalışır bir <bir href> Böyle: http://server/List?FilterField1=fieldname&FilterValue1=actualFilterValue. Bu teknik diğer bağlamlarda değerinin olabilir. İlk başta, Daha karmaşık bir biçimine uygun gerekir düşünüyordum.: http://server/List/AllItems.aspx?View={guid}&FilterField1=blah&FilterValue1=blah, Ama benim ortamında bu gerekli değil. Bu genelleme yapmak oldukça kolaydır listenin URL bize SharePoint tarafından geçirilmeden.
İşte:
<XSL:Stil sayfası Sürüm="1.0" Dışlama sonuç önekleri="RS z o s ddwrt dt msxsl" |
Sonuçları:
XSL yukarıdan bu grafik oluşturur:
Temel verilere durum kodu üzerinde tıklatarak ulaşmak:
Sonuç düşünceler:
Bu Genelleştirilmiş?
Bu grafik kavram seviyorum, Ama içeri girip o kadar çok el kodlama yapmak zorunda aslında nefret ediyorum. Ben olup Genelleştirilmiş için biraz düşündüm ve ben iyimserim., Ama ben de bir yerde herhangi bir iş-çevrede teklif değil yol boyunca bir tuğla duvar olabilir biraz korkulu. Kimse bu konuda bazı iyi fikirler varsa, Lütfen Yorum not edin veya bana e-posta.
Dikey grafikler:
Yatay bir çubuk grafiği bu. Dikey bir grafik oluşturmak kesinlikle mümkün. HTML değiştirmeliyiz. Ben aynı şekilde başlamak istiyorum: Dikey bir çubuk grafik bir HTML temsilini oluşturmak ve sonra bu XSL almak nasıl anlamaya. Kimse ilgileniyor ise, Ben de denemek ve karışıklığı çözmek çalışmak için ikna edilebilir. Eğer birisi zaten yaptı, bana bildirin ve ben blogunuza bağlantı memnuniyetle duyarız 🙂
Meydan okuma ile dikey bir grafik için grafik etiketleri yönetmek daha zor olduğunu düşünüyorum., Ama kesinlikle imkansız.
Alan adı Gotcha's:
En az iki şey için alan adlarıyla dikkat.
İlk, boşluk içeren bir alan adı XSL öncelenmesi gerekir. Bu muhtemelen bir sorun olacak:
<XSL:değişken adı="totalProposed"
seçin="sayısı(/dsQueryResponse/satır/satır[normalize-uzay(@Status) 'Teklif' =])" />
Eğer durum"" sütun aslında "durum kodu adı" daha sonra "Status_x0020_Code" başvurmak gerekir:
<XSL:değişken adı="totalProposed"
seçin="sayısı(/dsQueryResponse/satır/satır[normalize-uzay(@Status_x0020_Code) 'Teklif' =])" />İkinci, ve bu konuda biraz kafam, Ama sen de alan adı değişiklikleri için tetikte olmak gerekir. Senin alanın "durum kodu adı" ve daha sonra üzerinde, rename o-e doğru "AKKUŞ durumu", "iç adı" değişmez. İç adı hala "durum kodu olacak" ve "Status_x0020_Code" başvurulan gerekir. "Diğer kaynaklar" Linkler bu tür sorunları tanılamak ve sorununu yardımcı.
Bu renk hakkında:
"Red aldım" Çünkü şu anda bana hoş. Böylece bir numara sadece görsel bir açıklama sağlamak için farklı renk göstermek için büyük bir olay olmaz, Ama aynı zamanda yararlı bir KPI sağlamak için. Örneğin, Eğer yüzdesi "durdu" AKKUŞ'ın olduğunu > 10% o zaman kırmızı göster, Aksi halde siyah göster. Kullanımı <XSL:seçin> Bunu gerçekleştirmek için.
Diğer kaynaklar:
- Dahili ad belirlemek (ve diğer iyi bilgi) listedeki verileri için: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!134.entry
- SharePoint tarafından sağlanan verileri göster (ham XML): http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!190.entry
- Belirli bir sütunun XPATH ifadesini almak: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!155.entry
- OWA kullanarak başka bir yaklaşım(?). Ben de içine açtım değil, Ama umut verici görünüyor, özellikle pasta grafikleri için: http://www.waka.dk/Blog/PermaLink,guid,e2532e71-d774-4ac9-8f25-883964b830f4.aspx
Mutlu dönüştürme!
<sonunda />
Bu sayfa, neredeyse ı was seyir için görev tamamlandı.
Haftalık bir anket oluşturmak için SharePoint liste liste kullanmak isteyen bir grup var.. Catch? Kodu görmek istemiyorum… Ya da ne zaman anket gönderiyorlar, sistemi değiştirmek (weekly update için planlanan).
I was güçlü-e doğru bu anket listesine bağlan ve ilk cevabı sütun grafiği oluşturmak için. Önceden tahmin edemememe rağmen çoğu değerleri ve ihtiyaçları olacak Etiketler ileri hareketli. Konularda yapmak için daha kötü onlar az cevaplar mevcut her hafta olabilir.
Başka bir yerde diye bakacağız, Ama kimse satır ve kullanılabilir seçenekler ve bunlar dinamik olarak ayarlamak yerine, çok beklenen değerler kodlama sayısını kapalı alan etiketleri oluşturmak için bir yol buldu?
Teşekkür Paul. Çok yardım etmek. Teşekkür için senin iş, I was güçlü-e doğru grafik bar sütun için varolan bir DVWP eklemek için (e.g. görevler için) kod sadece birkaç satır ile çok kolay.
SharePoint Designer'da, Başlığı ile veri görünümü eklenen ve % görev listesini sütunlarından tamamlamak. İmleç bir hücre koyun ve sağ tıklayın. Ben seçin sağ sütun eklemek. Kod görünümünde, Ben buldum <TD> ve yerine <XSL:kodunuz ile hücre içindeki metin öğesi:
<Tablo CELLPADDING ="0" CellSpacing ="0" sınır ="0"
Genişlik = "{yuvarlak(@PercentComplete * 100)+1}%">
<tr style = "background-color:Kırmızı">
<XSL:metin devre dışı bırakma-çıkış-kaçan = "Evet"><![CDATA[ ]]></XSL:metin>
</tr>
</Tablo>
Not bgcolor satır renk kodu değişti "kırmızı =" Style = "background-color:Kırmızı"
Ayrıca, was güçlü-e doğru benim listesindeki bir sütun seçmek için (@PercentComplete) "$BarPercent yerine"
Greg
Başka bir yöntem (yalnızca SharePoint kullanıcı arabirimini kullanarak):
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">
seçin "sayısı =(/dsQueryResponse/satır/satır[normalize-uzay(@Status)'YARI MAMUL' =])" />
http://www.microsoft.com/sharepoint/downloads/components/detail.asp?a1=701Ian Morrish bu Mayıs ayında yayınlanan 2006. YOSUN denedim 2007 ve o inşaat su kuyusu. GAC için eklendi, execadmsvcjobs ve IISReset vardı…
Büyük posta, teşekkürler!
Büyük posta, teşekkürler!
Merhaba Paul!
Güzel bir çalışma! Ayrıca grafik bir şekilde görünüm SharePoint listelerine zihnimde böyle bir şey vardı 😉
Bir ‘SharePoint Tablolarını kullanma var’ soru. Bizim Intranet MOSS standardını kullanan bir askeri hastane ve ‘gerçek zamanlı görmek için Komuta Grubu için bir gösterge tablosunu oluşturmak istiyoruz’ Mümkünse. Bir ana noktaları tesis içinde gerçek-zaman geçerli iş yükünü görüntüleme ve kelimenin tam anlamıyla yukarı ve aşağı değiştirmek seyretmek (tıklatmanız gerekebilir “yenileme”/F5).
Şimdiden teşekkür ederim,
JQuery ile bu etkiyi gerçekleştirmek için yararlı bir şeyler yapabiliriz. Email beni vasıl Galvin.Paul@Gmail.com ve denemek ve yardım etmekten mutluluk duyarız.