Create SharePoint Custom User Action In Site Actions Menu Using JavaScript Object Model

Custom user actions are commands that are available for user access at different locations within SharePoint. These custom actions can come up in any location within SharePoint, like ribbon view, site settings page, ECB menu etc. It can be an icon/text that implements a functionality, such as navigating to a landing page, starting of a workflow on an item, and so on . All the icons that come up in the List View ribbon are 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 Site Actions Gear menu. The site actions menu houses the default custom action, like Add an app, Site contents, Design Manager etc.


Image: SharePoint 2016 Site Actions

In addition to these, we will add a new custom user action in the Site Actions menu. It will act as a redirection shortcut to Advanced Search Settings page.

Internal Implementation

Let’s see how we can do the same programmatically using JavaScript object model,

• Add 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 client context, web, and list instance.
  
  1. //Get the client context and web object
  2. var clientContext = new SP.ClientContext();
  3. var oWeb = clientContext.get_web();
• Create a custom user action and add it to the custom user action collection.
  
  1. //Get the custom user action collection and add the new custom action to it
  2. var collUserCustomAction = oWeb.get_userCustomActions();
  3. var oUserCustomAction = collUserCustomAction.add();
• Assign the properties for the custom action.
  
  1. //Specify the location and properties for the new custom action
  2. oUserCustomAction.set_location('Microsoft.SharePoint.StandardMenu');
  3. oUserCustomAction.set_sequence(101);
  4. oUserCustomAction.set_group('SiteActions');
  5. oUserCustomAction.set_title("Search Settings");
  6. oUserCustomAction.set_url("/sites/Playground/_layouts/15/enhancedSearch.aspx?level=sitecol");
  7. oUserCustomAction.update();

Line number 2 specified the SharePoint location where the custom action should come up. Here, it is the Site Actions menu. The line number 6 assigns the URL for the custom action. It redirects itself to the enhanced search page. Thus, we are creating a shortcut for advanced search page in the Site Settings menu.