Goal
Adding custom fields in the tool pane of Content Query Web Part and using them. A few days ago I was working on a project with a similar requirement. I figured out that we can extend ToolPane and add custom controls to it.How to achieve?
- Create a blank SharePoint project in Microsoft Visual Studio 2010 with name "CustomContentQueryWebPart".
- Add a "Web Part" to the project with name "ExtendedCQWP" and not to be mistaken with "Visual Web Part".
- Added a class "ExtendedCQWPToolPart" for the ToolPane in a folder name "CustomToolPart". Once the classes are added the structure of the project will look like the picture given below.
- Use the code for "ExtendedCQWPToolPart".
#region System using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Web.UI.WebControls; #endregion namespace CustomContentQueryWebPart.CustomToolPart { /// <summary> /// The extended tool part of Extended Content Query Web Part. /// Will have a DropdownList, RadioButtonList and TextBox /// Will use the values added in the controls as applied. /// </summary> public class ExtendedCQWPToolPart : Microsoft.SharePoint.WebPartPages.ToolPart { #region Properties /// <summary> /// Literal /// </summary> protected Literal Ltrl { get; set; } /// <summary> /// Text Box /// </summary> protected TextBox Txt { get; set; } /// <summary> /// Dropdownlist /// </summary> protected DropDownList Ddl { get; set; } /// <summary> /// Radiobutton /// </summary> protected RadioButtonList Rbtnl { get; set; } #endregion #region Methods /// <summary> /// Constructor /// Applies the settings /// </summary> public ExtendedCQWPToolPart(string _ddlValue, string _rbtnValue, string _txtValue) { //Bind the ddl Ddl = new DropDownList(); Ddl.Items.Insert(0, new ListItem("--- Select ---", "")); Ddl.Items.Insert(1, new ListItem("DDL 1")); Ddl.Items.Insert(2, new ListItem("DDL 2")); Ddl.Items.Insert(3, new ListItem("DDL 3")); //Radio Button the ddl Rbtnl = new RadioButtonList(); Rbtnl.Items.Insert(0, new ListItem("RBTN 1")); Rbtnl.Items.Insert(1, new ListItem("RBTN 2")); Rbtnl.Items.Insert(2, new ListItem("RBTN 3")); Rbtnl.SelectedIndex = 0; //Text box Txt = new TextBox(); //Refill the settings if (!string.IsNullOrEmpty(_ddlValue)) { Ddl.SelectedValue = _ddlValue; } if (!string.IsNullOrEmpty(_rbtnValue)) { Rbtnl.SelectedValue = _rbtnValue; } if (!string.IsNullOrEmpty(_txtValue)) { Txt.Text = _txtValue; } } /// <summary> /// Applies the child controls /// </summary> protected override void CreateChildControls() { base.CreateChildControls(); #region Add the controls to the section //Title to the web part this.Title = "Extended Settings"; //Add the contorls so that they show up on the screen Ltrl = new Literal(); Ltrl.Text = "<b>Dropdown Selection</b><br /><br />"; this.Controls.Add(Ltrl); this.Controls.Add(Ddl); Ltrl = new Literal(); Ltrl.Text = "<br /><br /><b>Radiobutton Selection</b><br /><br />"; this.Controls.Add(Ltrl); this.Controls.Add(Rbtnl); Ltrl = new Literal(); Ltrl.Text = "<br /><br /><b>Textbox</b><br /><br />"; this.Controls.Add(Ltrl); this.Controls.Add(Txt); Ltrl = new Literal(); Ltrl.Text = "<br /><br />"; this.Controls.Add(Ltrl); #endregion } /// <summary> /// Fires on the OK/Save is clicked in the tool part pane /// </summary> public override void ApplyChanges() { base.ApplyChanges(); //Applies the custom settings to the content query web part ExtendedCQWP.ExtendedCQWP _parentWebPart = (ExtendedCQWP.ExtendedCQWP)this.ParentToolPane.SelectedWebPart; if (_parentWebPart != null) { //Applies the control settings _parentWebPart.DdlValue = Ddl.SelectedValue; _parentWebPart.RbtnlValue = Rbtnl.SelectedValue; _parentWebPart.TxtValue = Txt.Text; //Applies the settings _parentWebPart.ApplyChanges(); } } #endregion } }
- For "ExtendedCQWP" add a reference of Microsoft.Sharepoint.Publishing and the code is given below.
#region System using System; using System.ComponentModel; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using Microsoft.SharePoint; using Microsoft.SharePoint.WebControls; using System.Collections.Generic; using Microsoft.SharePoint.WebPartPages; #endregion namespace CustomContentQueryWebPart.ExtendedCQWP { /// <summary> /// Sample extended Content Query Web Part /// </summary> [ToolboxItemAttribute(false)] public class ExtendedCQWP : Microsoft.SharePoint.Publishing.WebControls.ContentByQueryWebPart { #region Properties /// <summary> /// Txt Value /// </summary> public string TxtValue { get; set; } /// <summary> /// Radio button Value /// </summary> public string RbtnlValue { get; set; } /// <summary> /// Txt Value /// </summary> public string DdlValue { get; set; } #endregion #region Methods /// <summary> /// Create Child Controls /// </summary> protected override void CreateChildControls() { base.CreateChildControls(); } /// <summary> /// Override the get tool part /// </summary> /// <returns></returns> public override ToolPart[] GetToolParts() { List<ToolPart> _toolParts = new List<ToolPart>(base.GetToolParts()); _toolParts.Insert(0, new CustomToolPart.ExtendedCQWPToolPart(DdlValue, RbtnlValue, TxtValue)); return _toolParts.ToArray(); } /// <summary> /// Applies the changes /// </summary> public void ApplyChanges() { this.Title = string.Format("DDL : {0}, Rbtn : {1}, Txt : {2}", DdlValue, RbtnlValue, TxtValue); } #endregion } }
- I renamed the title in element.xml so the web part show with title "Custom Content Query Web Part".
- Edit the newly added webpart.
/li>
- The right side of the tool pane will show like the below given picture. Make the modification as you want.
- On applying or saving the settings my code will set the title concatenating all the 3 values.
Hope the blog helped you, please comment if you have any queries. I will be very much happy to answer them.
