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



Published: 2 November 2017

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. 

What are we going to do ?

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

After the application of the JSOM code, we will have an extra custom action in the ribbon as shown below that will show the list id when clicked.This has been tested in both SharePoint 2016 and Office 365.

How to do it ?

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

JSOM Full Code

The complete code used for the demo is given below :

Apply the JSOM to SharePoint

The above code will be saved as a txt file and can be uploaded to the site assets library of SharePoint. Append “?toolpaneview=2” at the end of the List View URL to go to the edit mode of the page. Add a Content Editor Webpart and refer the uploaded text file.

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

On Clicking the new custom action in the ribbon, we can see it in action.The custom action gives is the ID of the current list. Similarly we can add other custom business logic which will be executed upon clicking this custom action. 

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. 



Join 7,000 subscribers and receive instant access to

Devendra's Library of Resources for SharePoint Developers


About Author

Priyaranjan is a SharePoint Consultant with 7+ years experience in developing and deploying SharePoint Applications.He has worked on various SharePoint iterations starting from MOSS 2007 through SharePoint 2016 and Office 365. He is a frequent contributor at Microsoft TechNet and has won 33 Gold Medals in various TechNet Wiki Guru Monthly Competitions.As a token of appreciation for the TechNet community activities, he was interviewed by Microsoft Program Manager,Ed Price. He has also published 300 Articles and 4 SharePoint Ebooks in different technical communities.You can find his Microsoft TechNet contributions here