Create Custom Button in Ribbon SharePoint 2010
To add a new button, you
start by creating an empty module.
To create a Ribbon using
Custom Actions
1.
Create a folder CustomActions.
2.
Right click on “CustomActions”
,point to Add and then Select Add New
Item
3.
Select “Empty
Element as shown in the above snap and Provide name CustomRibbonButton
4.
Add the below code
block.
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<CustomAction
Id="Ribbon.Library.Actions.AddAButton"
Location="CommandUI.Ribbon"
RegistrationId="101"
RegistrationType="List"
Title="Add a Ribbon Button">
<CommandUIExtension>
<CommandUIDefinitions>
<CommandUIDefinition
Location="Ribbon.Library.Share.Controls._children">
<Button Id="Ribbon.Library.Share.NewRibbonButton"
Command="NewRibbonButtonCommand"
Image16by16="/_layouts/$Resources:core,Language;/images/formatmap16x16.png" Image16by16Top="-144" Image16by16Left="-64"
Image32by32="/_layouts/$Resources:core,Language;/images/formatmap32x32.png" Image32by32Top="-255" Image32by32Left="0"
LabelText="Hello World"
TemplateAlias="o2" />
</CommandUIDefinition>
</CommandUIDefinitions>
<CommandUIHandlers>
<CommandUIHandler
Command="NewRibbonButtonCommand"
CommandAction="javascript:alert('Hello, world');" />
</CommandUIHandlers>
</CommandUIExtension>
</CustomAction>
</Elements>
5.
Deploy the solution
and see your custom button under “View all site content à Document Library à In ribbon, Library
Tools à Documents à Share & Track section.
6.
Click on the “custom
button”, it will give you an alert as you specified in the CommanAction.
7.
If you want to write
your own script, add a script file block and change customAction accordingly.
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<CustomAction Id="Ribbon.Library.Actions.AddAButton.Scripts"
Location="ScriptLink"
ScriptSrc="TestProjectName/js/Custom.js" />
<CustomAction
Id="Ribbon.Library.Actions.AddAButton"
Location="CommandUI.Ribbon"
RegistrationId="101"
RegistrationType="List"
Title="Add a Ribbon Button">
<CommandUIExtension>
<CommandUIDefinitions>
<CommandUIDefinition
Location="Ribbon.Library.Share.Controls._children">
<Button Id="Ribbon.Library.Share.NewRibbonButton"
Command="NewRibbonButtonCommand"
Image16by16="/_layouts/$Resources:core,Language;/images/formatmap16x16.png" Image16by16Top="-144" Image16by16Left="-64"
Image32by32="/_layouts/$Resources:core,Language;/images/formatmap32x32.png" Image32by32Top="-255" Image32by32Left="0"
LabelText="Hello World"
TemplateAlias="o2" />
</CommandUIDefinition>
</CommandUIDefinitions>
<CommandUIHandlers>
<CommandUIHandler
Command="NewRibbonButtonCommand"
CommandAction="javascript:handleClick()"
EnabledScript="javascript:handleSelection()" />
</CommandUIHandlers>
</CommandUIExtension>
</CustomAction>
</Elements>
8.
Write the below code
in your “Custom.js”
function handleSelection () {
if (SP.ListOperation.Selection.getSelectedItems().length ==
1) {
return true;
}
else {
return false;
}
}
function handleClick ()
{
//Write you code here
}
That’s all... Happy coding J
