Thursday, February 19, 2009

AJAX enable Zone Tabs Web part in Sharepoint

1. Install Zone Tabs web part from http://code.msdn.microsoft.com/zonetabs/Release/ProjectReleases.aspx?ReleaseId=201

All credit goes to Bob German who developed this wonderful web part: http://blogs.msdn.com/bobgerman/archive/2008/02/19/back-in-the-zone-with-zonetabs.aspx

Installation steps:
a) Add Solution: (assuming you copy the .wsp file in C drive)
stsadm.exe –o addsolution –filename “C:\ EasyTabParts.wsp”

b) Deploy Solution:
stsadm.exe –o deploysolution –name “EasyTabParts.wsp” –url “http://sitecollectionurl” –allowgacdeployment –immediate

c)This feature has now been installed at your site collection specified
Activate this feature for your Site Collection.

Add this web part to any of your pages in web part zones i.e Left, Right, Middle, Bottom etc. (Note: you have to AJAXIFY this zone in the Page Layout, covered later in this article)

Works wonderfully well, but refreshes the whole page when you click on respective Tabs, our task is to make it AJAX driven, thereby causing only partial post-backs and not full page refreshes.

2. Download ASP.NET 2.0 AJAX extensions 1.0 from http://www.ajax.asp.net

3. Ensure that you have MOSS SP 1 installed for sure; also install the December Cumulative updates from Microsoft too.

4. Configure your SharePoint web application with AJAX.
It means you have to add some entries in web.config for your SharePoint web application. This could be time consuming and error-prone, instead I recommend you to install this great utility available at Codeplex, http://www.codeplex.com/ajaxifymoss/Release/ProjectReleases.aspx?ReleaseId=13360

It automatically adds the web.config extensions for you.

Here are the installation steps:Download the zip file, extract it, and execute deploy.cmd on your MOSS environment. The stsadm commands for ajaxifying MOSS will then be available.

- add asp.net ajax to web.config
stsadm -o addajax -url "http://your.moss.webapplication"

NOTE: After installing this, one entry got missed from Safe Control assembly, I guess it is an inherent bug in the utility, go to your web.config file and ensure that this piece of code exists in your web.config Safe Control section

<SafeControl Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI" TypeName="*" Safe="True" />

If it exists, its good for you, in case it doesn’t, then you have to add it manually

- remove asp.net ajax from web.config
stsadm -o removeajax -url http://your.moss.webapplication

- add .Net 3.5 ajax to web.config
stsadm -o addajax35 -url http://your.moss.webapplication

-remove .Net 3.5 ajax from web.config
stsadm -o removeajax35 -url "http://your.moss.webapplication"

In any case, you are not successful and get stuck, using the above utility, refer to Mike’s blog at: http://sharepoint.microsoft.com/blogs/mike/Lists/Posts/Post.aspx?ID=3 and make the web.config changes manually.

5. Modify your master page. If you have an customized your master page, using SharePoint designer, Check Out and make changes, else if you have deployed master page as a feature, make these changes in your Visual Studio solution and re-deploy the feature once again using upgrade command of stsadm utility

a) Search for <webpartpages:spwebpartmanager id="m" runat="Server"> in your master page and add the Script Manager tag just beneath the above tag

<asp:ScriptManager runat="server" ID="ScriptManager1" />

b) Add the following JavaScript function in your master page, just above the closing head tag

<script type="text/javascript" language="javascript">
function RestoreToOriginalFormAction()
{
if (_spOriginalFormAction != null) {
if (_spEscapedFormAction==document.forms[0].action){
document.forms[0].action=_spOriginalFormAction;
}
_spOriginalFormAction=null;
_spEscapedFormAction=null;

document.forms[0]._initialAction = document.forms[0].action;
}

</script>

c) Add the javascript method RestoreToOriginalFormAction() in the Body onload tag, as follows:

<BODY scroll="yes" onload="javascript:if (typeof(_spBodyOnLoadWrapper) != 'undefined') _spBodyOnLoadWrapper(); RestoreToOriginalFormAction();">

6. Modify your Page Layout
This is the final step in getting your Zone Tabs to work with AJAX, choose your Page Layout depending on your page, where you have added the Easy Tabs webpart, remember the webpart zone: for eg: Left, Middle, Right, Bottom, Top Left, Top Right etc.

We need to place the Update Panel just above the webpart zone, here is the code for update panel (assuming, we are adding the update panel on the left webpart zone), copy this code:

<asp:UpdatePanel id="LeftPanel" runat="server">
<ContentTemplate>
<WebPartPages:WebPartZone runat="server" Title="Left" ID="LeftColumn" Orientation="Vertical">
<ZoneTemplate></ZoneTemplate>
</WebPartPages:WebPartZone>
</ContentTemplate>
</asp:UpdatePanel>
After adding this code to your page layout, it should appear in the following way in Sharepoint Designer:



Similar to this you can add many Update Panels in different zones in the same page layout, I added two update panel controls with different id’s on the Left Webpart zone and the other on the Right webpart zone.

Finally go to your site page, see the Easy Tab webparts with AJAX in action. Now when you click any of the tabs, you will see only the webpart zone getting refreshed and not the full page.

If you find this information useful, send in your valuable comments

39 comments:

  1. using this on WSS modifying the default.aspx, there is a problem.

    Once enabled you appear loose ALL webpart edit menus from any page

    ReplyDelete
  2. Hi Martin,

    I have used this with MOSS 2007 with all the latest service packs installed.

    Kindly ensure to update your WSS with SP1 and WSS Infrastructure updates, before you enable AJAX with Easy tab webpart

    ReplyDelete
  3. Can I use this to update any web part zone? I want to do a partial page refresh (a dataview web part) at intervals (possibly add ajax timer?)

    Thanks

    ReplyDelete
  4. Hi Bill,

    Follow the AJAX enabling instructions in my article.

    Then Place the UpdatePanel for any zone in your page, drag your dataview webpart in that AJAX enabled zone, and you will see partial page refresh in that zone.

    ReplyDelete
  5. Well I gave it a try. Got the Ajax working ok. After adding the SPD pieces, it was breaking lists (NewForm, EditForm, etc.) I had to roll back. A shame, it's a request I got on Friday and was hoping it would fall in place. Thanks for the article, I'll give it a try again soon.

    ReplyDelete
  6. Hi Bill,

    I wonder why would this happen in the first place, just ensure you have WSS SP1, MOSS SP1, WSS Infrastructure updates and December cumulative update pack installed prior to AJAX enabling the site.

    Are your New,Edit,Display forms customized using SPD or using features, please let me know, i am interested in knowing it...

    ReplyDelete
  7. The ajax was not a problem, WSS 3.0 SP1 December update. Tested ajax with one of Jan Tielens ajax web parts.

    I use SPD.

    I am using "Display settings (powered by Bewise)" http://www.codeplex.com/SPListDisplaySetting to aid in the visibility of the columns. I didn't edit any OOB forms but did create an additional new item form so I could have more control over how it acts. I am using a custom masterpage on the new item form and on the home page. I use the OOB master everywhere else.

    ReplyDelete
  8. The JavaScript in section b) looks invalid due to mis-matched brackets (3 open, but only 2 close).

    ReplyDelete
  9. Updated the Article, ISSUE has been fixed. The brackets were images actually, I have now replaced them with text.

    ReplyDelete
  10. I have encountered 2 issues with Ajax Zone Tabs:
    1. In the IE 6.0 when a tab is clicked it becomes completely white (with font and background in the same white color). This works fine in the IE 7.
    2. Also when a tab is clicked the tiitle of the page gets changed to the "asp:Literal text ......."
    Please let me know if there are fix or workarounds for these 2 issues.

    ReplyDelete
  11. Will the install of the upcoming SP2 (http://blogs.technet.com/office_sustained_engineering/archive/2009/04/16/service-pack-2-for-the-2007-microsoft-office-system-due-to-ship-april-28th.aspx) be sufficient enough to get the AJAX tabs working. Or would we also need the december cumulative updates?

    ReplyDelete
  12. Correction: Be sure to add a closing tag on the
    asp:ScriptManager line.

    This AJAX tabs code works well but there's a problem with using it for the display of list views.

    We have two tabs, each tab displays a different "Announcement" list view. The content shown by default is announcement title, date, author, and body text.

    On the initial load of the page, the body content shows for the first tab but when you click the second tab, you will not see the body content within that tab. Same issue when clicking back to the first tab.

    ReplyDelete
  13. This comment has been removed by the author.

    ReplyDelete
  14. Thanks for the mentioning about the closing script tag, i have updated the article...

    ReplyDelete
  15. I think, SP2 will do the trick, they have grouped Dec and Feb cumulative updates together as SP2.

    With SP2 and the above configuration AJAX tab web parts will work fine...

    ReplyDelete
  16. I tried this configuration in my development environment (W2k3, MOSS 2k7 SP1) and everything works fine. The moss site is using the default template.

    Then I did exactly the same in a demo environment (Win 2k8, MOSS 2k7, Spanish language pack) in a customized spanish language site (using BlueBand template) and when I add the scriptmanager tag to the master page, I get an "Unexpected Error", and that's all the information I get.

    Any suggestions or ideas??

    Thanks in advance.

    ReplyDelete
  17. Continuing last message (MOSS logs):
    05/21/2009 17:32:39.21 w3wp.exe (0x104C) 0x11E8 CMS Publishing 8tvo Unexpected Unable to retrieve TopNavigationBar SPNavigationNodeCollection from Web at: /Pages/Default.aspx. The SPNavigation store is likely corrupt.
    Failed to look up string with key "XomlUrl", keyfile core.
    Localized resource for token 'XomlUrl' could not be found for file with path: "C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\12\Template\Features\Fields\fieldswss.xml".
    Failed to look up string with key "RulesUrl", keyfile core.
    Localized resource for token 'RulesUrl' could not be found for file with path: "C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\12\Template\Features\Fields\fieldswss.xml".
    Failed to look up string with key "DistributionLists_Alias", keyfile core.
    Localized resource for token 'DistributionLists_Alias' could not be found for file with path: "C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\12\Template\xml\base.xml".

    ReplyDelete
  18. This post seems heaven sent! I have been using the Zone Tabs web part on our intranet homepage. The couple of drawbacks, albeit liveable, were the page refresh and other web part content not displaying (minor detail). This ajaxification sounded like the perfect solution. I implemented as outlined about (Note: your javascript is missing the closing curly brace) and after a couple of hiccups it appeared to working, at first blush. We are using the Zone Tab web part to display different views of our master calendar. We are using PlanetWilson Calendar Colour Coder web part, as well, for its "Width Fix" functionality so our calendar will stay at a fixed width without having vertical and horizontal scrollbars. The problem arises when one of the tabs is clicked and now the PlanetWilson functionality no longer seems to be applied and the items in the calendar are displaying what appears to be two list column values concatenated (Title and a custom column called Event Category). Any ideas on where I may have gone wrong in my implementation of the Update Panel? If I can get this to work it will solve those other pesky refresh issues I mentioned earlier. Sorry this is so long, but I wanted you to have a complete picture of the issue. Thanks!

    ReplyDelete
  19. I have subscribed to your post so I should get any reply you post. Thanks!

    ReplyDelete
  20. Can you try onething, do not use the Blue Band master page on your Win 2k 8 MOSS 07 site.

    Instead try using a default master page, and then see whether you encounter this problem.

    If you do not encounter any problem with the default master page, then you may have to add some additional placeholders in your blue band master page.

    Please check and let me know...

    ReplyDelete
  21. while adding the following tag <asp:ScriptManager runat="server" ID="ScriptManager1" /> in master page i.e. default.master. I am getting error "The base type 'System.Web.UI.MasterPage' is not allowed for this page. The type is not registered as safe" . I am not able to understand the reason behind this error.Regards,Rahul

    ReplyDelete
  22. Nitipum SilawannaJune 27, 2009 at 12:38 AM

    I would be very happy, if I read this blog before, I was trying to doing some ajax with WOSS like this but I tried to update the asp.net but not the way your check the web.config...so now I got all the website with customized masterpage say "system.web.ui.masterpage is missing from safe control" some like that...Would you mind if I ask for your suggestion to this?
    Thank!!!

    ReplyDelete
  23. It seems to take 3-5 seconds to move between tabs. Is this normal or is there a way to speed up moving between the tabs?

    Thanks.

    ReplyDelete
  24. Hi Mehul.
    Can you please help me, i also received the same error message "The base type 'System.Web.UI.MasterPage' is not allowed for this page. The type is not registered as safe".

    ReplyDelete
  25. URGENT:: First of all, thanks for making our lives easier by making the Ajax version.
    I downloaded the source code for zonetabs webpart and was trying to modify it. It seems that the author hasn't included all the files.
    It misses the file where he has declared tool part control --> pixeldropdownlist.
    Since you have modified the code, you must have fixed this one. Can you please upload the full source code or email it to me! THanks in advance!

    ReplyDelete
  26. This walkthrough doesnt work anymore because unless you are using .net2.0 and ajax extensions 1.0. Newest versions are .net3.5 and ajax extensions 3.0... so you need a slightly different procedure.

    You might want to refer to this http://social.msdn.microsoft.com/Forums/en-US/sharepointdevelopment/thread/bbc74c1f-3f96-45f0-b87e-ff5bc30d8795

    ReplyDelete
  27. What's up Bhuva!

    I don't usually comment blogs but this tip was amazing. Hugs

    ReplyDelete
  28. Urgent, Thanks a lot for this great blog.
    I followed the entire installation steps and everything looked good till the end. The Zone Tabs webpart is not functioning correctly. When I click on any tab, it switches fine for the first time only, however if I try and click on another tab, it does nothing. Note: I am using a custom master page.
    Any hints, Thanks

    ReplyDelete
  29. Really great ideas. I like every example. Just might have to try these...
    more template

    ReplyDelete
  30. I'm also having the same problem as the one anonymous poster above. Clicking different tabs takes 5 seconds to refresh. I ran Fiddler on the page and the entire page contents is being sent on the response. How can only the Zone Tab data be transmitted on AJAX roundtrips?

    ReplyDelete
  31. please help me,
    my main page have many zonetab with updatepanel,
    if a zonetab is update (change the select item) , then other zonetab will follow it update,
    how to solve it, each zonetab need individual update.

    --
    can not set the ControlID:

    ControlID

    ReplyDelete
  32. {asp:UpdatePanel id="palAnn" runat="server" EnableViewState="false" ChildrenAsTriggers="false" UpdateMode="Conditional"}
    {Triggers}
    {asp:AsyncPostBackTrigger ControlID="xxxxxx" /}

    {/Triggers}

    ReplyDelete
  33. For those interested, I have taken the code and jQuery enabled it instead of using an AJAX postback. Seems to work pretty well and very fast! There is also some code in there to handle problems with a jCarousel control we're using, so you can strip that out if it isn't applicable in your situation.

    The code is up for download at http://cid-e79f8e4b07c3e30f.skydrive.live.com/self.aspx/SharePoint%20Web%20Parts/EasyTabs^_jQuery.zip

    ReplyDelete
  34. Hi,
    I am getting error "The base type 'System.Web.UI.MasterPage' is not allowed for this page. The type is not registered as safe".
    SOLUTION:Open up your web.config and add the following line to the "SafeControls" section.:


    I don't know why "stsadm -o addajax" and "stsadm -o addajax35" remove it! I went back to add the line..perfect! It's works for me!!

    ReplyDelete
  35. Hello, I am new in sharpoint and I got confused with your code, could you please tell me exactly how I can use your oode in sharepoint,
    I created web parts and set the web config file and from the sharepoint administrator website , I created a web application and a site , there I want to add this zone tab and inside it add my web part, I know how to add webpart to sharepoint, but I cannot understand how to add your code to sharepoint, I have sharepoint 2007 sp2 and .net 3.5 and sql 2008 and win 2008 server thank you

    ReplyDelete
  36. DO you have instructions for SharePoint 2010?
    It is by nature AJAX configured.

    ReplyDelete
  37. The Tab webpart is for SP 2010

    ReplyDelete
  38. A special thanks for this informative post. I definitely learned new stuff here I wasn't aware of !

    ReplyDelete

  39. We need to place the Update Panel just above the webpart zone.Web design

    ReplyDelete