Ikhtisar dan tujuan
Keluar dari kotak, MOSS’ Konten permintaan Web bagian (CQWP) Menampilkan hasil dalam format daftar, mirip dengan hasil pencarian. Hal ini juga memungkinkan untuk menampilkan hasil dalam grid format (yaitu. Format tabel HTML). Grid format lebih baik dalam beberapa keadaan. Saya menjelaskan bagaimana untuk mencapai efek dalam artikel ini.
Bisnis skenario
Saya telah bekerja dengan klien pada peluncuran MOSS perusahaan-lebar. Kami telah merancang taksonomi mereka sedemikian rupa sehingga proyek warga negara kelas pertama dalam hirarki dan memiliki situs sendiri tingkat atas. Manajer Proyek menjaga daftar singleton informasi ringkasan proyek, seperti judul, anggaran, tanggal penyelesaian yang diharapkan, anggaran yang tersisa dan bidang ringkasan tipe lainnya. Oleh "singleton" Maksudku daftar SharePoint kustom dijamin mengandung hanya satu item. Mudah, tampak seperti ini:
Pendekatan teknis adalah sama seperti yang dijelaskan Sini (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!447.entry). CQWP menggunakan XSL mengubah untuk memancarkan HTML untuk browser untuk membuat.
Saya selalu membayangkan hasil sebelum menyelam ke dalam XSL karena XSL adalah mimpi buruk. Berikut adalah hasil yang saya inginkan:
HTML seperti ini menghasilkan hasil yang:
|
|
<HTML>
<bodyHTMLan >>< kuat > pesan yang kuat.</strong> </body> </html> ">
<Pusat>
<Meja perbatasan= 1>
<!-- Label-->
<TR bgcolor= biru>
<TD><font warna= putih><b>Nama proyek</b></font></TD>
<TD menyelaraskan= kanan><font warna= putih><b>Tanggal lengkap</b></font></TD>
<TD menyelaraskan= kanan><font warna= putih><b>Anggaran</b></font></TD>
<TD menyelaraskan= kanan><font warna= putih><b>Biaya sebenarnya</b></font></TD>
<TD><font warna= putih><b>Keseluruhan Status</b></font></TD>
</TR>
<TR>
<TD>Re-kawat ruang komputer.</TD>
<TD menyelaraskan= kanan>02/01/08</TD>
<TD menyelaraskan= kanan>22,500.00</TD>
<TD menyelaraskan= kanan>19,000.00</TD>
<TD>Berlangsung</TD>
</TR>
<TR>
<TD>Penyediaan server untuk meng-Upgrade SQL</TD>
<TD menyelaraskan= kanan>04/01/08</TD>
<TD menyelaraskan= kanan>7,500.00</TD>
<TD menyelaraskan= kanan>0.00</TD>
<TD>Direncanakan</TD>
</TR>
</Meja>
</Pusat>
</bodyHTMLan >>< kuat > pesan yang kuat.</strong> </body> </html> ">
</HTML>
|
Pendekatan
Ikuti langkah-langkah untuk membuat grid:
- Mengidentifikasi komponen grid (baris kolom).
- Mendefinisikan dan menciptakan situs diperlukan kolom.
- Membuat sub situs untuk proyek dan daftar singleton.
- Tambahkan CQWP ke halaman web dan mengkonfigurasinya untuk mencari daftar Anda.
- Memodifikasi CQWP XML untuk mengumpulkan kolom tambahan.
- Memodifikasi XSL untuk menghasilkan daftar.
Aku akan berkonsentrasi pada nomor enam. Nomor satu sampai empat adalah lurus ke depan dan sesuatu yang setiap pengguna CQWP telah dilakukan. Nomor lima telah didokumentasikan dengan baik oleh orang lain termasuk layar-shot sarat artikel ini lengkap dari MSDN Sini (http://msdn2.microsoft.com/en-us/library/bb897399.aspx) dan Heather Salomo blog Sini (http://www.heathersolomon.com/blog/articles/CustomItemStyle.aspx).
Mur dan baut
Memulai dan menerapkan langkah-langkah satu melalui lima per dokumentasi MSDN dan Heather Salomo artikel.
Pada titik ini, Anda telah menambahkan CQWP Anda ke halaman dan Anda memiliki Anda <CommonViewFields> dikonfigurasi sebagai diperlukan.
Mengikuti langkah-langkah biasa, Saya mendapatkan hasil menengah ini:
1. Membuat jenis konten, daftar kustom templatized untuk tipe konten dan dua situs. Berikut adalah jenis konten:
Berikut adalah struktur situs:
2. Tambahkan CQWP setelah membuat saya subsites proyek dan singleton Daftar ringkasan proyek:
3. Menambahkan semua informasi tambahan yang saya ingin melalui <CommonViewFields>:
<properti Nama="CommonViewFields" jenis="string">Project_x0020_Name;Project_x0020_Expenses;Project_x0020_Status;Project_x0020_Start_x0020_Date;Project_x0020_End_x0020_Date;Project_x0020_Budget</properti>
Perhatikan bahwa aku harus menjaga semua bidang properti pada satu baris atau itu tidak akan bekerja (CQWP akan memberitahu saya bahwa query kembali tidak ada item).
4. Pada titik ini, kita sudah siap untuk bergerak melampaui artikel MSDN dan sandal di atas untuk Heather Salomo artikel. Ikuti langkah-langkah yang mulai dekat langkah #5 untuk membuat disesuaikan / unghosted versi ItemStyle.xsl. Saya mengikuti saran Heather, melalui langkah 11 dan mendapatkan hasil menengah ini:
4.1: Nama template XSL saya sebagai berikut:
<Extensible Stylesheet Language:Nama template = "Grid" cocok = "Row[@Style = 'Grid']" mode = "itemstyle">
Juga sedikit mengubah dia menyarankan <Extensible Stylesheet Language:untuk setiap …> dengan menambahkan <br /> Tag untuk menyediakan daftar cleaner:
<Extensible Stylesheet Language:untuk setiap Pilih="@*">
P:<Extensible Stylesheet Language:nilai dari Pilih="Nama()" /><br/>
</Extensible Stylesheet Language:untuk setiap>
4.2: Cara mengubah bagian web, pergi ke tampilan dan pilih "Grid" gaya:
Menerapkan perubahan dan inilah hasilnya:
Kita bisa melihat dari atas bahwa bidang yang kita ingin (Nama proyek, biaya, status, dll) tersedia bagi kita untuk digunakan ketika kita memancarkan HTML. Tidak hanya itu, Tapi kita melihat nama-nama yang kita harus referensi kolom dalam XSL. Misalnya, kita referensi Status proyek sebagai "Project_x005F_x0020_Name".
Pada titik ini, kami berangkat dari Heather's blog dan dari atas bahu raksasa ini, Saya menambahkan sedikit saya sendiri.
ContentQueryMain.xsl
CATATAN: Ketika membuat perubahan baik ContentQueryMain.xsl maupun ItemStyle.xsl, Anda perlu memeriksa berkas tersebut kembali sebelum Anda melihat efek dari perubahan Anda.
Untuk membuat grid tujuan, MOSS menggunakan dua file XSL yang berbeda untuk menghasilkan hasil yang kita lihat dari CQWP. Untuk menghasilkan sedikit sebelumnya output, kami diubah ItemStyle.xsl. MOSS benar-benar menggunakan file XSL lain, ContentQueryMain.xsl ke dalam hubungannya dengan ItemStyle.xsl untuk menghasilkan HTML yang. Seperti namanya, ContentQueryMain.xsl adalah "utama" XSL yang mengontrol aliran keseluruhan terjemahan. Iterates semua item yang ditemukan dan melewati mereka satu per satu untuk template ItemStyle.xsl. Kami akan mengubah ItemStyle.xsl untuk menghasilkan terbuka <Meja> Tag sebelum memancarkan baris pertama dari data dan penutupan <Meja> Tag setelah memancarkan baris terakhir. Untuk mencapai hal ini, ContentQueryMain.xsl yang dimodifikasi untuk memberikan dua parameter untuk kami "grid" template di ItemStyle.xsl, "baris terakhir" dan "baris saat ini". ItemStyle.xsl menggunakan ini untuk kondisional memancarkan Tag diperlukan.
Menggunakan teknik Heather Salomo, Kami mencari ContentQueryMain.xsl. Terletak di tempat yang sama seperti ItemStyle.xsl. Tembakan layar harus membantu:
Kita perlu untuk membuat perubahan berikut:
- Memodifikasi sebuah template xsl, "CallItemTemplate" yang benar-benar memanggil template Grid kami di ItemStyle.xsl. Kami akan menyampaikan dua parameter ke Grid template sehingga akan memiliki data yang dibutuhkan untuk menghasilkan kondisional pembukaan dan penutupan <Meja> Tags.
- Memodifikasi sedikit lain dari ContentQueryMain.xsl bahwa panggilan "CallItemTemplate" untuk lulus "LastRow" parameter jadi LastRow yang akan diteruskan ke template Grid kami.
Menemukan template bernama "OuterTemplate.CallItemTemplate" diidentifikasi oleh string:
<Extensible Stylesheet Language:template Nama="OuterTemplate.CallItemTemplate">
Mengganti seluruh template sebagai berikut:
|
|
<Extensible Stylesheet Language:template Nama="OuterTemplate.CallItemTemplate">
<Extensible Stylesheet Language:Param Nama="CurPosition" />
<!--
Tambahkan "LastRow" parameter.
Kami hanya menggunakannya ketika lulus gaya item dalam "Grid".
-->
<Extensible Stylesheet Language:Param Nama="LastRow" />
<Extensible Stylesheet Language:memilih>
<Extensible Stylesheet Language:Kapan tes="@Style = 'NewsRollUpItem'">
<Extensible Stylesheet Language:menerapkan template Pilih="." mode="itemstyle">
<Extensible Stylesheet Language:dengan param Nama="EditMode" Pilih="$cbq_iseditmode" />
</Extensible Stylesheet Language:menerapkan template>
</Extensible Stylesheet Language:Kapan>
<Extensible Stylesheet Language:Kapan tes="@Style = 'NewsBigItem'">
<Extensible Stylesheet Language:menerapkan template Pilih="." mode="itemstyle">
<Extensible Stylesheet Language:dengan param Nama="CurPos" Pilih="$CurPosition" />
</Extensible Stylesheet Language:menerapkan template>
</Extensible Stylesheet Language:Kapan>
<Extensible Stylesheet Language:Kapan tes="@Style = 'NewsCategoryItem'">
<Extensible Stylesheet Language:menerapkan template Pilih="." mode="itemstyle">
<Extensible Stylesheet Language:dengan param Nama="CurPos" Pilih="$CurPosition" />
</Extensible Stylesheet Language:menerapkan template>
</Extensible Stylesheet Language:Kapan>
<!--
Melewati posisi saat ini dan lastrow ke Grid itemstyle.xsl template.
ItemStyle.xsl akan menggunakannya untuk memancarkan terbuka dan menutup <Meja> Tags.
-->
<Extensible Stylesheet Language:Kapan tes="@Style = 'Grid'">
<Extensible Stylesheet Language:menerapkan template Pilih="." mode="itemstyle">
<Extensible Stylesheet Language:dengan param Nama="CurPos" Pilih="$CurPosition" />
<Extensible Stylesheet Language:dengan param Nama="Terakhir" Pilih="$LastRow" />
</Extensible Stylesheet Language:menerapkan template>
</Extensible Stylesheet Language:Kapan>
<Extensible Stylesheet Language:Jika tidak>
<Extensible Stylesheet Language:menerapkan template Pilih="." mode="itemstyle">
</Extensible Stylesheet Language:menerapkan template>
</Extensible Stylesheet Language:Jika tidak>
</Extensible Stylesheet Language:memilih>
</Extensible Stylesheet Language:template>
|
Komentar menggambarkan tujuan perubahan.
Tentu saja, "OuterTemplate.CallItemTemplate" itu sendiri disebut dari template lain. Menemukan template itu dengan mencari string teks ini:
<Extensible Stylesheet Language:template Nama="OuterTemplate.Body">
Gulir melalui petunjuk di OuterTemplate.Body dan masukkan LastRow parameter sebagai berikut (ditampilkan sebagai komentar dalam huruf miring):
<Extensible Stylesheet Language:panggilan-template Nama="OuterTemplate.CallItemTemplate">
<Extensible Stylesheet Language:dengan param Nama="CurPosition" Pilih="$CurPosition" />
<!-- Masukkan LastRow parameter. -->
<Extensible Stylesheet Language:dengan param Nama="LastRow" Pilih="$LastRow"/>
</Extensible Stylesheet Language:panggilan-template>
Setelah semua ini, kami akhirnya memiliki hal-hal yang diatur dengan benar sehingga dapat memancarkan ItemStyle.xsl kami <Meja> Tag di tempat yang tepat.
ItemStyle.Xsl
CATATAN: Lagi, Check in ItemStyle.xsl setelah membuat perubahan sehingga Anda melihat efek dari perubahan.
Kami memiliki dua tugas di sini:
- Mengganti seluruh Grid template. Anda dapat menyalin/paste dari bawah.
- Tambahkan beberapa omong kosong di luar definisi template yang memungkinkan "formatcurrency" template untuk bekerja. (Anda dapat memberitahu bahwa saya memiliki pegangan lemah XSL).
Pertama, di dekat bagian atas ItemStyle.xsl, Tambahkan baris ini:
<!-- Beberapa omong kosong yang memungkinkan kita untuk menampilkan AS. mata uang. -->
<Extensible Stylesheet Language:desimal-format Nama="Staf" digit="D" />
<Extensible Stylesheet Language:template Nama="Standar" pertandingan="*" mode="itemstyle">
Catatan bahwa saya menambahkan langsung sebelum <Extensible Stylesheet Language:Nama template = "bawaan" …> definisi.
Berikutnya, kembali ke template Grid kami. Mengganti seluruh Grid template dengan kode di bawah ini. Itu adalah benar-benar berkomentar, Tapi jangan ragu untuk email saya atau meninggalkan komentar di blog saya jika Anda memiliki pertanyaan.
|
|
<Extensible Stylesheet Language:template Nama="Grid" pertandingan="Baris[@Style = 'Grid']" mode="itemstyle">
<!--
ContentMain.xsl melewati CurPos dan terakhir.
Kami menggunakan ini untuk kondisional memancarkan terbuka dan menutup <Meja> Tags.
-->
<Extensible Stylesheet Language:Param Nama="CurPos" />
<Extensible Stylesheet Language:Param Nama="Terakhir" />
<!-- Variabel berikut dimodifikasi dari ItemStyle.xsl standar -->
<Extensible Stylesheet Language:variabel Nama="SafeImageUrl">
<Extensible Stylesheet Language:panggilan-template Nama="OuterTemplate.GetSafeStaticUrl">
<Extensible Stylesheet Language:dengan param Nama="UrlColumnName" Pilih="'ImageUrl'"/>
</Extensible Stylesheet Language:panggilan-template>
</Extensible Stylesheet Language:variabel>
<Extensible Stylesheet Language:variabel Nama="SafeLinkUrl">
<Extensible Stylesheet Language:panggilan-template Nama="OuterTemplate.GetSafeLink">
<Extensible Stylesheet Language:dengan param Nama="UrlColumnName" Pilih="'LinkUrl'"/>
</Extensible Stylesheet Language:panggilan-template>
</Extensible Stylesheet Language:variabel>
<Extensible Stylesheet Language:variabel Nama="DisplayTitle">
<Extensible Stylesheet Language:panggilan-template Nama="OuterTemplate.GetTitle">
<Extensible Stylesheet Language:dengan param Nama="Judul" Pilih="@Title"/>
<Extensible Stylesheet Language:dengan param Nama="UrlColumnName" Pilih="'LinkUrl'"/>
</Extensible Stylesheet Language:panggilan-template>
</Extensible Stylesheet Language:variabel>
<Extensible Stylesheet Language:variabel Nama="LinkTarget">
<Extensible Stylesheet Language:Jika tes="@OpenInNewWindow = 'Benar'" >_blank</Extensible Stylesheet Language:Jika>
</Extensible Stylesheet Language:variabel>
<!--
Di sini kita mendefinisikan variabel, "tableStart". Ini berisi HTML yang kita gunakan untuk mendefinisikan pembukaan tabel serta label kolom. Perhatikan bahwa jika CurPos = 1, ini termasuk HTML dalam CDATA tag.
Jika tidak, ini akan menjadi kosong.
Nilai tableStart adalah emited setiap kali ItemStyle disebut melalui ContentQueryMain.xsl.
-->
<Extensible Stylesheet Language:variabel Nama="tableStart">
<Extensible Stylesheet Language:Jika tes="$CurPos = 1">
<![CDATA[
<perbatasan tabel = 1>
<TR bgcolor = "biru">
<TD><warna font = "putih"><b>Nama proyek</b></font></TD>
<TD align = "kanan"><warna font = "putih"><b>Tanggal lengkap</b></font></TD>
<TD align = "kanan"><warna font = "putih"><b>Anggaran</b></font></TD>
<TD align = "kanan"><warna font = "putih"><b>Biaya sebenarnya</b></font></TD>
<TD><warna font = "putih"><b>Keseluruhan Status</b></font></TD>
</TR>
]]>
</Extensible Stylesheet Language:Jika>
</Extensible Stylesheet Language:variabel>
<!--
Variabel lain, tableEnd hanya mendefinisikan menutup meja tag.
Seperti dengan tableStart, Hal ini selalu emited. Inilah sebabnya mengapa nilainya ditetapkan kondisional didasarkan pada apakah kita telah telah lulus baris terakhir oleh ContentQueryMain.xsl.
-->
<Extensible Stylesheet Language:variabel Nama="tableEnd">
<Extensible Stylesheet Language:Jika tes="$CurPos = $Last">
<![CDATA[ </Meja> ]]>
</Extensible Stylesheet Language:Jika>
</Extensible Stylesheet Language:variabel>
<!--
Selalu mengeluarkan isi tableStart. Jika hal ini tidak baris pertama yang diberikan kepada kita oleh ContentQueryMain.xsl, kemudian kami tahu nilai akan kosong.
Menonaktifkan output melarikan diri karena ketika tableStart itu tidak kosong, ini termasuk HTML sebenarnya yang kita inginkan yang akan diberikan oleh browser. Jika kami tidak meminta XSL parser untuk menonaktifkan output melarikan diri, ini akan menghasilkan hal-hal seperti"<Meja>" daripada"<Meja>".
-->
<Extensible Stylesheet Language:nilai dari Pilih="$tableStart" melarikan diri menonaktifkan output="Ya"/>
<TR>
<!--
P:Project_x005F_x0020_Name P:Project_x005F_x0020_End_x005F_x0020_Date P:Project_x005F_x0020_Budget P:Project_x005F_x0020_Expenses P:Project_x005F_x0020_Status
-->
<TD>
<Extensible Stylesheet Language:nilai dari Pilih="@Project_x005F_x0020_Name"/>
</TD>
<TD menyelaraskan="kanan">
<Extensible Stylesheet Language:nilai dari Pilih="@Project_x005F_x0020_End_x005F_x0020_Date"/>
</TD>
<TD menyelaraskan="kanan">
<Extensible Stylesheet Language:panggilan-template Nama="formatcurrency">
<Extensible Stylesheet Language:dengan param Nama="nilai"
Pilih="@Project_x005F_x0020_Budget"></Extensible Stylesheet Language:dengan param>
</Extensible Stylesheet Language:panggilan-template>
</TD>
<TD menyelaraskan="kanan">
<Extensible Stylesheet Language:panggilan-template Nama="formatcurrency">
<Extensible Stylesheet Language:dengan param Nama="nilai" Pilih="@Project_x005F_x0020_Expenses">
</Extensible Stylesheet Language:dengan param>
</Extensible Stylesheet Language:panggilan-template>
</TD>
<TD>
<Extensible Stylesheet Language:nilai dari Pilih="@Project_x005F_x0020_Status"/>
</TD>
<!--
Semua berikut adalah komentar untuk memperjelas hal.
Namun, membawa kembali dan hal itu menjadi <TD> untuk melihat efek.
-->
<!--
<div id = "linkitem" class = "barang">
<Extensible Stylesheet Language:Jika tes = "panjang string($SafeImageUrl) != 0">
<div kelas = "gambar-daerah-kiri">
<href = "{$SafeLinkUrl}" target = "{$LinkTarget}">
<img kelas = "gambar-fixed-width" src = "{$SafeImageUrl}"
Alt = "{@ImageUrlAltText}"/>
</a>
</div>
</Extensible Stylesheet Language:Jika>
<div kelas = "item tautan">
<Extensible Stylesheet Language:panggilan-template
name="OuterTemplate.CallPresenceStatusIconTemplate"/>
<href = "{$SafeLinkUrl}"
target = "{$LinkTarget}" title = "{@LinkToolTip}">
<Extensible Stylesheet Language:nilai dari pilih = "$DisExtensible Stylesheet LanguageyTitle" />
</a>
<div kelas = "Deskripsi">
<Extensible Stylesheet Language:nilai-dari select="@Description" />
</div>
</div>
</div>
-->
</TR>
<!--
Memancarkan menutup meja tag. Jika kami tidak berada pada baris terakhir,
ini akan menjadi kosong.
-->
<Extensible Stylesheet Language:nilai dari Pilih="$tableEnd" melarikan diri menonaktifkan output="Ya"/>
</Extensible Stylesheet Language:template>
<Extensible Stylesheet Language:template Nama="formatcurrency">
<Extensible Stylesheet Language:Param Nama="nilai" Pilih="0" />
<Extensible Stylesheet Language:nilai dari Pilih='format nomor($nilai, "$DDD,DDD,DDD.DD", "staf")' />
</Extensible Stylesheet Language:template>
|
