MOSS 2007: Rounded Web Part , a Nifty Corners Cube hacks

English (versi Indonesia)

You might already know Nifty Corners Cube project, its a solution based on CSS and Javascript to get rounded corners without images. It’s very handy because we can targets to the elements in web page using javascript and voila its rounded. All you have to do is to call

Nifty([CSS selector], [Options]);

CSS selector is the elements while options are rounded option for that element. Unfortunately, the nifty requires to attach function (NiftyLoad) to windows.onload, the function will search and add some css to make it rounded.

Sharepoint web part is one of best target for this component. Why? Because we can make more liquid page - by just using a simple javascript call.

However, if you look at default.master page of Sharepoint, there is a defined body.onload event

“javascript:if (typeof(_spBodyOnLoadWrapper) != ‘undefined’) _spBodyOnLoadWrapper();”

which will collide NiftyLoad() so the rounded web part can not be happened.

So, can we fix it?

Actually, Nifty already implements some fix to avoid such collision with existing windows.onload. However if we want to use it in Sharepoint - we must create some hacks to avoid collision with body.onload. Its a small javascript,

_var bodyonload;
if(typeof(myNifty) != ‘function’) myNifty = function (){};
if(typeof(document.body.onload)==‘undefined’)
{
NiftyLoad = myNifty;
__} else {
bodyonload = document.body.onload;
if(typeof(bodyonload) == ‘function’)
{
document.body.onload = function () {
bodyonload();
AddCss();
myNifty();
}
__} else {
document.body.onload = function () {;
AddCss();
myNifty();
}
}
}
_

myNifty is our function to replace NiftyLoad. myNifty scripts actually call Nifty,

_var myNifty = function () {
_Nifty([CSS selector], [Options]);
}

Implementation
Master Page

1. Add default niftyCorners.css and niftyCube.js to the end of of HEAD section in default.master page.

   

2. Add the above scripts hack to after end of BODY section in default.master page.

   

Page Content (target page)

1. Add content editor web part to insert any custom style and myNifty function.

   

2. Add myNifty function to the web part by clicking “Source Editor”

   

3. Clicking OK will automatically change the target web part rounded as you wish. In this case, I want my Pooling Web Part becomes rounded.

   

4. At last, don’t forget to hide the content editor web part by defining hidden layouts.

And now we can have very liquid Sharepoint page just like this

-Riwut Libinuko-
Plasmedia

--o0o–

Indonesia (English version)

Anda mungkin sudah pernah tau tentang project Nifty Corners Cube. Nifty adalah solusi untuk membuat pinggir elemen web membulat dengan menggunakan CSS dan Javascript serta tanpa memerlukan gambar. Nifty sangat membantu karena kita dapat dengan mudah membuat pingir elemen di dalam web menjadi bulat dengan hanya memanggil javascript. Sintaks yang dibutuhkan cukup mudah yaitu

Nifty([CSS selector], [Options]);

[CSS selector] adalah elemen yang akan dibuat bulat ujungnya, sedangkan [Options] adalah opsi lengkungan yang dikehendaki. Akan tetapi, function javascript nifty (NiftyLoad) harus dijalankan pada saat windows.onload, function tersebut akan mencari dan menambah css agar elemen yang dikendaki ujungnya menjadi bulat.

Web part di Sharepoint adalah salah satu target yang paling cocok untuk solusi ini. Kenapa? Karena kita dapat membuat halaman sharepoint menjadi lebih menarik - dengan menggunakan javascript. Terlebih lagi, kita bisa tetap memanfaatkan seluruh web part sharepoint dan menampilkannya dalam bentuk yang lebih luwes.

Akan tetapi, jika kita teliti melihat ke halaman default.master dari Sharepoint, disana sudah terdefinisi satu fungsi di body.onload event

“javascript:if (typeof(_spBodyOnLoadWrapper) != ‘undefined’) _spBodyOnLoadWrapper();”

Fungsi tersebut akan mengganggu kerja NiftyLoad() sehingga web part dengan pinggir yang bulat tidak bisa dibuat.

Bisakah kita mengatasinya?

Sebenarnya, Nifty sudah mengimplentasikan beberapa fix untuk menghindari bentrokan fungsi semacam itu, namun masih terbatas untuk fungsi-fungsi yang ditempelkan di windows.onload. Jika kita ingin menggunakannya di Sharepoint - atau dihalaman lain yang mirip dengan Sharepoint, maka kita harus mengatasinya dengan cara kita sendiri. Tekniknya cukup sederhana, dengan menggunakan javascript sebagai berikut,

_var bodyonload;
if(typeof(myNifty) != ‘function’) myNifty = function (){};
if(typeof(document.body.onload)==‘undefined’)
{
NiftyLoad = myNifty;
__} else {
bodyonload = document.body.onload;
if(typeof(bodyonload) == ‘function’)
{
document.body.onload = function () {
bodyonload();
AddCss();
myNifty();
}
__} else {
document.body.onload = function () {;
AddCss();
myNifty();
}
}
}
_

myNifty adalah fungsi baru yang dibuat untuk menggantikan NiftyLoad. myNifty pada dasarnya akan memanggil Nifty - sama seperty NiftyLoad,

_var myNifty = function () {
_Nifty([CSS selector], [Options]);
}

Implementasi
Master Page

1. Tambahkan link ke niftyCorners.css dan niftyCube.js ke bagian akhir dari HEAD di halaman default.master.

   

2. Tambahkan script hack diatas di akhir dari bagian BODY di halaman default.master.

   

Page Content (target page)

1. Tambahkan content editor web part sebagai wadah untuk style kus to m dan pendefinisian fungsi myNifty.

   

2. Definisikan fungsi myNifty kedalam webpat dengan meng-klik “Source Editor”

   

3. Dengan meng-klik OK , maka halaman akan disimpan dan pada saat refresh kita dapat langsung melihat hasilnya. Dalam contoh ini saya membuat Pooling Web Part ujungnya menjadi bulat.

   

4. Akhirnya, content editor webpart harus dibuat tersembunyi agar tidak menggangu layout.

Jadi mulai saat ini kita dapat membuat halaman Sharepoint tampil lebih cantik dengan memanfaatkan CSS dan Javascript.

-Riwut Libinuko-
Plasmedia