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