Thursday, September 23, 2010

How to implement your own custom web part zone in SharePoint?

Scenario:How to implement your own custom web part zone in SharePoint?

Have you ever wondered whether it is possible to implement your own custom web part zone that gives you full ability to control how the web parts in a web part zone are added to a page?

By default, MOSS 2007 as well as SharePoint 2010 render the web parts in a table.
As most of us know, HTML tables are meant to be used for displaying tabulated data but not for controlling layout of a page. Tables were created to provide structure to data.

Even though SharePoint 2010 moved away from the table approach to the div approach, few areas remain untransitioned, the "Web Part Zone" being one of them.

Its often an painespecially for developers/designers to get the exact output to match that of the markup provided by a 3rd party company / designer (Yes it is quite often the case that SharePoint developers need to output HTML that need to match the markup provided by the client) and some times requires lot of effort to tweak their CSS/HTML Markup and also to ensure that the page out put is XHTML complaint especially in MOSS 2007.

Typical output from an OOB SharePoint Web Part Zone looks like the below:

As you can see in the above screenshot, SharePoint renders web parts in a table.

If you use the custom web part zone that I have also contributed in Codeplex (credits go to Tim Nugiel from MSNGN), you will be able to control the way the web parts added to a web part zone are added to a page.

As you can see in the above screen shot, the custom web part zone allows you to control the way the web parts are rendered on the page. The above screenshot demonstrates a web part zone with a Content Editor Web Part and a Page Viewer Web Part.

In this sample code, I have just added web parts one after the other.
You might want to add each web part in a new panel, apply css to them / seperate them with a <hr> / whatever you want to do

 If you want to be able to add user controls to the page, you will need a text field/column in the SharePoint Page that will be used to define the user controls to be added to this page.

If there are multiple user controls that are required to be added to the page, seperate them with a ";"
To use this web part zone in a page layout, register the control by adding te below line to the page layout
<%@ Register TagPrefix="Custom" TagName="WebPartZone" Src="~/_controltemplates/CustomWebPartZone/CustomWebPartZone.ascx" %>
Add the control to the page layout at the desired location
<div id="divCustomWPZone">
    <Custom:WebPartZone runat="server" id="zoneCustom" DisplayTitle="Custom Zone" LoadWebPartZone="true"/>
If you want be to able to load user controls as well, just use the FieldName="Name of the page field that contains the user control(s) to add to the page"

Download Source Code

Tuesday, September 21, 2010

Microsoft Security Advisory 2416728 (Vulnerability in ASP.NET) and SharePoint.

Microsoft recently released a Microsoft Security Advisory about a security vulnerability in ASP.NET.

This post explains the impact on SharePoint and documents a recommended workaround.
This vulnerability affects Microsoft SharePoint 2010 and Microsoft SharePoint Foundation 2010.  The vulnerability is in ASP.NET.

Microsoft recommends that all SharePoint 2010 customers apply the workaround as soon as possible.  This post will be updated with any new information.

The workaround for SharePoint 2010 is slightly different from the one documented in the advisory.
For SharePoint 2010, you should follow the instructions here on every web front-end in your SharePoint farm

Friday, September 17, 2010

Loading a SharePoint Web Part asynchronously

How to load a SharePoint Web Part asynchronously?

Web Parts that require long loading time might significantly slow down the overall page performance by increasing the page load time.

This is especially true with SharePoint search web parts, web parts that interact with third party web services, web parts that deal with large SharePoint lists, etc…

I have created "Asynchronous Web Part Framework" that enables web parts to load asynchronously.

To load pages asynchronously element by element facebook-style to speed up the first display of the page the first choice would probably not be UpdatePanel as it is meant for partial page updates as opposed to partial page loads. Web parts using Asynchronous Web Part Framework can in fact leverage the UpdatePanel for partial page updates as well.

Web Parts that utilize the Asynchronous Web Part Framework support all the features of SharePoint web parts such as editor web part, web part connections etc…

The Asynchronous Web Part Framework can be applied to existing web parts with very few code changes.
The same framework can also be used for developing web parts for use in Asp.Net applications. (With few file and path changes to replace the SharePoint layouts folder, etc...)

As soon as the page is loaded, the web part loads and displays a spinner icon.

Then the web part properties, web part connection information are sent to the web part web service asynchronously and the HTML mark is them loaded into the web part asynchronously.

What is required?

A web part that utilizes the Asynchronous Web Part framework should consist of the below components:
  •  A Web Part control class that serves as a wrapper for collecting properties, connections
  •  A Web Part UI control class that is responsible for rendering HTML for the web part

    • This control contains all the web part logic
  •  A Web Service that loads the web part UI control and renders its HTML back to the web part
  •  A JavaScript file that defines handlers for interaction between the web part and web service
How does it work?

  1. The web part control acts as a wrapper for collecting properties from either the web part properties pane or editor part and for connections with other web parts.
  2. When the web part loads first, the content container in the web part is loaded with a spinner and the JavaScript handler is registered with the page
  3. The JavaScript method then sends the web part properties and connection data to the web service
  4. The web service loads the web part UI control with the web part properties / connection details
  5. Web Part is then rendered as html
  6. If caching is required to be applied, the control HTML is stored in cache
  7. The result HTML is then loaded into the web part content container

This project contains working version of a basic web part that is loaded asynchronously.

This code also demonstrates how web part connections and editor part can be implemented with an asynchronous web part.

This code is created using Visual Studio 2010 and works with ASP.NET 3.0 or higher, MOSS 2007 and SharePoint 2010.

The AsyncWebPart.cs control which acts as the web part wrapper calls the JavaScript method "AsyncWebPartGetData" with all the web part parameters / connection data

The JavaScript method "AsyncWebPartGetData" calls the web service method "GetUIHtml" from web service "AsyncWebPartService" with all the parameters

The Web Service method "GetUIHtml" loads the "AsynWebPartUI" control which performs the actual core functionality of the web part.

This method renders the "AsyncWebPartUI" control as Html.

The AsyncWebPartUI control performs the actual core functionality of the web part.

Friday, September 10, 2010

SharePoint 2010 - Open PDF files in browser and set file association icon

Those who have experience with SharePoint 2010 may have noticed that pdf files in SharePoint 2010 do not open in browser by default. SharePoint 2010 throws a prompt to save the pdf file.

This is by behaviour in SharePoint 2010 and is very annoying especially when you have a requirement to show a pdf file in a Page Viewer Web Part, etc...

Luckily there is a workaround to fix this issue.

Open Central Admin > Application Management > Manage Web Applications.
Choose a web application and click "General Settings".

Scroll towards the bottom of the page until you find the section "Browser File Handling".
Change the option from "Strict" to "Permissive".

Go back to the document library and click on the pdf file. It should open in the browser. (Perform an IISRESET if required.)

You may also have noticed that the icons for pdf files do not show up by default in SharePoint 2010.

In order to fix it, we will need to set up document icon associations to inform SharePoint 2010 about the extension "pdf"

Navigate to 14 hive (“C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14”) and then to TEMPLATE\IMAGES. Upload the desired file icon (pdf in this case. You can use this icon for pdf)

Navigate to 14 hive, then to TEMPLATE\XML folder.
Locate the file "DOCICON.XML" and open it with a compatible editor.

Add the below line of text as required for the file extension (PDF mapping in this case):
<Mapping Key="pdf" Value="icpdf.png"/>

Perform an IISRESET and refresh the document library.
You should now see pdf icon next to the pdf documents.

 Hope that this post helps someone.