Creating A Custom Edit Control Block Part 1

What is an Edit Control Block?
(And why would I want a custom one?)

The image below is an example of an Edit Control Block or ECB as it is normally called:

This is the ECB of a tasks list. There are many things that can be said based on just this. The user has edit and delete permissions on this item, and can even manage the items permissions. You will find that out of the box, the ECB is different depending on the type of list or library you are viewing and the permissions of the user. The cool thing here though, is that you can completly customize this depending on your needs. There are a few methods that you can use to do this and I will outline them briefly.

1. javascript/jQuery - This is a must! You must write javascript code (ack the "c" word!). The functions that allow you to do this are not too difficult and we will go through them next. You can build a great custom ECB with just this method.
2. .Net (c#) code. (Please do not run away screaming in terror! It is not that bad!). Adding this to the mix means we can go from a great ECB to an outstanding one!

I would have added ajax to that list, but that is just the bridge that we will use to combine the two methods together. So without further ado, let me introduce you to the code that will get you going!

There are two functions contained in core.js that render the ECB for an item depending on what type it is.

• AddListMenuItems
• AddDocLibMenuItems

Both of these functions look for a “custom” version allowing you to write your own items into the ECB.

• Custom_AddListMenuItems
• Custom_AddDocLibMenuItems

The functions are javascript functions that support 3 core functions for creating menus:

• CAMOpt – This creates a menu item
• CASubM – This creates a submenu item
• CAMSep – This creates a separator

Combining these functions will allow you to create many different ECB options.

As you can see, you can do quite a bit with the ECB. Some things to remember:

JAVASCRIPT IS YOUR FRIEND!

The functions are all working with the javascript provided by the core.js file and the list view. This means you have access to:

• The id of the item you are on.(currentItemID)
• The list of the item you are on.(ctx.listName)

Javascript can then be used to make changes to items or get more information from them by utilizing the SharePoint web services.

JAVASCRIPT IS YOUR ENEMY!

Because the ECB works with javascript there is an important fact that you must be aware of.
You must decide if you want to check for permissions!
There is no javascript solution for item-level security!
You can use the webservices to determine if a user is in a certain group but you can not check the item directly.
To directly check the item you must use custom .Net code in conjunction with the javascript code.

Here is an example:

function Custom_AddListMenuItems(m, ctx) {
CAMOpt(m, "Print Item...", "_printListItem('" + currentItemID + "')", "/_layouts/images/fax.gif");
     return false; 
}

This just adds a Print Item option to the dropdown and will run the _printListItem function when clicked! The return false line tells the calling function from the core.js file to render the rest of the ECB after your code. If you returned true, this would only draw your code!

As I stated earlier, you will only have so much control at the javascript level. You can use .net code to do more, but I will save that for a future post.

Stay Tuned!
 Some time ago I wrote a part 1 post for what I thought would be a several part series on creating a custom ECB. However, I got sidetracked and have decided that it was time to revisit it again. With that said, I will be copying some items from the old post into this one.

    In some ways, you might call me a lazy user when it comes to having to click through multiple forms or pages to perform certain actions. In other ways, you just might say that I did this because it is cool and makes things easier to the end user. I prefer you say the latter, but I will leave that up to you! I say we get to what we are here to discuss!