Monday, June 20, 2011

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.

No comments:




Share your SharePoint Experiences with us...
As good as the SharePointKings is, we want to make it even better. One of our most valuable sources of input for our Blog Posts comes from ever enthusiastic Visitors/Readers. We welcome every Visitor/Reader to contribute their experiences with SharePoint. It may be in the form of a code stub, snippet, any tips and trick or any crazy thing you have tried with SharePoint.
Send your Articles to sharepointkings@gmail.com with your Profile Summary. We will Post them. The idea is to act as a bridge between you Readers!!!

If anyone would like to have their advertisement posted on this blog, please send us the requirement details to sharepointkings@gmail.com