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.
  

  <script language="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
  <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.
  

  SP.SOD.executeFunc('sp.js', 'SP.ClientContext', AddCustomUserActionToECB);

• Instantiate the client context, Web and Master Page Library instance.
  

  //Get the client context,web and list object
  var clientContext = new SP.ClientContext();
  var oWeb = clientContext.get_web();
  var oList = oWeb.get_lists().getByTitle('Test List');

• Create a custom user action and add it to the custom user action collection.
  

   var userCustomActionColl = oList.get_userCustomActions();
   var oUserCustomAction = userCustomActionColl.add();
   oUserCustomAction.set_location('EditControlBlock');
   oUserCustomAction.set_sequence(100);
   oUserCustomAction.set_title("Go to Landing Page");
   oUserCustomAction.set_url("/sites/playground/sitepages/UserCustomActionLandingPage.aspx?ListId={ListId}&ItemId=
  {ItemId}&ItemUrl={ItemUrl}");
   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.
  

  clientContext.load(userCustomActionColl);
  clientContext.executeQueryAsync(QuerySuccess, QueryFailure);

Output: Success message has come up in the console.

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



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

<script language="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
    $(document).ready(function() {
        SP.SOD.executeFunc('sp.js', 'SP.ClientContext', AddCustomUserActionToECB);
    });
    var oListItem;

    function AddCustomUserActionToECB() {
        //Get the client context,web and list object
        var clientContext = new SP.ClientContext();
        var oWeb = clientContext.get_web();
        var oList = oWeb.get_lists().getByTitle('Test List');
        var userCustomActionColl = oList.get_userCustomActions();
        var oUserCustomAction = userCustomActionColl.add();
        oUserCustomAction.set_location('EditControlBlock');
        oUserCustomAction.set_sequence(100);
        oUserCustomAction.set_title("Go to Landing Page");
        oUserCustomAction.set_url("/sites/playground/sitepages/UserCustomActionLandingPage.aspx?ListId={ListId}&ItemId= {
                ItemId
            } & amp; ItemUrl = {
                ItemUrl
            }
            ");
            oUserCustomAction.update(); clientContext.load(userCustomActionColl); clientContext.executeQueryAsync(QuerySuccess, QueryFailure);
        }

        function QuerySuccess() {
            console.log("Custom Action added to ECB menu.");
        }

        function QueryFailure() {
            console.log('Request failed - ' + args.get_message());
        }
</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

• Go to the edit settings of the SharePoint page and click Web part from the Insert tab.
  
  
  
  
• Add Content Editor Web part.
  
  
  
  
• Click Edit Web art from Content Edit Web part. Assign the URL of the script text file and click Apply.
  
  
  

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



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.



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.