Zoom In Sharepoint: Customization Ribbon – Adding a Flyout anchor in the Ribbon

Please go through the Part -1 and Part -2 for understanding the basics of Ribbon architecture and adding a button in the Ribbon.

In this article we will add Flyout anchor in the Ribbon of a list.

Steps : For creating the solution structure please refer part -2 of the series where I have explained the steps needed to set up the solution and creating the feature.

<?xml version="1.0" encoding="utf-8"?>

<CommandUIDefinition

Location="Ribbon.Library.Share.Controls._children">

<FlyoutAnchor

Id="Ribbon.Library.Share.FlyoutAnchor"

Sequence="20"

LabelText="Notifications"

Image32by32="_Layouts/NotificationImages/Notification.png"

TemplateAlias="o1">

<Button

Id="Ribbon.Library.Share.FlyoutAnchor.Menu.MenuSection.MyButton"

Sequence="0"

Command="AppleProfileCommand"

LabelText="Apple Profile"

TemplateAlias="o1"/>

</Controls>

</MenuSection>

<Button Id="Ribbon.Library.FlyoutAnchor.Menu.MenuSection1.EditNotification″"

Sequence="0" Command="MicrosoftPageCommand" LabelText="Microsoft Profile" TemplateAlias="o1" />

</Controls>

</MenuSection>

</Menu>

</CommandUIDefinitions>

<CommandUIHandler

Command="AppleProfileCommand"

CommandAction="javascript:alert('Hello Steve jobs !!!');"

<CommandUIHandler

Command="MicrosoftPageCommand"

CommandAction="javascript:alert('Hello Bill Gates !!!');"

</CommandUIHandlers>

</CommandUIExtension>

</CustomAction>

</Elements>

On Deploying the solution – flyout anchor will appear like this in the document library.

And on click of any of the items, a javascript method will fire as we have defined in the CommandUIHandlerExtension tag. In this case a simple javascript method will be called.

Your Job is done J

Continue reading for further posts on Customizing Ribbon

Zoom In Sharepoint

Mar 20, 2012

Customization Ribbon – Adding a Flyout anchor in the Ribbon - Part 3

No comments:

Post a Comment