iGoogle UI for SharePoint – Part One : Overview, Concept, HTML Structure & Jquery Basics


Series Content

  1.     Part One – Overview, Concept,  HTML Structure & jQuery Basics – Current Article
  2.     Part Two – Dragging, Dropping,  Sorting and Collapsing
  3.     Part Three – Saving WebPart states using Cookies
  4.     Part Four – Control Adapters
  5.     Part Five – SharePoint 2010 Integration
  6.     Part Six – Bringing it all together
  7.     Bonus – Saving WebPart States using the Client Object Model


This is the first in a series of posts which will explain how to create an iGoogle style interface for SharePoint 2010.  More and more clients are asking for an iGoogle or BBC Homepage style homepage for their intranets and out of the box in SharePoint 2010 there is no method to do this.  While you can drag and drop webparts in “Edit Mode” in a WebPart page, end user however is stuck on where to place their webparts on the page.  This series will aim to provide a mechanism where end users are able to take control of their page and make the SharePoint experience more personal.

There are many sites on the internet which have the ability to drag and drop components around the page and save their locations for your next visit.  Some of the most well known examples of this interface are:

iGoogle – http://www.google.com/ig?hl=

BBC Homepage – http://www.bbc.co.uk/

Both these sites give you the ability to drag and drop various widgets around the page.  You can also close widgets you do not want to see and minimise others to maximise space on the page.  This is the kind of interface that we are going to create for use in SharePoint using jQuery and some C# code.

The Plan

First, let’s list exactly what we’ll be creating here and what features it will have:

  • The interface will contain several widgets (WebParts).
  • Each widget can be collapsed and removed via controls on the page.
  • The widgets can be sorted into an unlimited number of columns.
  • WebParts will be have their rendering controlled via a control adapter which will modify their look and feel.
  • Widgets will have their location and states saved using cookies.
  • Creating a simple Visual Studio 2010 solution to deploy an example.

This post will provide an overview of what we are planning to build as well as getting some development environments configured for your own personal demos.

Getting Started

To get started in this post we will be creating a demo environment to ensure that the Javascript, HTML and CSS are all working together for use in future posts.  Initially we will not be touching SharePoint as it is not necessary at this stage.  Firstly we will need to create a base HTML template that will load a specific CSS stylesheet, images and Javascript libraries.


Below is the base HTML that will be used in our initial demo.  We have a wrapper div that surrounds three div columns called “Left”, “Middle” and “Right”.  Within each column is the widget HTML that will be used to wrap each WebPart.  Each widget has a wrapper div as well as a header and body content divs.

As you can see the HTML is very simple but at the moment it will not look very attractive.  We have each of the widgets in their own Div and in the header we have three images which will be our “buttons” to control each widget.  On the left we have the collapse icon, next we have the edit icon and finally we have the remove icon.  Underneath the header we have an edit panel which will contain in this example some colour selections for the header bar which will be hidden in the css shown below.  So the next task is to now style the page and make it look neater.


The CSS is fairly simple and will be used for the SharePoint implementation.  We start with a global reset of the page to ensure that all DOM elements are reset.

The CSS helps style the page into three even columns and each of the widgets are styled with some buttons and styled headers.


To provide the cool functionality, we will need to get the latest jQuery libraries and jQuery plugins. We will also create our own custom javascript file which we will be used to store our script.  The versions that we are using are below with links to download them.

Our own script.js file at this stage will contain only a couple of lines of code to test that jQuery is working;


The images for the close and collapse buttons we will use a simple sprite which has a close, max and min symbols on it.

Live Demo

A live demo of the base structure can be found here.


In this post we have outlined what we will be covering and have managed to get a demo environment working for the next phase.  We will add some jQuery functionality and make our page come alive in the next posts.  I hope this post has been useful and please leave some comments about what you would like to see in future posts.


I am the SharePoint Development Lead at ICS Solutions Ltd. As well as broad knowledge in SharePoint 2007, 2010 & 2013 my specialities lie with SharePoint Branding, WebPart Development and JQuery integration.

7 Comments on "iGoogle UI for SharePoint – Part One : Overview, Concept, HTML Structure & Jquery Basics"

  1. Hector Huesca says:

    Hi!… i absolutly love this, and i would like to have it on my sharepoint, however, the demo isnt working?… if i implement this it will work?… best regards!

  2. Hassib says:

    Dear Chris,

    Would you please let me know why Igoogle Feature on SharePoint 2010 cannot open on many Browser since i can open the page integrate on SharePoint on IE browser and i cannot opened on Forefox, Safari, google Chrome ….

    Please help me and thanks for your great post

  3. Zulma says:

    Thanks for enabling me to gain new thoughts about computer systems.
    I also possess the belief that certain of the best ways to maintain your notebook computer in excellent condition is
    a hard plastic case, or maybe shell, that suits over the top of one’s computer. These kinds of protective gear are usually model targeted since they are made to fit perfectly over the natural covering. You can buy all of them directly from owner, or via third party sources if they are for your laptop, however don’t assume all laptop will have a spend on the market.
    Yet again, thanks for your tips.

  4. Saravana says:

    I have the same requirement is there in our project. but 2 more steps are there in our project plz find the below desc….

    In our Project we have 1. Add the WebPart(Widget) 2. Drag and Drop 3.Save the WebPart’s in a list with user information when wever user logins what ever personlzation should appear.

    Plz Help me out in 2 and 3 steps

  5. Please view the other parts of the iGoogle UI for SharePoint to see how to complete these sections

  6. hassib says:

    How we can convert this package to fit into SharePoint 2013 version since we are trying to upgrade the solution it has errors ….. can you upload a SP 2013 version solution

    Please help us !


Trackbacks for this post

  1. iGoogle UI for Sharepoint: my way | Andrea Ramacciotti Blog's

Got something to say? Go for it!