Second Life of a Hungarian SharePoint Geek

July 25, 2011

Manipulating ECB menu items using jQuery

Filed under: Custom actions, jQuery, SP 2010 — Tags: , , — Peter Holpar @ 22:51

 

In my recent post I showed you how to remove ECB menus based on list properties using the client object model and jQuery.

Removing is not your only option to alter the ECB menu, you can modify the Title, ImageUrl and other properties as well using the same technique.

The ECB menu items are rendered into the page as hierarchical DIV tags. The top level, hidden DIV tag with id=ECBItems (or ECBItems_{list GUID}) is the root of the ECB menu items. It contains a single DIV item for each of the ECB items, each of them is a set of DIV tags for the item properties.

The content of the property DIVs are pretty straightforward, but in case you have doubts you can check the source of the rendering method at the

internal static string RenderECBItemsAsHtml(SPWeb web, SPList list);

method of the internal Microsoft.SharePoint.SPCustomActionElement class.

This method iterates through all of the ECB custom actions returned by SPElementProvider.GetAvailableProvider().QueryForECBItems(web, list), and builds up the DIV hierarchy.

If you have a look at the gotList method in CustomAction.js in the previous post, you can replace the core of the content manipulation to fit to your needs.

This is the original version that removes the entire DIV section for the given ECB item:

jQuery(this).find(‘div div:first-child:econtains("Publish")’).parent().remove();

The following examples show you how to achieve different modification goals. Of course, you are not limited to alter only a single property, you can combine them if you wish.

Title attribute (CustomAction node):

Example for modification:
jQuery(this).find(‘div div:first-child:econtains("Publish")’).text("Publish later");

ImageUrl attribute (CustomAction node)

Example for modification:
jQuery(this).find(‘div div:first-child:econtains("Publish")’).parent().find(‘div:eq(1)’).text("/_layouts/images/icon.png");

Url attribute (UrlAction node):

Example for modification:
jQuery(this).find(‘div div:first-child:econtains("Publish")’).parent().find(‘div:eq(2)’).text("javascript:alert(‘Item ‘ {ItemId} + ‘ in list {ListId} is processed’)");

Next two DIVs are computed based on the user rights, converting the long value to a hexadecimal pattern and are not so trivial to manipulate, but probably one does not need to do that frequently.

The following values can be manipulated the very same way as the above ones, so I only include the selector here.

RegistrationType attribute:

jQuery selector: div:eq(5)

RegistrationId attribute:

jQuery selector: div:eq(6)

Sequence attribute:

jQuery selector: div:eq(7)

One option not discussed in this post is to add your own ECB DIV items on the fly into the root ECBItems node. This way you can achieve really dynamic behavior not available using the declarative description of custom actions. For example, you inject a script using a ScriptLink custom action, check the list properties you wish through the client object model and if the properties require, add the DIV tag dynamically. Alternatively, you can simply add a Content Editor Web Part to the page containing the target list, add the JavaScript functionality to the CEWP and inject the DIV tag with or without any list property check.

Advertisements

Leave a Comment »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a free website or blog at WordPress.com.

%d bloggers like this: