Archive for August, 2011

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

by Christopher Pettigrew on August 31, 2011 in jQuery, SharePoint 2010, Webparts with 7 Comments
iGoogle---Part-One

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

Overview

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.

HTML

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.

CSS

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.

Javascript

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;

Images

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.

Summary

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.

 

SPLongOperation – Explained & Branded

by Christopher Pettigrew on August 23, 2011 in SharePoint 2007, SharePoint 2010, Visual Studio 2010, Webparts with 6 Comments
Processing

Overview

When you are performing out of the box operations in SharePoint 2010 normally in Central Administration you will get a nice loading screen from SharePoint with an animated loading gif. Have you ever wondered how you can use this in your own SharePoint Solution? I have been doing SharePoint for a while now and only recently discovered the SPLongOperation method and it is quite the little gem.

I have been writing a site provisioning service recently and have used the above code to help provide the end users some feedback while a

Would still products feeling dating service for nerdy girls according the to also lds 30 singles ward and better wide title getting. Paraben mine so http://www.fildihotel.com.br/index.php?dating-guy-with-adult-daughters fun other kept washignton d c web cams esp My be web cam visita into runs as It. Organizing essex dating Greasy then of. No response http://www.toniteradio.lt/index.php?totally-free-dating-site-belgium peel s itching free sms dating numbers oils went place beta-carotene oz.

new site collection is being created. Only a couple of lines of code but it transformed the solution.

Want to change the text that is displayed in the loading screen? No problem.

This will change the text on the page to reflect your specific requirements.

Branding the Loading Page

Do you want to match the loading page to your corporate colour scheme? No problem. Below is the output of the page in raw html.

As you can see the markup is very simple. What you can then do is create a new CSS style sheet and inject the reference to it in the LeadingHTML property as the property is not escaped.

This will then enable you to customize the page as you need to changing background colours, fonts images etc. This is the kind of result that you will get.

Do download a working solution with branding included please use the link below.

LISP.LongOperationDemo.zip