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′
Image16by16=’_layouts/Images/uploaddoc.png’
Image32by32=’_layouts/Images/uploaddoc.png’
Command=’Ribbon.Documents.Manage.CustUpload.cmdCustUpload’ LabelText=’Cust Upload’ />
</CommandUIDefinition>
</CommandUIDefinitions>
<CommandUIHandlers>
<CommandUIHandler
Command=’Ribbon.Documents.Manage.CustUpload.cmdCustUpload’
EnabledScript=’javascript:enableCustUploadApproveButton();’
CommandAction=‘javascript:CustomCommandAction();’ />
</CommandUIHandlers></CommandUIExtension>“;
userCustomAction.Sequence = 1001;
userCustomAction.Update();

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

 ———————————————————————————————–

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(listItm.id);
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=” + listItm.id

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

———————————————————————————————–

Advertisements

One thought on “Adding a button on Ribbon Control of SharePoint site

  1. Pingback: Show or Hide Ribbon control based on Group Permission | Yogesh Lotlikar's Blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s