Create Custom Action In ECB Menu For SharePoint Using Javascript Object Model

Custom user actions are the commands which are available for user access at different locations within SharePoint.These custom actions can come up at any location within SharePoint like ribbon view, site settings page, ECB menu etc. It can be an icon/text, which implements a functionality such as navigating to a landing page, starting a Workflow on an item and so on. All the icons which come up in the list view ribbon are the examples of the custom actions. In many scenarios, we might want to add the custom business functionality as a custom user action for the ease of access. In this article, we will see how to add a custom user action to the edit the control block menu. The ECB menu houses the default custom action like edit, delete and view item options.



We will try to add an extra custom action to the above fly out menu, using JavSscript object model.

Let’s see, how we can do the same programmatically, using JavaScript object model.

Internal Implementation

• Add the reference to jQuery file.
  
  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">
• Within the document, call ready function SP.SOD.executeFunc, in order to load the on demand script SP.js . Call the main starting point function say: AddCustomUserActionToECB.
  
  1. SP.SOD.executeFunc('sp.js', 'SP.ClientContext', AddCustomUserActionToECB);
• Instantiate the client context, Web and Master Page Library instance.
  
  1. //Get the client context,web and list object
  2. var clientContext = new SP.ClientContext();
  3. var oWeb = clientContext.get_web();
  4. var oList = oWeb.get_lists().getByTitle('Test List');
• Create a custom user action and add it to the custom user action collection.
  
  1. var userCustomActionColl = oList.get_userCustomActions();
  2. var oUserCustomAction = userCustomActionColl.add();
  3. oUserCustomAction.set_location('EditControlBlock');
  4. oUserCustomAction.set_sequence(100);
  5. oUserCustomAction.set_title("Go to Landing Page");
  6. oUserCustomAction.set_url("/sites/playground/sitepages/UserCustomActionLandingPage.aspx?ListId={ListId}&ItemId=
  7. {ItemId}&ItemUrl={ItemUrl}");
  8. oUserCustomAction.update();
  The line number 6 plays a major part in assigning the functionality to the custom action. It transfers the current item’s ID, list ID and the item URL to the new landing page.
  
  
• Load the client context and execute the batch once again.
  
  1. clientContext.load(userCustomActionColl);
  2. clientContext.executeQueryAsync(QuerySuccess, QueryFailure);