How to create custom button in SharePoint 2010 Edit form Ribbon User Interface

In this article we will be seeing how to create a custom button in the SharePoint 2010 Edit form Ribbon user interface.


We will be creating a custom button in the edit form user interface using CustomAction element.

CustomAction:

It is used to define an extension to the user interface, such as a button on a toolbar or a link on a site settings page.

Location for the Edit Form:

CommandUI.Ribbon.EditForm

Steps Involved:

  • Open Visual Studio 2010.

  • Go to File => New =>Project.

  • Select Empty SharePoint project template from the installed template SharePoint => 2010.

  • Enter the Name and click OK.

  • Check the option "Deploy as a Sandbox solution".

  • Click Ok.

  • Right click on the solution and select "Add a new item".

  • Select Empty Element template, enter the Name and click Ok.

  • In the Elements.xml replace the code with the following.

<?xml version="1.0" encoding="utf-8"?> <Elements xmlns="http://schemas.microsoft.com/sharepoint/">   <CustomAction Id="EditFormCustomization" Location="CommandUI.Ribbon.EditForm" RegistrationId="101" RegistrationType="List" Title="Edit Form Ribbon Customization">  <CommandUIExtension>  <CommandUIDefinitions>   <CommandUIDefinition Location="Ribbon.DocLibListForm.Edit.Actions.Controls._children">   <Button Id="EditFormButtonTest" Command="EditFormButtonCommand" Description="My custom button in edit form" LabelText="My custom button" Image32by32="/_layouts/images/homepagetopzoneimage.jpg" TemplateAlias="o2" Sequence="91"/>   </CommandUIDefinition>   </CommandUIDefinitions>   <CommandUIHandlers>  <CommandUIHandler Command="EditFormButtonCommand"CommandAction="javascript:alert('My custom button in Edit Form!');" />  </CommandUIHandlers> </CommandUIExtension>

</CustomAction> </Elements>

  • Go to the SharePoint site where you have deployed your solution.

  • Go to Shared Documents and edit an item.

  • In the edit form you will see My Custom Button in the Ribbon User Interface.

  • Click on the button and you will see an alert message.


Recent Posts

See All