Adding a button on Ribbon Control of SharePoint site

In this post we shall go through code to add a button on the Sharepoint Ribbon Control. As many of you are aware, Microsoft has introduced ribbon control in Sharepoint 2010. Having introduced it, Microsoft also allows user to customize the ribbon control with activities like adding a button, a group, a tab etc.

So below is the code to add a button on ribbon control through code.

1.Event Receiver Code

Create a Sharepoint Feature and write the below code in the FeatureActivated event of Event Receive.


elevatedWeb.AllowUnsafeUpdates = true;
SPList list = elevatedWeb.Lists[“CustDocLib“];

//Creating Object for User CustomAction
SPUserCustomAction userCustomAction = list.UserCustomActions.Add();
userCustomAction.Title = “Execute Upload“;
userCustomAction.Name = “ExecuteUpload“;
userCustomAction.Location = “CommandUI.Ribbon“;
userCustomAction.CommandUIExtension = @”<CommandUIExtension><CommandUIDefinitions>
<CommandUIDefinition Location=’Ribbon.Documents.Manage.Controls._children’>
<Button Id=’Ribbon.Documents.Manage.Upload’ Sequence=’101′ TemplateAlias=’o1′
Command=’Ribbon.Documents.Manage.CustUpload.cmdCustUpload’ LabelText=’Cust Upload’ />
CommandAction=‘javascript:CustomCommandAction();’ />
userCustomAction.Sequence = 1001;

SPUserCustomAction scriptlink = elevatedSite.UserCustomActions.Add();
scriptlink.Location = “ScriptLink“;
scriptlink.ScriptSrc = “/_layouts/RibbonButton/CustUploadRibbonButtonScript.js“;


2. Java Script

As you can see above, it is calling a javascript method “enableCustUploadApproveButton()” to enable the newly added button.

You need to add a mapped folder for Layouts, and add a JScript file to accommodate your script.

The below script has functionality to enable button on selection of document


  function enableSFTPUploadApproveButton() {
var context = SP.ClientContext.get_current();
return SP.ListOperation.Selection.getSelectedItems(context).length >= 1;


The below script is called on click of the button which  we have added. You can customize it based on your requirements. In my case, I am opening an application page on click of button.


function CustomCommandAction() {

this.currentSiteUrl = ‘http://abcde:2222/sites/testSite&#8217;;
var context = SP.ClientContext.get_current(); // get client context
var web = context.get_web();
var selectedItems = SP.ListOperation.Selection.getSelectedItems(); // Get selected List items
var selectedListId = SP.ListOperation.Selection.getSelectedList();
if (CountDictionary(selectedItems) == 1 && web != null) {
var selectedList = context.get_web().get_lists().getById(selectedListId);
var listItm = selectedItems[0]; // this will only return ID of list item, to get list object server call has to be mad
this.listItem = selectedList.getItemById(;
context.load(this.listItem); // Load listitem in spcontext to fetch all properties of listitem
context.load(context.get_site()); // To fetch site properties

var options = SP.UI.$create_DialogOptions();
var appUrl;
appUrl = this.currentSiteUrl + “/_layouts/RibbonButton/UploadFile.aspx?title=” +

options.url = appUrl;
options.height = 600;
options.width = 800;
options.dialogReturnValueCallback = Function.createDelegate(null, DialogClosedCallback);
SP.UI.ModalDialog.showModalDialog(options); // To Open Page in Model Dialogue

context.executeQueryAsync(Function.createDelegate(this, onQuerySucceeded),
Function.createDelegate(this, onQueryFailed));