Ribbon customization - Part 8

In this post, I am going to show you how to add fly out anchor in the ribbon control. Here is the complete XML and following is the output. But first if you have not gone through part 1 to part 7, I would recommend you reading them first and then continue reading from here.

All we need to change in the XML that we used in earlier post is the controls section. Here we will take flyout control and populates that controls with its own menu items. Flyout anchor has got Menu tag first, that contains menu section tag, which contains controls section.

In this XML, I have used built in templates like o1 and o2.

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<CustomAction Id="SPKings.Ribbon.CustomTab"
Location="CommandUI.Ribbon.ListView"
RegistrationId="100" RegistrationType="List">
<CommandUIExtension>
<CommandUIDefinitions>
<CommandUIDefinition
Location="Ribbon.ListItem.Groups._children">

<Group
Id="SPKings.Ribbon.CustomTab.SearchGroup"
Description="Different Search Engines"
Title="Search Engines"
Sequence="52"
Template="SearchEnginesGroup">


<Controls Id="SPKings.Ribbon.CustomTab.SearchGroup.Controls">

<FlyoutAnchor Id="SPKings.Ribbon.CustomTab.SearchGroup.FlyoutAnchor"
Sequence="10"
Image16by16="/_layouts/images/CustomImages/Search16.png"
Image32by32="/_layouts/images/CustomImages/Search32.jpg"
LabelText="Search Providers"
TemplateAlias="Search"
ToolTipTitle="Search Engines"
ToolTipDescription="This flyout anchor allowes you the choose search engines">

<Menu Id="Ribbon.Library.Share.FlyoutAnchor.Menu">

<MenuSection Id="Ribbon.Library.Share.FlyoutAnchor.Menu.MenuSection" Sequence="10" DisplayMode="Menu16">

<Controls Id="Ribbon.Library.Share.FlyoutAnchor.Menu.MenuSection.Controls">

<Button

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

Sequence="10"

Command="GoogleButtonCommand"

LabelText="Google"

Image16by16="/_layouts/images/CustomImages/google-logo.png"

TemplateAlias="o2"

/>

</Controls>

</MenuSection>


<MenuSection Id="Ribbon.Library.Share.FlyoutAnchor.Menu.MenuSection1" Sequence="20" DisplayMode="Menu16">

<Controls Id="Ribbon.Library.FlyoutAnchor.Menu.MenuSection1.Controls">
<Button Id="Ribbon.Library.FlyoutAnchor.Menu.MenuSection1.BingButton"

Sequence="10"

Command="BingButtonCommand"

LabelText="Bing"

Image16by16="/_layouts/images/CustomImages/Bing-logo.jpg"

TemplateAlias="o3"

/>

</Controls>

</MenuSection>

</Menu>



</FlyoutAnchor >

</Controls>

</Group>

</CommandUIDefinition>

<CommandUIDefinition
Location="Ribbon.Templates._children">

<GroupTemplate Id="SearchEnginesGroup">
<Layout Title="OneLarge" LayoutTitle="OneLarge">
<Section Alignment="Top" Type="OneRow">
<Row>
<ControlRef DisplayMode="Large" TemplateAlias="Search" />
</Row>
</Section>
</Layout>
</GroupTemplate>


</CommandUIDefinition>


<CommandUIDefinition Location="Ribbon.ListItem.Scaling._children">
<MaxSize Id="Ribbon.ListItem.Scaling.MaxSize" Sequence="35" GroupId="SPKings.Ribbon.CustomTab.SearchGroup" Size="OneLarge"/>
</CommandUIDefinition>

</CommandUIDefinitions>

<CommandUIHandlers>

<CommandUIHandler

Command="BingButtonCommand"

CommandAction="javascript:alert('Hi, you clicked Bing');" />

<CommandUIHandler

Command="GoogleButtonCommand"

CommandAction="javascript:alert('Hi, you clicked Google');" />



</CommandUIHandlers>

</CommandUIExtension>

</CustomAction>
</Elements>

And this is the output when you deploy this and activate as feature



Keep reading Part 9 for further exploration.