Sunday, December 15, 2013

SharePoint 2013 - 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 classic webpart and add the following code in the CreateChildControls() event. Deploy the webpart.

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.

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

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 2013 Developer Reference, by Paolo Pialorsi - Book

1 comment:

Note: Only a member of this blog may post a comment.