Saturday, February 27, 2010

SharePoint 2010 HTML Markup changes in rendering

Wow. SharePoint 2010 has lot of new features. Everyone knows that. But, among all of them, the main thing I have really loved is the HTML markup generated for the SharePoint 2010. You know what? They have replaced the tables with Div and ul, li etc. So, this is a very good thinking and change from SharePoint team which likes by all and browsers. Everyone knows what are the problems with TABLES and in SharePoint 2007 you find many many tables. But not any more in SharePoint 2010.
Below is the simple snapshot which is taken from the view source of SharePoint 2010 Publishing site template.

What if you are trying to migrate from SharePoint 2007 to SharePoint 2010? 2007 version is built on TABLES and 2010 version is built on DIVS. Don't confuse here. All the SharePoint built-in controls like SharePoint navigation, Quick launch etc renders as TABLES in SharePoint 2007 and in SharePoint 2010 they render as Divs.  So, the format is changed. If you have done plenty of customization in 2007 web site and tried to migrate 2010 site, then I am not sure you will be succeeded in formatting after migration. So, by considering this issue into account Microsoft SharePoint team introduced a nice concept called "visual Upgrade". So, what this means? Once you are done with the migration, do you want to change the UI [visual upgrade] from v3 to v4 or not . V3 uses the version 3 rendering the TABLES formatting, whereas V4 uses the Version 4 renders in the format of DIVS. For better understanding the concept, I will show you above terms in terms of figures.

Visual Upgrade
Once we are done with SharePoint site migration[to SharePoint 2010], you will see the same layout and UI as previous site [SharePoint 2007]. The UI is not really migrated to the SharePoint 2010 UI [V4]. So, what to do to migrate UI too to SharePoint 2010 format?
Now, you can see a new item in the site actions menu named "Visual Upgrade" as shown below.
When you click on the Visual Upgrade option, then you go to a page where you can see three options to preview how it looks like in v4. See below image.
  1. Here, the option 1 means, display the same UI as the v3 UI. i.e. Your SharePoint 2007 UI.
  2. Option 2 is, Preview the site in V4 mode, but, don't save it permanently. So that you have chance to take a look at the site in V4 mode and if you think UI is not well formatted then revert the changes back to V3.
  3. Option 3 is, Permanently change the UI to V4 mode. If you select this, then you can't change the UI back to V3 mode and the option "Visual Upgrade" under site actions will go away.
 I think, you understood it well and will greatly use the advantage of this feature. Love to hear something from you.

2 comments:

  1. Oh realy interesting artical on sharepoint 2010. Even i have started blogging to share my work experiance on sharepoint and technology at http://www.cmsstores.com
    Keep on writing. great work. Sandesh

    ReplyDelete
  2. I used HTML in survey questions in Sharepoint 2007 - it enabled me to have pictures in the questions, however now cannot work out what i need to change to do this in 2010. Very frustrating.

    This is the 2007 code: (within the script tag for onetidPageTitleAreaFrameScript)

    document.getElementsByTagName('Table').item(0).outerHTML=document.getElementsByTagName('Table').item(0).outerHTML.replace(/</g,'<').replace(/>/g,'>');

    ReplyDelete