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.

menu

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

Output: Success message has come up in the console.

Output

Going to the ECB menu of an item, we can see the new custom action added.

Output

Full Code: The full code for adding the ECB Custom action is shown below:

  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. var oListItem;
  8. function AddCustomUserActionToECB() {
  9. //Get the client context,web and list object
  10. var clientContext = new SP.ClientContext();
  11. var oWeb = clientContext.get_web();
  12. var oList = oWeb.get_lists().getByTitle('Test List');
  13. var userCustomActionColl = oList.get_userCustomActions();
  14. var oUserCustomAction = userCustomActionColl.add();
  15. oUserCustomAction.set_location('EditControlBlock');
  16. oUserCustomAction.set_sequence(100);
  17. oUserCustomAction.set_title("Go to Landing Page");
  18. oUserCustomAction.set_url("/sites/playground/sitepages/UserCustomActionLandingPage.aspx?ListId={ListId}&ItemId= {
  19. ItemId
  20. } & amp; ItemUrl = {
  21. ItemUrl
  22. }
  23. ");
  24. oUserCustomAction.update(); clientContext.load(userCustomActionColl); clientContext.executeQueryAsync(QuerySuccess, QueryFailure);
  25. }
  27. function QuerySuccess() {
  28. console.log("Custom Action added to ECB menu.");
  29. }
  31. function QueryFailure() {
  32. console.log('Request failed - ' + args.get_message());
  33. }
  34. </script>
Let’s see, how we can implement it in SharePoint. Save the script as a text file and upload it to the site assets library.

SharePoint Implementation

Thus, the new custom action has come up in the edit control block.

Output

Clicking the custom action will now navigate to the landing page and transfer the current items property as a query string to the landing page.

page

Summary

Thus, we have seen how to add a custom action to edit the control block of an item. This has been tested in both Office 365 and SharePoint 2016.