Delaying the Display of SharePoint’s ECB Menu

A viewer of my Pluralsight course Developing SharePoint 2013 Solutions with JavaScript, part 3 posed a question about working with the ECB (Edit Control Block) available in SharePoint and Office 365.  In their situation, they needed to delay the showing of the ECB menu while they called back to the server to do some checking and they weren’t sure how to do it.

Before getting to the code sample, a quick word of caution – realize that this could present potential performance problems depending on how quickly the call makes it’s roundtrip to the server and back.  In any case, this would be a situation in which you would want to trim the response down to the bare minimum necessary – don’t pull down extra fields that you don’t need or else your users are likely to notice the impact and not be too thrilled with it.

With that said, here is a quick code sample that that will delay the presentation of the ECB for 5 seconds.  Normally, you would not simply add the delay, but instead replace it with whatever calls you need to make.  All this code is doing is:

  1. storing the current function that displays the ECB in a new variable
  2. overwriting the function that display the ECB with our own function to store some information we need later
  3. calling the code to do whatever you need it to do (make a call back to the server, etc) , in the example, simply delaying for 5 seconds
  4. Using the stored function from #1 to call the ECB display and pass in the information stored in #3
//store the function before overwriting it
ecbFunc = ShowECBMenuForTr;
ShowECBMenuForTr = function(t,e){
    ecbTarget = t;
    ecbEvent = e;
    //now do whatever you need.  In this case, I'm just delaying 5 seconds
    setTimeout(function(){
        // call the function we stored above and pass in variables
        ecbFunc(ecbTarget, ecbEvent);
    }, 5000);
};

And that’s it.  When a user clicks on the ellipsis to show the ECB on any page where this code is loaded will now run our custom ShowECBMenuForTr function (because monkey patching, which I cover in the Pluralsight courses).

A few final points:

  1. I’m using global variables here, which isn’t recommended for production code.  I discuss namespacing in the Pluralsight courses to avoid this
  2. The out-of-the-box function ShowECBMenuForTr is what shows the ECB and it *is* in the global namespace, so you don’t want to hide that inside your own custom namespace.
  3. This code should go into your own code file, *not* one of the out-of-the-box JavaScript files provided by SharePoint

Dave

One thought on “Delaying the Display of SharePoint’s ECB Menu

Comments are closed.