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.

    Nifty1

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

    Nifty2

Page Content (target page)

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

    Nifty3

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

    Nifty4

  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.

    Nifty5

  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

Nifty6

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

    Nifty1

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

    Nifty2

Page Content (target page)

  1. Tambahkan content editor web part sebagai wadah untuk style kustom dan pendefinisian fungsi myNifty.

    Nifty3

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

    Nifty4

  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.

    Nifty5

  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.

Nifty6

-Riwut Libinuko-
Plasmedia

About

Riwut Libinuko, experienced Architect. Currently working with Credit Agricole CIB, responsible for SharePoint platform in Asia Pasific. . Certification: SharePoint 2013, SharePoint 2010, SharePoint 2007, ITiL v3

Posted in Microsoft Sharepoint, Office Server 2007, Tips and Tricks
5 comments on “MOSS 2007: Rounded Web Part , a Nifty Corners Cube hacks
  1. Joko Widono says:

    Bisa tolong beri tahu cara pakai nifty sekalian tidak?
    Saya tidak tahu cara pakainya. Setelah saya menglink css dan js filenya, lalu masukkan kodenya, bagaimana selanjutnya?
    Bisa tolong beri contoh satu bagian saja, contohnya button, pleeasseee…

  2. mbeckers says:

    I have followed all your steps closely, but don’t seem to get this to work.
    After I enter your “my nifty code” to the content editor webpart I get the message “please wait while scripts are loaded”.
    I also don’t understand where you get the css class wp-outerbox and wp-contentbox from.

  3. cakriwut says:

    Yes, we need niftyCorners.css
    The keypoint of this technique is modifying outer-box div corner using CSS. And we find the outer-box div by selecting the style class.

    So you might wonder, where wp-outerbox and wp-contentbox comes from. They come from my custom webpart. The webpart render two div’s , crafted with wp-outerbox and wp-contentbox css class.

    My webpart structures, (with full tag div)

    DIV class=wp-outerbox
    DIV class=wp-contentbox
    {{ACTUAL CONTENT GOES HERE}}
    /DIV
    /DIV

  4. cakriwut says:

    Untuk Joko Widono, sorry baru jawab sekarang..
    untuk menggunakan nifty tinggal menggunakan contoh diatas, prinsipnya step-step yang harus dilakukan adalah,
    1. tambahkan link ke javascript dan css nifty
    2. load javascript nifty pada saat body onload
    3. batasi konten kedalam 2 div (2 div inilah yang akan dibuat melengkung)
    4. jalankan nifty untuk memodifikasi border.

    (English)
    For Joko, sorry for this late answer,
    To use nifty, you can just follow step by step above, however the key point of the steps are,
    1. add link reference for nifty js and css
    2. load nifty on body-onload event
    3. put the actual content into 2 level div (those two divs will be made our corner)
    4. run nifty procedure to modify the corner.

  5. weupzz says:

    Hello Cakriwut,

    It seems to me this method cater for a certain webpart. What if I want to do rounded corner to all the webparts in sharepoint?

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

%d bloggers like this: