Saturday, January 23, 2010

SharePoint 2010 Ribbon Customization Part V: How to dynamically populate ribbon controls?

In this article I will show you how we can populate ribbon controls on fly. Ribbon controls like combobox, dropdown, flyoutanchor, splitbutton, mrusplitbutton contains menuitems or they can host other controls like button with individual command and act like a menu. So their structure can be populates at design time in XML declaration as well as at runtime using javascript and code behind.

I will cover how we can populate the FlyoutAnchor control with its child elements on fly.

I am going to use a custom PageComponent, Delegate Control and JavaScript file. To create PageComponent and Delegate control please refer my previous articles PartIII and PartIV.

Here is XML declaration for FlyoutAnchor, I have dropped the other xml declaration to keep it simple. In this declaration you will notice that we have three new properties PopulateDynamically="true", PopulateOnlyOnce="true", PopulateQueryCommand="GetDynamicNewMenuXml". The important one is PopulateQueryCommand, this command gets executed when ribbon starts building this control. Within this event we will retrieve the required items which we want to show in FlyoutAnchor. Let's see how?

Let's look into our PageComponent, When PageComponent gets called as a result of PopulateQueryCommand in action, in handleCommand function one of its input parameter is "properties". This has one method PopulationXML which takes the items declaration in the form of XML. When Ribbon found that this control has been set for dynamic population then it uses XML assigned to its properties.
On PopulateQueryCommand command we are calling GetDynamicNewMenuXmlFunction JavaScript function which will generates and returns the XML for menu.

Here is GetDynamicNewMenuXmlFunction() code,
The typical format of XML is ,
For this example I have create menu string in JavaScript. You can generate it on fly in code behind and then inject it into page. Use Delegate Control for this purpose.

I hope this will help you.


  1. This comment has been removed by the author.

  2. Hi ,
    This is very nice example and working with List .I want to run it with "Document" library .
    I changed 100 with 101 . like below :

    But it not appear in Document Tab .
    can you please suggest me ?
    Thanks you