Plugging Web Controls Into The Property Grid

When creating or modifying a web page, one of the handy new features in SharePoint Designer 2007 is the Tag Properties task pane. It not only shows you the values for properties you have set, it shows you the other available properties and for certain types, the other available values.

The Tag Properties task pane also works for web controls, including web controls that you can add to basic WSS. For web controls, the task pane shows the various properties that actually exist on the .Net control, and allows full setting of the properties. Getting the properties of custom controls to show up, though, requires a few properties beyond those needed to get the browser rendering of the control to work.

Let’s look at a sample web control that has a property to express a latitude value.

namespace Example

{

    public class ExampleWebControl : WebControl

    {

        public ExampleWebControl()

        {

        }

        private Coordinate _latitude;

        public Coordinate Latitude

        {

            get

            {

                if (_latitude == null)

                {

                    _latitude = new Coordinate();

                }

                return _latitude;

            }

            set

            {

                _latitude = value;

            }

        }

    }

    public class Coordinate

    {

        public Coordinate()

        {

        }

        private int _degrees;

        public int Degrees

        {

            get

            {

                return _degrees;

            }

            set

            {

                _degrees = value;

            }

        }

        private int _minutes;

        public int Minutes

        {

            get

            {

                return _minutes;

            }

            set

            {

                _minutes = value;

            }

        }

        private float _seconds;

        public float Seconds

        {

            get

            {

                return _seconds;

            }

            set

            {

                _seconds = value;

            }

        }

    }

}

Once this control is installed on WSS, there are still two issues. First, the Latitude property won’t show up in the Tag Properties task pane. To make it show up, you’ll need to update the Latitude property with the Browsable attribute:

        [Browsable(true)]
        public Coordinate Latitude

However, that is not enough. The Coordinate type is not a native .Net type, and the .Net Framework on your machine running SharePoint Designer does not know enough about this type in order to properly set and unset values. Therefore, there are three more attributes to add:

One more on the Latitude property

        [Browsable(true)]

[DesignerSerializationVisibility(DesignerSerializationVisibility.Content)]
public Coordinate Latitude

And a little further down in the file, two attributes on the Coordinate class:

[Serializable]

[TypeConverter(typeof(ExpandableObjectConverter))]

public class Coordinate

These enable the type to be marshaled correctly as well as for the property grid in SharePoint Designer to understand how to serialize the web control.

There are two more points of note. First, both the web control and the custom property type are public, and have public constructors that have no parameters. Both of these are required for it to work properly within the SharePoint Designer property grid. Both are essentially also required to make the web control behave properly on the server. Second, once you’ve started working with the control in SharePoint Designer, if you find that you aren’t getting quite the behavior you expect, be sure to clear the proxy assembly cache. This is the same as clearing the cache of workflow activities.

 

Phil