Ideas for free


Creating Weather Webpart using SharePoint Designer

Posted in Microsoft Sharepoint,Office 12,Office Server 2007,Tips and Tricks by cakriwut on September 6, 2008

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.

HomeShow

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.

Bmg0

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

Bmg01

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

 CustomPlace

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

InsertDataView

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.

XmlData

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.

Bmg3

Then click Show Data on the new datasource.

Bmg4

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.

Bmg5

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

Bmg6

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

Filter

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.

Bmg9

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.

Bmg10

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

Export

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.

HomeShow

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.

Bmg0

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

Bmg01

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.

 CustomPlace

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

InsertDataView

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.

XmlData

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.

Bmg3

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

Bmg4

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.

Bmg5

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

Bmg6

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.

Filter

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. 

Bmg9

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

Bmg10

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.

Export

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) )

 

About these ads

One Response to 'Creating Weather Webpart using SharePoint Designer'

Subscribe to comments with RSS or TrackBack to 'Creating Weather Webpart using SharePoint Designer'.

  1. bungarkka said,

    atau gunakan Google Gadget dan tinggal copy kode nya ke dalam Content Editor Web Part. pastinya tidak serumit ini! dan tampilannya dijamin lebih keren! simak caranya disini http://bungarkka.wordpress.com/category/i-rss-rollups-dan-site-maps-7-3/


Leave a Reply

Please log in using one of these methods to post your comment:

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


Follow

Get every new post delivered to your Inbox.

%d bloggers like this: