Create Ribbon Custom Action Using JavaScript Object Model In SharePoint 2016 And Office 365

Custom user actions are the commands, which are available for the 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 custom actions. In many scenarios, we might want to add custom business functionality as a custom user action for ease of access. In this article, we will see, how to add a custom user action to the Ribbon menu.

list

We will try to add an extra custom action to the above ribbon menu, using Javascript object model.

Internal Implementation

Let’s see, how we can do the same programmatically, using JSOM.

  • 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 Document ready, function call SP.SOD.executeFunc, so as to load the on demand script SP.js . Call the main starting point function say: AddCustomUserAction.
    1. SP.SOD.executeFunc('sp.js''SP.ClientContext', AddCustomUserAction);  
  • Instantiate the client context and list the instance.
    1. //Get the client context and list object  
    2. var context = new SP.ClientContext.get_current();  
    3. var list = context.get_web().get_lists().getByTitle("Check List");  
  • Create a custom user action and add it to the custom user action collection.
    1. //Get the custom user action collection and add the user action  
    2. var customUserAction = list.get_userCustomActions().add();  
  • Set the location attribute for the user action and define the commandUI attribute, which will define the properties of the custom action.
    1. //Set the location of the user action  
    2. customUserAction.set_location('CommandUI.Ribbon.ListView');  
    3.   
    4. //Add the properties for the custom action  
    5. var userActionExtension = '<CommandUIExtension xmlns="http://schemas.microsoft.com/sharepoint/">' +  
    6. '<CommandUIDefinitions>' +  
    7. '<CommandUIDefinition Location="Ribbon.List.CustomizeList.Controls._children">'+  
    8. '<Button Id="Ribbon.Documents.New.RibbonTest" '+  
    9. 'Command="Notify" '+  
    10. 'Sequence="0" ''Image16by16="/_layouts/images/NoteBoard_16x16.png" ''Image32by32="/_layouts/images/NoteBoard_32x32.png" '+  
    11. 'Description="Shows the ID of the current list." '+  
    12. 'LabelText="Show List ID" '+  
    13. 'TemplateAlias="o1"/>' +  
    14. '</CommandUIDefinition>'+  
    15. '</CommandUIDefinitions>'+  
    16. '<CommandUIHandlers>'+  
    17. '<CommandUIHandler Command="Notify" ''CommandAction="javascript:SP.UI.Notify.addNotification(\'ListId={ListId}\');" />'+  
    18. '</CommandUIHandlers>'+  
    19. '</CommandUIExtension>';  
  • Assign commandUIExtension to the custom user action and update the user action.
    1. customUserAction.set_commandUIExtension(userActionExtension)  
    2. customUserAction.update();
  • Load the client context and execute the batch.
    1. context.load(list,'UserCustomActions');  

Output

Console result is given below:

Console Result:

Full Code: The full code for adding the custom user action to the ribbon 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.executeOrDelayUntilScriptLoaded(AddCustomUserAction, "sp.js");  
  5.     });  
  6.     var oListItem;  
  7.   
  8.     function AddCustomUserAction() {  
  9.         //Get the client context and list object  
  10.         var context = new SP.ClientContext.get_current();  
  11.         var list = context.get_web().get_lists().getByTitle("Check List");  
  12.         //Get the custom user action collection and add the user action  
  13.         var customUserAction = list.get_userCustomActions().add();  
  14.         //Set the location of the user action  
  15.         customUserAction.set_location('CommandUI.Ribbon.ListView');  
  16.         //Add the properties for the custom action  
  17.         var userActionExtension = '<CommandUIExtension xmlns="http://schemas.microsoft.com/sharepoint/">' + '<CommandUIDefinitions>' + '<CommandUIDefinition Location="Ribbon.List.CustomizeList.Controls._children">' + '<Button Id="Ribbon.Documents.New.RibbonTest" ' + 'Command="Notify" ' + 'Sequence="0" ' + 'Image16by16="/_layouts/images/NoteBoard_16x16.png" ' + 'Image32by32="/_layouts/images/NoteBoard_32x32.png" ' + 'Description="Shows the ID of the current list." ' + 'LabelText="Show List ID" ' + 'TemplateAlias="o1"/>' + '</CommandUIDefinition>' + '</CommandUIDefinitions>' + '<CommandUIHandlers>' + '<CommandUIHandler Command="Notify" ' + 'CommandAction="javascript:SP.UI.Notify.addNotification(\'ListId={ListId}\');" />' + '</CommandUIHandlers>' + '</CommandUIExtension>';  
  18.         //Add the command UI extension and update the custom user action  
  19.         customUserAction.set_commandUIExtension(userActionExtension)  
  20.         customUserAction.update();  
  21.         //Load the client context and execute the batch  
  22.         context.load(list, 'UserCustomActions');  
  23.         context.executeQueryAsync(function() {  
  24.             console.log("Custom User Action added successfully to ribbon.");  
  25.         }, function(sender, args) {  
  26.             console.log(args.get_message());  
  27.         });  
  28.     }  
  29. </script>  
Let’s see, how we can implement it in SharePoint. Save the scripts, shown above to a text file and upload it to Site Assets library.

SharePoint Implementation

 

  • Go to the edit settings of SharePoint page and click Web part from the Insert tab.

    Web part

  • Add Content Editor Web part.

    Content Editor

  • Click Edit Web art from Content Edit Web part. Assign the URL of the script text file and click Apply.

    Content Editor

Going back to the list, we can see that the custom action has come up in the Ribbon, as shown below:

ribbon

Click the custom action.

custom action

It shows the list Id, which is what the custom action was defined for?

Summary

Thus, we successfully created and added the custom action to the ribbon, using JavaScript Object Model. This has been tried and tested in both SharePoint 2016 and Office 365.

Up Next
    Ebook Download
    View all
    Learn
    View all