Choose Skin

Adding Custom Menu Item in Context menu or ECB menu using Javascript in sharepoint



Manish Kumar
Computer

In Sharepoint List and Libraries, Context menu or ECB(edit,control or block) are provided just because to perform some action on particular list item. By default ECB menu contains few options such as "View Item","Workflows","Delete Item" etc.

   profile picture

There are various ways by which we can add our own custom actions menu to provide extra functionality to our sharepoint site. Some of the  ways are:

  •  Custom ECB menu can be added by the help of SharePoint Designer, In sharepoint Designer open the List and add Custom actions.
  •  We can Add Custom ECB menu by the help of Visual Studio by creating Elements.xml file and writing our functionalities to that file.
  • The another option is by creating Javascript file to add Custom ECB menu and add it to the List or Library.

The javascript code to create custom ECB menu is: 


<script type="text/javascript">
function Custom_AddListMenuItems(m, ctx)
 
{
    //Menu Name which you want to display
    var strDispText = "My Action";
    var itemId = GetAttributeFromItemTable(itemTable, "ItemId", "Id");
    var listId = ctx.listName;
    // Here You can write Your custom action based on your needs
    var strAction = "<<JavaScript Code>>";
    var strImagePath = "";
    
    // Add our new menu item
    CAMOpt(m, strDisplayText, strAction, strImagePath);
    CAMSep(m);
    
    return false;
    
}

</script>


 

Here, I am Creating a Custom menu Item in ECB Menu using Javascript and also going to create some CAML queries to provide some extra functionalities to the custom ECB menu.


<script src="/SiteAssets/Scripts/jquery.js" type="text/javascript"></script>
<script src="/SiteAssets/Scripts/jquery.SPServices-0.7.2.min.js" type="text/javascript">
</script><script src="/SiteAssets/Scripts/date.js" type="text/javascript"></script>

<script type="text/javascript">

var ItemNoNew = null;
var ItemNo = null ;
var IName = null;

    // ECB menu for lists
    function Custom_AddListMenuItems(m, ctx) {
        var thisItemTable = $(itemTable);
        thisItemProp = { id: thisItemTable.attr('id'), ctx: thisItemTable.attr('CTXName') }

        var strViewProperties = "CreateModelBoxTrialNoNew('DocumentSignature/Forms/DispForm.aspx','View Properties')";
        var strViewItem = "CreateModelBox('DocumentSignature','View Document')";
        var strImagePath = L_Menu_BaseUrl + "/_layouts/images/actionseditpage.GIF";
        var strMainMenuImg = L_Menu_BaseUrl + "/_layouts/images/actionseditpage.GIF";
       
        // Adding commands to a submenu
        var method = "GetListItems";
        var list = "Approvers";
        var query = "<Query><Where><Eq><FieldRef Name='ID'/><Value Type='Number'>" + thisItemProp.id + "</Value></Eq></Where></Query>";
        $().SPServices({
            operation: method,
            async: false,
            listName: list,
            CAMLQuery: query,
            webURL: "/",
            completefunc: function (xData, Status) {

            debugger;     $(xData.responseXML).SPFilterNode("z:row").each(function () {
             
             ItemNoNew = ($(this).attr("ows_DocID"));
             ItemNo = parseInt(ItemNoNew);
             
             debugger;
             
            //Here View Document is the menu name that should be displayed
             CAMOpt(m, 'View Document', strViewItem, strImagePath);
             CAMSep(m);    
             
 
            //Here View Properties is the menu name that should be displayed
            CAMOpt(m, 'View Properties', strViewProperties, strImagePath);
            CAMSep(m);
            
                });
                return false;
            }
        });
        
        var method = "GetListItems";
        var list = "Document Library";
        var query = "<Query><Where><Eq><FieldRef Name='ID'/><Value Type='Number'>" + ItemNo + "</Value></Eq></Where></Query>";
        $().SPServices({
            operation: method,
            async: false,
            listName: list,
            CAMLQuery: query,
            webURL: "/",
            completefunc: function (xData, Status) {

            debugger;   $(xData.responseXML).SPFilterNode("z:row").each(function () {
          
              IName = ($(this).attr("ows_LinkFilename"));
             debugger;
             
             });
                return false;
            }
        });

        return false;
    }

    //creating Javascript functions for performing the action
    function CreateModelBoxTrialNoNew(strurl, strTitle) {

        var thisCTX = eval(thisItemProp.ctx);
        var inDialog = (thisCTX.NavigateForFormsPages === false) ? true : false;
        var URL = L_Menu_BaseUrl + "/" + strurl + "?ID="+ItemNo;
        if (inDialog) {
            SP.UI.ModalDialog.showModalDialog({ dialogReturnValueCallback: customDialogCallback, url: URL, title: strTitle })
        } else {
            location.href = URL + "&view=" + thisCTX.view + "&source=" + GetSource();
        }
    }
    
    
    //creating Javascript functions for performing the action
     function CreateModelBox(strurl, strTitle) {
        var thisCTX = eval(thisItemProp.ctx);
        var inDialog = (thisCTX.NavigateForFormsPages === false) ? true : false;
        var URL = L_Menu_BaseUrl + "/" + strurl + "/"+IName;
        if (inDialog) {
            SP.UI.ModalDialog.showModalDialog({ dialogReturnValueCallback: customDialogCallback, url: URL, title: strTitle })
        } else {
            location.href = URL + "&view=" + thisCTX.view + "&source=" + GetSource();
        }
    }

</script>


1. Save this javascript File and Upload it to Site Assets in your sharepoint site.
2. Copy the url of the uploaded file location.
3. Now, Edit the page on which your list or Library Exist.
4. Add a Content Editor web part and go to "Edit Web Part" and paste the copied url into Content Link.

    profile picture
5. Refrest the page, and Check for the ECB menu..

                  profile picture