Bung Arkka’s Weblog

Just another weblog @ Werk!

a-Modifikasi List View Web Parts September 8, 2008

Filed under: F-Pages-17---13 — bungarkka @ 6:58 am
Tags:

Modifikasi List View web Parts

List View adalah web part yang unik yang terbentuk secara otomatis untuk tiap list atau library di dalam site (situs).
Anda sudah mempelajari sebelumnya bagaimana cara menambahkan list sebagai web part, oleh karena itu saya tidak akan mengulanginya disini.
Namun kali ini saya perlihatkan cara menggunakan teknik yang lebih maju, seperti cara mengkoneksi satu list view ke list view lainnya untuk menampilkan summary / detail view,
cara konversi list view ke data view, cara memindahkan web part dari satu halaman ke halaman lain, cara ekspor impor dan publikasi web part yang telah dimodifikasi untuk digunakan pada halaman dan situs lainnya.

 

 
Koneksi Summary Detail View

Pada demonstrasi kali ini, akan saya tambahkan detail view karyawan pada web partnya Daftar Telepon.
Ketika pengguna memilih nama karyawan di Daftar Telepon, maka tampil penjelasan karyawan tersebut secara perinci.
Untuk itu, anda perlu melakukan beberapa langkah yaitu:
1. Menambah detail view pada Daftar Telepon di situs utama
2. Konek detail view ke web partnya Dafter Telepon (summary view)
3. Lihat hasilnya untuk memastikan koneksi summary/detail web part bekerja dengan baik

Pertama, untuk menambahkan detail view lakukan sebagai berikut:
1. Navigasi ke halaman dimana terdapat Daftar Telepon
2. Klik Site Actions dan pilih Edit Page
3. Klik Add a Web Part, dan tambahkan web part Daftar Telepon lainnya pada zona bagian kanan
4. Pada web part toolbar, klik Edit dan pilih Modify Shared Web Part. SharePoint menampilkan web part properties task pane nya
5. Rubah properties nya web part seperti demikian
6. klik Apply
7. Klik pada link Edit the current view, dan lakukan perubahan seperti ini. Klik OK jika telah selesai.

Tahap kedua, konek Daftar Telepon ke Summary web part, caranya:
1. Klik Site Actions dan pilih Edit page
2. Klik menu Edit dibagian Details web part toolbar dan pilih Connections, Get Sort/Filter Form, dan klik Daftar Telepon. SharePoint menampilkan Configure Connection dialog box.
3. Klike Next, pilih Column Last Name, dan klik Finish. SharePoint menkonek kolum Last Name pada kedua web part tersebut
4. Klik Exit Edit Mode

 

 
Konversi dari List View ke Data View

Sejauh ini semuanya bekerja dengan baik, tetapi web part nya Details terlihat terlalu lebar.
Anda bisa merubah property web part nya Width, namun tidak akan berhasil.
Satu satunya cara adalah mengkonversi Details web part ke Data View, lalu modifikasi penampilannya dari situ.
Dan kemudian, konek kembali kedua web part itu dan tes sekali lagi keberhasilannya

Cara konversi dari Details web part ke Data View:
1. Buka halaman SharePoint Designer
2. Tekan tombol kanan pada web part nya di Design pane dan pilih Convert to XLST Data View. SharePoint Designer menampilkan peringatan bahwa koneksi ke web part lainnya akan hilang.
3. Klik OK untuk melanjutkan
4. Pilih kolum heading row nya dan tekan Ctrl X untuk memotong nya
5. Simpan halaman tersebut lalu preview di browser. Sekarang penampilannya lebih rapi tanpa adanya kolum heading

Penampilan web part Details kelihatan lebih menarik, tetapi perlu melakukan koneksi kembali pada nya, caranya:
1. Perlihatkan halaman nya di browser dan klik Site Actions lalu pilih Edit Page
2. Klik menu Edit pada web part Details dan pilih Connections, pilih Get Sort/Filter From dan klik Daftar Telepon. Kini SharePoint menampilkan Configure Connection dialog box.
3. Pilih nama kolum yang sesuai untuk konek kemabli pada First Name, Last Name, dan Business Phone. Klik Finish jika sudah selesai. Kini web parts nya telah terkoneksi kemabli
4. Klik Exit Edit Mode. Setelah anda selesai, kedua web part tersebut seharusnya tampil seperti ini.

 

 
Konversi dari List View ke Drop Down List

Demonstrasi ini akan memperlihatkan cara mengkonversi Daftar Telepon menjadi suatu web part yang bisa di ekspor.
Untuk melakukan itu, pertama harus pindahkan Daftar Telepon ke tes page menggunakan SharePoint Designer, kedua modifikasi web part nya dengan browser, ketiga buka kembali tes page nya di SharePoint Designer, dan terakhir konversi web part ke Data View.

Untuk memindahkan Daftar Telepon ke tes page, caranya:
1. Buat Page Library yang baru
2. Tambahkan tes page pada Page Library yang diberikan nama page1.aspx
3. Buka home page di SharePoint Designer dan kopi Daftar Telepon web part nya
4. Buka tes page di SharePoint Designer dan copy-paste Daftar Telepon ke dalam zona web part nya
5. Simpan page nya lalu lihat hasilnya di browser

Berikutnya, saya rubah penampilan nomer teleponnya agar menjadi drop-down list.
Untuk melakukan hal itu, perlu melakukan dua hal yaitu: tambahkan kolum kalkulasi pada list yang akan mengkombinasi nama dengan nomer teleponnya, dan memodifikasi penampilannya agar hanya memperlihatkan kolum tersebut saja.

Untuk menambahkan kolum kalkulasi yang menggabungkan nama dan nomer telponnya, caranya:
1. Klik link Daftar Telepon web part nya
2. Klik Setting dan pilih Create Column
3. Buatlah kolum dengan pilihan setting seperti demikian. Klik OK kalo sudah selesai.

Untuk memodifikasi view atau penampilannya, caranya:
1. Buka tes page nya
2. Klik menu Edit dan pilih Modify Shared Web Part
3. Klik Edit the current view
4. Hapus semua centangan kolum, dan pilih kolum baru Web Part. Hapus setting nya Group By, dan klik OK.
5. Klik menu Edit dan pilih Modified Shared Web Part sekali lagi
6. Pilih No Toolbar pada Toolbar Type dan klik OK

Setelah selesai, kolum First Name Last Name dan Business Phone telah tergabung menjadi satu kolum yang bernama Web Part.
Kini saatnya mengkonversi web part nya menjadi Data View untuk memperlihatkan informasi dalam bentuk drop-down list, caranya:
1. Buka tes page di SharePoint Designer
2. Tekan mouse kanan dan pilih Convert to XSLT Data View
3. Klik Data View dan pilih Data View Properties dan klik Layout Tab
4. Pilih style drop-down dan klik OK
5. Simpan page dan lihat hasilnya pada browser

 

 
Exporting Web Parts

Sebenarnya tidak bisa mengekspor List View web part, hanya bisa mengkopi List View dari satu page ke page lain dengan menggunakan SharePoint Designer.
Untuk bisa mengekspor List View yang telah dimodifikasi, pertama harus mengkonversi List View web part nya ke Data View.
Untuk mengekspor web part:
1. Buat folder WebParts di komputer desktop
2. Klik pada menu Edit nya web part dan pilih Export
3. Klik Save dan simpan file nya di folder WebParts. Pastikan nama file nya diberikan nomer urutan karena SharePoint akan selalu menyimpan dalam bentuk extensi .dwp atau .webpart

Web Part yang telah di ekspor adalah XML description dari properti setting nya web part itu.
Dan untuk jenis web part Data View, properti setting nya berisikan general web part properties, source list ID, dan XSL transformation yang berfungsi membuat format web part itu sendiri.
Bagi yang mahir dengan XML, anda bisa edit XML descripsi nya secara langsung, atau membuat perubahan langsung pada web part nya dari web part properties pane.

Untuk mengedit XSL untuk Data View web part:
1. Klik menu Edit dan pilih Modify Shared Web Part
2. Klik tombol XSL editor. SharePoint membuka web part nya XSL dalam bentuk teks entry page.
3. Tek nya belum diformat, oleh karena itu kopi konten dalam tek box nya dan paste ke dalam XML Editor untuk melakukan perubahannya
4. Paste perubahan yang telah anda lakukan pada teks box, lalu klik Save
5. Klik Apply untuk konfirmasi
6. Setelah perubahannya sudah selesai, ekspor kemabli web part nya dan jangan lupa untuk menamakannya dengan nomer urutan.

 

 
Importing and Deploying Web Parts

Selain mengekspor, anda juga bisa mengimport web part ke page atau menaruhnya pada site gallery untuk umum.
Cara mengimport web part ke page:
1. Buka halaman yang ingin disertakan web part nya
2. Klik Site Actions dan pilih Edit Page
3. Klike Add a Web Part di zona yang diinginkan
4. Klik Browse dan pilih Import
5. Klik Browse dan pilih file web part nya dari folder WebParts, lalu klik Open
6. Klik Upload
7. Ambil dan taruh web part nya ke dalam zone web part
8. Klik Exit Edit Mode setelah selesai

Untuk menaruh web part pada site collection web part gallery, caranya:
1. Navigasi ke situs utama (home)
2. Klik Site Actions, Site Settings, dan pilih Modify All Site Settings
3. Klik Web Parts dibagian galleries
4. Klik Upload untuk mengupload web part dari folder WebParts
5. Klik Browse dan ambil file web part nya, lalu klik OK
Web part anda akan tampil di site gallery dibagian Add Web Parts pada saat anda mengklik link Add a Web Part.

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s