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.



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');
  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:



Full Code: The full code for adding the custom user action to the ribbon is shown below:

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.
  
  
  
  
• 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.
  
  
  

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



Click the 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.