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.
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.
Download: Source Code
Further Articles:
I am going to explore more with ribbon and going to post all my findings with source code. So keep a track of below articles.
Further Articles:
I am going to explore more with ribbon and going to post all my findings with source code. So keep a track of below articles.
- SharePoint 2010 Ribbon Customization Part I: Architecture of Ribbon
- SharePoint 2010 Ribbon Customization Part II: How to Add/Remove/Replace Tab Controls
- SharePoint 2010 Ribbon Customization Part III: How to create Tab at various Locations?
- SharePoint 2010 Ribbon Customization Part IV: How to add PostBack commands to ribbon?
- SharePoint 2010 Ribbon Customization Part V: How to dynamically populate ribbon controls?
- SharePoint 2010 Ribbon Customization Part VI: How to enable/disable buttons in ribbon conditionally?
