HOW TO:- Create a custom web part in MOSS, with a Text Entry - Web Dialog i.e. a text box and a button in the tool pane just like XSL editor button

  • Article

 

If you want to create a custom web part with a XSL editor button just like as in DataView Web Part and other OOB MOSS web parts, then here is a sample.You can create a custom SharePoint web part which has a custom toolpart with a Text box and a button(Text Entry - Web Dialog). The XSL Editor button that pops up a text editor to modify the XSL. It opens a dialog and you can save the value entered in text, back to the web part.

Important Steps:

1) Create a class derived from CompositeControl(System.Web.UI.WebControls)...with a HtmlButton and text box

2) Now we need to create a web part that has a custom ToolPart that will have this control.

3) Create a web part from Microsoft.SharePoint.WebPartPages.WebPart

4) Create a ToolPart class from Microsoft.SharePoint.WebPartPages.ToolPart. The toolpart references the control class and add that control to the webpart toolpane.

5) The webpart toolpane has the text+button. On click of the button it opens the Web Dialog for Text Entry. And saving that data back and displaying in a sharepoint label(in the sample web part). This can be replicated for the behaviour as in XSL editor or for XML and saving it back to the web part

 

I created 2 projects for it:-

 TextBoxDialog - For the control ( Text box and button…. for dialog editor box)

 WebPart_XSLEditor - The web part project where the control is used.

 

Control Class

============

using System;

using System.Data;

using System.Configuration;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

namespace TextBoxDialog

{

    public class TextBoxDialogControl : CompositeControl

    {

        private TextBox editor = null;

        private HtmlButton builder = null;

        public TextBoxDialogControl()

        {

            // Do instantation of the child controls in the constructor so that

            // the public properties can get/set the child control's properties

    editor = new TextBox();

            builder = new HtmlButton();

            builder.Visible = true;

        }

        protected override void CreateChildControls()

        {

            // Init of child controls

            editor.ID = "editor";

  editor.CssClass = "UserInput";

            builder.ID = "textbuilder";

            builder.InnerText = "...";

            builder.Visible = true;

          

            // Set child control methods

            editor.Attributes.Add("ondeactivate", String.Format("MSOTlPn_prevBuilder={0}", GetUniqueId(builder)));

            editor.Attributes.Add("onfocusin", String.Format("MSOPGrid_BuilderVisible({0})", GetUniqueId(builder)));

            editor.Attributes.Add("onfocusout", String.Format("MSOPGrid_BuilderVisible({0})", GetUniqueId(builder)));

            builder.Attributes.Add("onclick", String.Format("javascript:MSOPGrid_doBuilder('{0}', {1}, 'dialogHeight:340px;dialogWidth:430px;help:no;status:no;resizable:yes');", "/_layouts/1033/zoombldr.aspx", GetUniqueId(editor)));

            //builder.Attributes.Add("onfocusout", "this.style.display='block';");

            //builder.Attributes.Add("onfocusin", "this.style.display='block';");

            // Add child controls to CompositeControl

            Controls.Add(editor);

            Controls.Add(new LiteralControl(" "));

            Controls.Add(builder);

        }

        private string GetUniqueId(Control ctrl)

        {

            return String.Format("{0}_{1}", this.ClientID, ctrl.ClientID);

        }

        /// <summary>

        /// Get or set the TextBox Text value.

        /// </summary>

        public string Text

        {

            get { return editor.Text; }

            set { editor.Text = value; }

        }

    }

}

 

 

Web part Code

=============

using System;

using System.Runtime.InteropServices;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Xml.Serialization;

using System.Security;

using Microsoft.SharePoint;

using Microsoft.SharePoint.WebControls;

using Microsoft.SharePoint.WebPartPages;

using System.Web.UI.HtmlControls;

using TextBoxDialog;

namespace WebPart_XSLEditor

{

    [Guid("6a08b03a-f403-4426-b181-3ae5d776377d")]

    public class XSLEditorButtonWebPart : Microsoft.SharePoint.WebPartPages.WebPart

    {

        private string _property1 = "";

        public XSLEditorButtonWebPart()

        {

        }

        public string myProperty

        {

            get

            {

                return _property1;

            }

            set

            {

                _property1 = value;

            }

      }

        

      

        public override ToolPart[] GetToolParts()

        {

            // resize the tool part array

            ToolPart[] toolparts = new ToolPart[3];

            // instantiate the standard SharePopint tool part

            WebPartToolPart wptp = new WebPartToolPart();

            // instantiate the custom property toolpart if needed.

            // this object is what renders our regular properties.

            CustomPropertyToolPart custom = new CustomPropertyToolPart();

            // instantiate and add our tool part to the array.

            // tool parts will render in the order they are added to this array.

            toolparts[0] = new DynamicToolPart();

            toolparts[1] = custom;

            toolparts[2] = wptp;

            return toolparts;

        }

   

        protected override void CreateChildControls()

        {

            base.CreateChildControls();

            Label lbl = new Label();

            lbl.ID = "lblWebPart";

            lbl.Text = _property1;

            Controls.Add(lbl);

           

        }

    }

   

    public class DynamicToolPart : Microsoft.SharePoint.WebPartPages.ToolPart

    {

        TextBoxDialog.TextBoxDialogControl text1 = null;

        Label lblTitle = new Label();

        public DynamicToolPart()

        {

            this.Title = "My Custom ToolPart";

        }

        protected override void CreateChildControls()

        {

            lblTitle.Text = "Add the XSL..";

      

            text1 = new TextBoxDialog.TextBoxDialogControl();

            text1.ID = "text1";

            //text1.Text = this.WebPartToEdit.Description; // Using Description for sample purposes

            Controls.Add(lblTitle);

            Controls.Add(text1);

        }

        public override void ApplyChanges()

        {

                     

            XSLEditorButtonWebPart parentWebPart = (XSLEditorButtonWebPart)this.ParentToolPane.SelectedWebPart;

            // loop thru this control's controls until we find the ones that we need to persist.

            RetrievePropertyValues(this.Controls, parentWebPart);

           

            base.ApplyChanges();

        }

        // Recursive function that tries to locate the values set in the toolpart

        private void RetrievePropertyValues(ControlCollection controls, XSLEditorButtonWebPart parentWebPart)

        {

            foreach (Control ctl in controls)

            {

  RetrievePropertyValue(ctl, parentWebPart);

                if (ctl.HasControls())

                {

                    RetrievePropertyValues(ctl.Controls, parentWebPart);

                }

            }

        }

        // Method for retrieving the values set by the user.

        private void RetrievePropertyValue(Control ctl, XSLEditorButtonWebPart parentWebPart)

        {

            if (ctl is TextBoxDialogControl)

            {

                if (ctl.ID.Equals("text1"))

                {

                    TextBoxDialogControl bldrText = (TextBoxDialogControl)ctl;

                    if (bldrText.Text != "")

                    {

                        parentWebPart.myProperty = bldrText.Text;

                    }

  }

            }

        }

        public override void SyncChanges()

        {

            base.SyncChanges();

        }

    }

}

 

Ready to use it…?

1) Compile both the projects at your end

2) Add the TextBoxDialog dll to GAC. Reset IIS

3) Add a reference to TextBoxDialog in WebPart_XSLEditor project. And deploy the web part to any of your site. 

When you edit the web part, it gives you the My Custom ToolPart with the custom XSL editor button and dialog. For the sample use, I have just added a label which displays the value you add in the Text dialog. So add the XSL and modify the web part as you want :)

Comments