Here we will add a button in the Ribbon section of a Generic list in Sharepoint 2010. If you want to go through the basics of Ribbon control architecture, please read Part -1.
Steps :
1) Create an empty sharepoint solution (DemoSol).
2) Add a feature “DemoRibbonControlFeature” .
3) Add an empty element in the project which will be the element manifest file for the feature created above.
Solution structure will look like this.
4) Open Elements.xml file and paste the below code.
Steps :
1) Create an empty sharepoint solution (DemoSol).
2) Add a feature “DemoRibbonControlFeature” .
3) Add an empty element in the project which will be the element manifest file for the feature created above.
Solution structure will look like this.
4) Open Elements.xml file and paste the below code.
<?xml version="1.0" encoding="utf-8"?> <Elements xmlns="http://schemas.microsoft.com/sharepoint/"> <CustomAction Id="AlertButton" RegistrationType="List" RegistrationId="101" Location="CommandUI.Ribbon"> <CommandUIExtension> <CommandUIDefinitions> <CommandUIDefinition Location="Ribbon.Documents.New.Controls._children"> <Button Id="Ribbon.Documents.New.Controls.AlertButton" Alt="Alert" Sequence="10" Image32by32="/_Layouts/AlertImages/Alert.png" Command="AlertCommand" LabelText="Alert" TemplateAlias="o2"/> </CommandUIDefinition> </CommandUIDefinitions> <CommandUIHandlers> <CommandUIHandler Command="AlertCommand" CommandAction="javascript:alert('You have done it !!!');" /> </CommandUIHandlers> </CommandUIExtension> </CustomAction> </Elements> |
Now we will go through the tags used in the element xml :
CustomAction : This is element that tell sharepoint that we want to add custom element in sharepoint.
RegistrationType : This tells where the custom element should be visible. In this case it is List.
RegistrationId : Registration ID tells which type of list you want to target to displaying the custom element . In this case we have used “101” for document library.
DocumentLib – 101 ,AnnouncementList : 104 Etc…
Location : It tells that the custome element should go to the Ribbon control of the list
CommandUIExtension : It contains the actual controls and actions that are to be taken with our custom action.
CommandUIDefinitions : Contains the definition of the control
Location: Location tag inside the CommandUIDefinitions tells where exactly this control should appear inside Ribbon. For more information here is the MSDN link.
Command: This tells the button which action to call when it's clicked. Command Action will be specified in CommandUIHandler element. Command name should be same at both the places
TemplateAlias: Can specify the size and styling of the button.
Sequence: This tag decides in which order buttons show up in inside the group.
Will call the simple alert message to on click of button.
<CommandUIHandler
Command="AlertCommand"
CommandAction="javascript:alert('You have done it !!!');" />
</CommandUIHandlers>
Awesome article...this was really helpful.
ReplyDelete