Disember | 2007 | Paul Galvin SharePoint Angkasa

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" 
 xmlns:msxsl="urn:skema-microsoft-com:xslt" xmlns:Pemacu="http://www.w3.org/1999/XSL/Transform" 
 xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" 
 xmlns:ASP="http://schemas.microsoft.com/ASPNET/20" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" 
 xmlns:o="urn:skema-microsoft-com:pejabat" xmlns:s="uuid:BDC6E3F0-6DA3-11d1-A2A3-00AA00C14882" 
 xmlns:dt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882" xmlns:rs="urn:skema-microsoft-com:rowset" xmlns:z="#RowsetSchema" 
 xmlns:ddwrt2="urn:frontpage:dalaman">
  <Pemacu:output kaedah="html" inden="tidak" />
  <Pemacu:perpuluhan-format NaN="" />
  <Pemacu:param Nama="ListUrlDir"></Pemacu:param> <!-- Saya perlu ini untuk menyokong satu latihan-down.  -->

  <Pemacu:template perlawanan="/" xmlns:SharePoint="Microsoft.SharePoint.WebControls" 
 xmlns:__designer=http://schemas.microsoft.com/WebParts/v2/DataView/designer xmlns:ASP="http://schemas.microsoft.com/ASPNET/20">
    <Pemacu:berubah-ubah Nama="dvt_StyleName">Jadual</Pemacu:berubah-ubah>
    <Pemacu:berubah-ubah Nama="Baris" pilih="/dsQueryResponse / Baris / Row" />
    <Pemacu:berubah-ubah Nama="dvt_RowCount" pilih="mengira($Baris)" />
    <Pemacu:berubah-ubah Nama="IsEmpty" pilih="$dvt_RowCount = 0" />
    <Pemacu:berubah-ubah Nama="dvt_IsEmpty" pilih="$dvt_RowCount = 0" />

    <Pemacu:memilih>
      <Pemacu:apabila ujian="$dvt_IsEmpty">
        Tidak ada data untuk graf!<br/>
      </Pemacu:apabila>
      <Pemacu:sebaliknya>

        <!--
          Bahan yang menarik bermula di sini.

          Kita perlu menentukan pemboleh ubah untuk setiap baris dalam graf: jumlah
          .
        -->
        <Pemacu:berubah-ubah Nama="totalProposed" pilih="mengira(/dsQueryResponse / Baris / Row[menormalkan-ruang(@ Status) = 'Cadangan'])" />
        <Pemacu:berubah-ubah Nama="percentProposed" pilih="$totalProposed div $ dvt_RowCount" />

        <Pemacu:berubah-ubah Nama="totalInProcess" pilih="mengira(/dsQueryResponse / Baris / Row[menormalkan-ruang(@ Status) = 'Dalam Proses'])" />
        <Pemacu:berubah-ubah Nama="percentInProcess" pilih="$totalInProcess div $ dvt_RowCount" />

        <Pemacu:berubah-ubah Nama="totalStalled" pilih="mengira(/dsQueryResponse / Baris / Row[menormalkan-ruang(@ Status) = 'Terhenti'])" />
        <Pemacu:berubah-ubah Nama="percentStalled" pilih="$div totalStalled $ dvt_RowCount" />

        <!--
          Kami mentakrifkan jadual HTML kami di sini.  Saya meminjam dari beberapa standard
          .  Saya fikir ia akan menghormati
          .
        -->
        <jadual lebar="100%" cellspacing="0" cellpadding="2"
gaya="sempadan kanan: 1 pepejal # C0C0C0; sempadan-bawah: 1 pepejal # C0C0C0; sempadan-gaya-kiri: pepejal; sempadan-left-lebar: 1; -top gaya sempadan: pepejal; sempadan-top-lebar: 1;">

           <tr>
            <td menyelaraskan="pusat">
              <jadual sempadan="1" lebar="100%">

                <!--
                  Bagi setiap status yang kita mahu graf, kita panggil "ShowBar" template.
                  Kami lulus:
                  1. A label untuk baris.  Ini akan berubah menjadi hyperlink.
                  2. Peratus (berubah-ubah dari atas).
                  3. Nama medan sebenar kod dari senarai asas.  Ini
                     .
                  4. Nilai medan dipadankan #3.
                  5. Jumlah item kod status ini (bukan jumlah besar sekali
                     ).

                  Ia mengeluarkan <tr></tr> dan garis graf bar mendatar.

                  Kami menyeru template ini bagi setiap kod status kita mahu melihat.
                -->
                <Pemacu:panggilan template Nama="Showbar">
                  <Pemacu:dengan-param Nama="BarDisplayLabel" pilih="'Cadangan'"/>
                  <Pemacu:dengan-param Nama="BarPercent" pilih="$percentProposed"/>
                  <Pemacu:dengan-param Nama="QueryFilterFieldName" pilih="'Status'"/>
                  <Pemacu:dengan-param Nama="QueryFilterFieldValue" pilih="'Cadangan'"/>
                  <Pemacu:dengan-param Nama="TotalItems" pilih="$totalProposed"></Pemacu:dengan-param>
                </Pemacu:panggilan template>

                <Pemacu:panggilan template Nama="Showbar">
                  <Pemacu:dengan-param Nama="BarDisplayLabel" pilih="'Terhenti'"/>
                  <Pemacu:dengan-param Nama="BarPercent" pilih="$percentStalled"/>
                  <Pemacu:dengan-param Nama="QueryFilterFieldName" pilih="'Status'"/>
                  <Pemacu:dengan-param Nama="QueryFilterFieldValue" pilih="'Terhenti'"/>
                  <Pemacu:dengan-param Nama="TotalItems" pilih="$totalStalled"></Pemacu:dengan-param>
                </Pemacu:panggilan template>

                <Pemacu:panggilan template Nama="Showbar">
                  <Pemacu:dengan-param Nama="BarDisplayLabel" pilih="'Dalam Proses'"/>
                  <Pemacu:dengan-param Nama="BarPercent" pilih="$percentInProcess"/>
                  <Pemacu:dengan-param Nama="QueryFilterFieldName" pilih="'Status'"/>
                  <Pemacu:dengan-param Nama="QueryFilterFieldValue" pilih="'Dalam Proses'"/>
                  <Pemacu:dengan-param Nama="TotalItems" pilih="$totalInProcess"></Pemacu:dengan-param>
                </Pemacu:panggilan template>

              </jadual>
            </td>
          </tr>
        </jadual>
      </Pemacu:sebaliknya>
    </Pemacu:memilih>
  </Pemacu:template>

  <!--
    Template ini berfungsi memaparkan talian individu dalam graf bar.

    Anda mungkin akan melakukan kebanyakan Tweaker anda di sini.
  -->
  <Pemacu:template Nama="Showbar">
    <Pemacu:param Nama="BarDisplayLabel" /> <!-- label untuk menunjukkan -->
    <Pemacu:param Nama="BarPercent"/> <!-- Peratus daripada jumlah. -->
    <Pemacu:param Nama="QueryFilterFieldName"/> <!-- Digunakan untuk melompat kepada pertanyaan & menapis -->
    <Pemacu:param Nama="QueryFilterFieldValue"/> <!-- Digunakan untuk melompat kepada pertanyaan & menapis -->
    <Pemacu:param Nama="TotalItems" /> <!-- jumlah kiraan barlabel ini -->

    <tr>

      <!-- Label bar sendiri. -->
      <td kelas="ms-formbody" lebar="30%">

        <!--
          Ini set seterusnya penyata membina rentetan pertanyaan yang membolehkan
          .
          Kami menggunakan beberapa perkara di sini:
          1. Kami boleh lulus FilterField1 dan FilterValue1 ke senarai untuk menapis lajur.
          2. SharePoint berlalu parameter penting bagi kami, ListUrlDir yang menghala ke senarai asas yang DVWP ini "berjalan".

          Bukankah XSL menyeronokkan?
        -->
        <Pemacu:teks melumpuhkan-output-melarikan diri="ya">
        <![CDATA[<a href ="]]></Pemacu:teks>
        <Pemacu:nilai-of pilih="$ListUrlDir"/>
        <Pemacu:teks melumpuhkan-output-melarikan diri="ya"><![CDATA[?FilterField1 =]]></Pemacu:teks>
        <Pemacu:nilai-of pilih="$QueryFilterFieldName"/>
        <Pemacu:teks melumpuhkan-output-melarikan diri="ya"><![CDATA[&= FilterValue1]]></Pemacu:teks>
        <Pemacu:nilai-of pilih="$QueryFilterFieldValue"/>
        <Pemacu:teks melumpuhkan-output-melarikan diri="ya"><![CDATA[">]]></Pemacu:teks>
        <Pemacu:nilai-of pilih="$BarDisplayLabel"/>
        <Pemacu:teks melumpuhkan-output-melarikan diri="ya"><![CDATA[</1>]]></Pemacu:teks>

        <!-- Sedikit seterusnya menunjukkan beberapa nombor dalam format: "(jumlah / % daripada jumlah)" -->
        (<Pemacu:nilai-of pilih="$TotalItems"/> /

        <!-- Ini mewujudkan label nice peratus untuk kita.  Terima kasih, Microsoft! -->
        <Pemacu:panggilan template Nama="percentformat">
          <Pemacu:dengan-param Nama="peratus" pilih="$BarPercent"/>
        </Pemacu:panggilan template>)

      </td>

      <!-- Akhirnya, mengeluarkan <td> tag untuk bar itu sendiri.-->
      <td>
        <jadual cellpadding="0" cellspacing="0" sempadan="0"
lebar="{pusingan($BarPercent * 100)+1}%">
          <tr bgcolor="merah">
            <Pemacu:teks melumpuhkan-output-melarikan diri="ya"><![CDATA[&nbsp;]]></Pemacu:teks>
          </tr>
        </jadual>
      </td>
    </tr>

  </Pemacu:template>

  <!-- Ini diambil secara langsung dari beberapa XSL saya dapati dalam template MS. -->
  <Pemacu:template Nama="percentformat">
    <Pemacu:param Nama="peratus"/>
    <Pemacu:memilih>
      <Pemacu:apabila ujian="format-nombor($peratus, '#, # # 0%;-#,##0%')= 'NaN'">0%</Pemacu:apabila>
      <Pemacu:sebaliknya>
        <Pemacu:nilai-of pilih="format-nombor($peratus, '#, # # 0%;-#,##0%')" />
      </Pemacu:sebaliknya>
    </Pemacu:memilih>
  </Pemacu:template>

</Pemacu:stylesheet>

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!

Langgan ke blog saya!

Technorati Tags: SharePoint, DVWP, Data Lihat laman web Bahagian, Pemacu, XSLT, WSS, MOSS

Paul Galvin SharePoint Angkasa

Arkib Bulanan: Disember 2007

Buat Graf Bar di SharePoint