Custom Action Menu In SharePoint ListItem

ECB Menu For SharePoint or Custom action menu is available for user access at different locations in SharePoint. It can be an icon/text, which can be used to implement functionality such as navigating to a landing page, starting a Workflow on an item or any custom action inside SharePoint.
 
By default SharePoint provides the default custom action like edit, delete and view item options.
 
Here we will be adding new ECB Menu as "Custom Edit Page" as shown in the below image. 
SharePoint
On click of the Cusom Edit Link, it will be redirected to my custom edit page which I have created under list form.
 
Also, I am passing the ID of current list item as well as Source page URL from where it will be redirected back after performing action on redirected edit page. 
 
Implementaion
 
It can be implemented with any list/library, however I have implemented it on list.
 
You can use any ScriptEditor/CEWP on your page and put all below scripts as is by just changing the list name and URL.
 
Full Script
  1. <script language="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>  
  2. <script language="javascript" type="text/javascript">  
  3.     $(document).ready(function() {  
  4.         SP.SOD.executeFunc('sp.js''SP.ClientContext', AddCustomUserActionToECB);  
  5.     });  
  6.   
  7.     function AddCustomUserActionToECB() {  
  8.         var clientContext = new SP.ClientContext();  
  9.         var oWeb = clientContext.get_web();  
  10.         var oList = oWeb.get_lists().getByTitle('ComplainTracking');  
  11.         var userCustomActionColl = oList.get_userCustomActions();  
  12.         clientContext.load(oList, 'UserCustomActions''Title');  
  13.         clientContext.executeQueryAsync(function() {  
  14.             var customActionEnumerator = userCustomActionColl.getEnumerator();  
  15.             var foundAction = 0;  
  16.             while (customActionEnumerator.moveNext()) {  
  17.                 var oUserCustomAction = customActionEnumerator.get_current();  
  18.                 if (oUserCustomAction.get_title() == 'Custom Edit Page') {  
  19.                     //oUserCustomAction.deleteObject();   
  20.                     //clientContext.load(oUserCustomAction);  
  21.                     //clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceededdelete), Function.createDelegate(this, this.onQueryFailed));  
  22.                     foundAction = 1;  
  23.                     break;  
  24.                 }  
  25.             }  
  26.             if (foundAction == 0) {  
  27.                 var oUserCustomAction = userCustomActionColl.add();  
  28.                 oUserCustomAction.set_location('EditControlBlock');  
  29.                 oUserCustomAction.set_sequence(100);  
  30.                 oUserCustomAction.set_title("Custom Edit Page");  
  31.                 //oUserCustomAction.set_url("/sites/QA/SL_MI/SitePages/CustomSearch.aspx?ListId={ListId}&ItemId={ItemId}&ItemUrl={ItemUrl}");  
  32.                 oUserCustomAction.set_url("/sites/QA/SL_MI/Lists/ComplainTracking/Edit1.aspx?ID={ItemId}&Source=/sites/QA/SL_MI/SitePages/ListViewGrid.aspx");  
  33.                 oUserCustomAction.update();  
  34.                 clientContext.load(userCustomActionColl);  
  35.                 clientContext.executeQueryAsync();  
  36.             }  
  37.         }, function(sender, args) {  
  38.             console.log('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());  
  39.         });  
  40.     }  
  41. </script>  
X

Build smarter apps with Machine Learning, Bots, Cognitive Services - Start free.

Start Learning Now