How to Customize sharePoint ECM Menu

Customizing SharePoint ECB Menu using JavaScript.

What is ECB menu?

ECB stands for Edit Control Block, These are the context menu used with all the items in lists or library.

How to customize ECB menu?

SharePoint provides a build in JavaScript file core.js in (C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033) location, which has two functions for ECB AddListMenuItems and AddDocLibMenuItems. These methods are executed by SharePoint to display context menu. We can directly modify these methods and add our own custom menu but direct modification in core.js is a not a good practice.

If we look these methods from core.js, the first line is

if (typeof(Custom_AddListMenuItems) !="undefined")
{
    if (Custom_AddListMenuItems(m, ctx))
        return;
}

Means if Custom_AddListMenuItems method is avialble then call. Out of box there is no function name

Custom_AddListMenuItems. Thus we can write our code like

function Custom_AddListMenuItems(m, ctx) {
    CAMOpt(m, "Test Menu", "alert('Hello World!');", "/_layouts/images/alert.GIF");
    CAMSep(m);
}

CAMOpt function creates a new menu item. The parameters of CAMOpt function are

Reference to an ECB, passed by the caller of Custom_AddListMenuItems from core.js

1. Text to display
2. Javascript function to execute
3. URL of an icon for the menu item
4. HTML alt attribute value of the icon
5. HTML description attribute value of the icon

CAMSep function renders a separator.