Creating Weather Webpart using SharePoint Designer

English (versi bahasa Indonesia)

Weather webpart is one of most popular wepart to place in homepage. Many available resources out-there in internet using C# and webservices. But instead of create weather webpart using Visual Studio I will show you how create it using SharePoint Designer.

The process is pretty simple,
1. You need to create a new page in Sharepoint as working canvas.
2. In that working canvas, drop webpart zone and dataview webpart.
3. Find appropriate weather datasource and format dataview webpart.
4. Export the new formatted webpart and delete working canvas.
5. Distribute / use the webpart. Package in solution file if necessary.

Initially open SharePoint site using SharePoint Designer. To prepare a page for working canvas, just create a new aspx page.

On the new page, attach default master page by using attach master page under format menu.

On the PlaceHolderMain in the page, click Create Custom Content to detach this section from master page.

Then in the new custom content area, insert “Web Part Zone” and “Data View”  component from SharePoint Controls.

Next, we need the reference to get weather information from. SharePoint designer provides wide range of data source type, starting from SharePoint List, SharePoint Libraries, Database Connection, XML Files, Server-side scripts, XML Web Services and Linked sources. Since my country has “BMG” which announce weather data officially, in this case I will use XML files as my datasource.

For me, the location of weather data is http://www.bmg.go.id/dataxml/cuaca_indo_1.xml or http://www.bmg.go.id/dataxml/cuaca_indo_2.xml. Saving that location into XML data files, give me a new datasource to working with.

Then click Show Data on the new datasource.

In the data source detail, we can select appropriate fields to show. In this case I select “Kota”, “Cuaca”, “SuhuMin” and “SuhuMax”. And then click Multiple Item View.

By default you will get a table from XML datasource. Like the one bellow.

Since I only want few big cities in Indonesia, then I click filter on the Common Data View Tasks.

Next, is to insert icons to describe weather conditions such as raining, clear, clouds etc. To select appropriate icon, we can test on the “Cuaca” field and choose correct icon ( inspect line number 108 – 118 in the figure below). I also make the table into single column by moving the field content into leftmost column and deleting other column in original table.

Since I transform to single column, then I don’t need to keep the header anymore. So I just change the header into long cell title.

Saving the page and opening in browser, allows me to export the webpart and import back in the future.

Thats for now, just couple minutes to create weather webpart. For you who curious with the webpart, please download it from the attachment ( BMGLike.webpart (17 KB) ).

-o0o-

Indonesia (see English version)

Webpart cuaca merupakan salah satu webpart populer yang sering diminta oleh client. Di internet bisa kita temukan webpart cuaca yang berbayar maupun gratis yang dibuat dengan C# dan web services. Di artikel ini, alih-alih membuat webpart dengan menggunakan Visual Studio, saya akan mendemonstrasikan pembuatannya dengan menggunakan SharePoint Designer.

Prosedurnya cukup sederhana, 
1. Buat halaman aspx di SharePoint sebagai tempat eksperimen.
2. Tambahkan webpart zone dan dataview webpart di halaman kerja tersebut.
3. Tambahkan sumber data cuaca yang sesuai dan format dataview webpart agar tampil cantik.
4. Export webpart yang baru ke dalam 1 file dan hapus halaman kerja.
5. Distribusikan webpart dan masukkan ke dalam solution package jika perlu.

Untuk menyiapkan halaman kerja, buka SharePoint site dengan menggunakan SharePoint Designer. Dari menu file, buat sebuah halaman ASPX baru.

Di dalama yang baru terbentuk, buat referensi ke master page dengan menggunakan menu attach master page.

Setelah di-tempel dengan master page, maka secara default design dan isi halaman akan mengikuti master page. Klik Create Custom Content di bagian PlaceHolderMain untuk memulai membuat kustomisasi di halaman itu.

Di area custom content yang baru terbentuk, tambahkan “Web Part Zone” dan “Data View” webpart didalamnya.

Selanjutnya yang kita butuhkan adalah sumber data. SharePoint Designer memberikan kemudahan untuk menggunakan beberapa jenis sumber data misalnya, SharePoint List, SharePoint Libraries, Database Connection, XML Files, Server-side scripts, XML Web Services dan Linked sources. Disini saya akan menggunakan data yang disediakan secara cuma-cuma oleh BMG , berupa XML file. Kita dapat langsung menggunakan referensi berupa URL ke XML yang bersangkutan.

Lokasi XML data yang disediakan oleh BMG adalah di http://www.bmg.go.id/dataxml/cuaca_indo_1.xml atau http://www.bmg.go.id/dataxml/cuaca_indo_2.xml. Simpan informasi lokasi tersebut sebagai sumber data XML yang baru.

Kemudian klik “Show Data” pada sumber data XML yang terbentuk.

Didalam data source detail, kita dapat menentukan field-field yang akan ditampilkan. Disini kita ambil “Kota”, “Cuaca”, “SuhuMin” dan “SuhuMax”. Kemudian klik Multiple Item View.

Secara otomatis, kita akan memperoleh tabel yang diperoleh dari field-field yang ditentukan tadi, seperti dibawah.

Kita juga dapat memfilter agar menampilkan beberapa kota besar di Indonesia saja. Caranya, dengan menentukan filter dari properti data view webpart di  Common Data View Tasks.

Agar tampilannya menjadi cantik, kita bisa menambahkan icon untuk hujan, cerah, berawan dsb. Untuk mendapatkan icon yang sesuai, maka kita gunakan xsl:choose dan mengetes nilai field Cuaca (perhatikan baris 108 – 118 pada gambar dibawah). Saya juga mengubah tabel menjadi 1 kolom, dengan memindahkan isi field lain ke kolom paling kiri dan menghapus kolom yang tidak digunakan. 

Judul tabel juga diubah dengan mengubah table headernya, dan menyesuaikan dengan format 1 kolom.

Simpan halaman yang sudah selesai diedit dan kemudian buka di browser. Hasilnya adalah halaman dengan weather webpart yang baru, tugas kita berikutnya adalah mengeksport webpart tersebut dan siap untuk didistribusikan.

Akhirnya, mudah-mudahan step-by-step diatas memberikan ide untuk rekan-rekan semua. Untuk yang tidak mau report, berikut ini adalah webpart yang sudah jadi ( BMGLike.webpart (17 KB) )

Tags: Microsoft+Office+SharePoint+Server+2007, JQuery, Tips