Tuesday, February 26, 2013

SharePoint 2010 - Custom web part verbs

Web part verbs
The web part verbs are the menus items (like Minimize, Close etc) which appears when we click the Edit option in web parts as shown in the figure below. The SharePoint web part framework exposes one of the property called WebPartVerbCollection. This is very flexible which allows us to add our own items (custom web part verbs) to the web part collection.

Types of web part verbs
Verbs are objects of type WebPartVerb and can be of three different kinds:
1) Server-side Verbs that require a POST-back to carry out their job; they work on the server side.
2) Client-side Verbs that simply use JavaScript syntax to do their job; they work on the client side.
3) Client and server-side Verbs that first execute some client-side JavaScript, and then can execute some server-side code, unless the client-side code cancels request.

Creating a custom web part verb
1) Create a new SharePoint 2010 Project and add a classic webpart named WPCustomVerbs. Modify the CreateChildControls() event as follows and deploy the webpart.
Code Snippet
  1. protected override void CreateChildControls()
  2. {
  3.  this.Controls.Add(new LiteralControl("<h1>Custom Webparts Verbs Demo</h1>"));
  4. }

2) Following content is displayed in the webpart. Note that only default verbs are included as highlight in the following figure.

3) Now lets add the custom verb. We have to override the read-only property Verbs provided by the base WebPart class. Modified the code in webpart file as highlighted below. We have added three verbs:
i) 'Server-side verb' which will only raise a server side post-back.
ii) 'Client-side verb' which will pop up a JavaScript alert.
iii) 'Client and Server-side verb' which will raise a JavaScript alert and then a server side post-back.

Code 
public override WebPartVerbCollection Verbs
{
get
{
  // Create a Server side verb        
  WebPartVerb serverSideVerb = new WebPartVerb("serverSiteVerbId", handleServerSideVerb);
  serverSideVerb.Text = "Server-side verb";

  // Create a Client side verb 
  WebPartVerb clientSideVerb = new WebPartVerb("clientSideVerbId","javascript:alert(‘Client-side Verb selected’);");
 clientSideVerb.Text = "Client-side verb";
 WebPartVerb clientAndServerSideVerb = new WebPartVerb("clientAndServerSideVerbId", handleServerSideVerb, "javascript:alert(‘Client-side Verb selected’);");

 // Create a Client and Server side verb
 clientAndServerSideVerb.Text = "Client and Server-side verb";
 WebPartVerbCollection newVerbs = new WebPartVerbCollection(new WebPartVerb[] {
 serverSideVerb, clientSideVerb, clientAndServerSideVerb,
 });
 return (new WebPartVerbCollection(base.Verbs, newVerbs));
 }
}
Following is the complete code for WPCustomVerbs.cs
Code Snippet
  1. namespace CustomVerbsDemo.WPCustomVerbs
  2. {
  3.     [ToolboxItemAttribute(false)]
  4.     public class WPCustomVerbs : WebPart
  5.     {
  6.         protected override void CreateChildControls()
  7.         {
  8.             this.Controls.Add(new LiteralControl("<h1>Custom Webparts Verbs Demo</h1>"));
  9.         }
  10.         public override WebPartVerbCollection Verbs
  11.         {
  12.             get
  13.             {
  14.                 // Create a Server side verb        
  15.                 WebPartVerb serverSideVerb = new WebPartVerb("serverSiteVerbId", handleServerSideVerb);
  16.                 serverSideVerb.Text = "Server-side verb";
  17.  
  18.                 // Create a Client side verb
  19.                 WebPartVerb clientSideVerb = new WebPartVerb("clientSideVerbId", "javascript:alert('Client-side Verb selected');");
  20.                 clientSideVerb.Text = "Client-side verb";
  21.                 WebPartVerb clientAndServerSideVerb = new WebPartVerb("clientAndServerSideVerbId", handleServerSideVerb, "javascript:alert('Client-side Verb selected');");
  22.  
  23.                 // Create a Client and Server side verb
  24.                 clientAndServerSideVerb.Text = "Client and Server-side verb";
  25.                 WebPartVerbCollection newVerbs = new WebPartVerbCollection(new WebPartVerb[] { serverSideVerb, clientSideVerb, clientAndServerSideVerb, });
  26.                 return (new WebPartVerbCollection(base.Verbs, newVerbs));
  27.             }
  28.         }
  29.  
  30.         protected void handleServerSideVerb(Object source, WebPartEventArgs args)
  31.         {
  32.             EnsureChildControls();
  33.         }
  34.     }
  35. }

4) Deploy the web part and click on the webpart menu. You will notice that all three custom verbs are now displayed in the menu.

5) Clicking on the 'Server-side verb' link will only raise a server side post-back.

6) Clicking on the 'Client-side verb' link will pop up a JavaScript alert.

7) Clicking on the 'Client and Server-side verb' link will pop up a JavaScript alert and then raise a server side post-back.

Note
1) Usually, custom Verbs are defined in Intranet/Extranet solutions, to provide support for custom functionalities, such as refreshing content, opening custom pop-up windows, and so forth. 
2) In general, they are not used in CMS/Publishing solutions, because the context menu is usually disabled in these. 

References
1) Microsoft SharePoint 2010 Developer Reference, by Paolo Pialorsi - Book

No comments:

Post a Comment