Customizing the AssetUrlSelector

One of the very useful SharePoint Publishing Controls is the AssetUrlSelector

This control allows users to pick any asset (images or documents or files or pages etc.,) from the site collection

Below is an example of how this control looks when you add it to your page

asset-picker-control

Below is the picker dialog

asset-picker-dialog

If you want to customize the AssetUrlSelector control, you can do so by modifying some of its properties

For example, below is an example code segment:

 

<%@ Register TagPrefix="PublishingWebControls" 
    Assembly="Microsoft.SharePoint.Publishing, 
                   Version=12.0.0.0, 
                   Culture=neutral, 
                   PublicKeyToken=71e9bce111e9429c"
    Namespace="Microsoft.SharePoint.Publishing.WebControls" %>
<PublishingWebControls:AssetUrlSelector ID="urlVideoSelector" 
    IsUrlRequired="true"  
    UseImageAssetPicker="false" 
    AllowExternalUrls="false" 
    runat="server"
    DefaultOpenLocationUrl="~Site/Video Library/Forms/AllItems.aspx"
    OverrideDialogTitle="Video Picker"
    OverrideDialogDescription="Select a video" />

 

As you can see in the above code snippet, I have customized few things:

1) Default open location

2) Picker Dialog title

3) Picker Dialog description

The UseImageAssetPicker is an interesting property which when set to true will open the Images library in the top level site, which is quite handy!

Getting the Url of the selected asset via code is very simple:

string videoUrl = urlVideoSelector.AssetUrl;

Visit this MSDN page for more customization options on the AssetUrlSelector control

SharePoint: Customising the EntityEditorWithPicker

I am sure many SharePoint users will be familiar with the EntityEditorWithPicker. Well, if you are wondering what the hell is this EntityEditorWithPicker, below is a screen-shot:

image

Yes, that nice little TextBox portion along with the ‘Check for Names’ and ‘Browse’ button is the EntityEditorWithPicker. Don’t forget that ‘dialog box window’ which comes when you choose to browse ;)

SharePoint being extensible, it is very easy to create your own custom EntityEditorWithPicker. You can implement it such a way that it loads some data from a list and allows the user to select an list item. To do so, you should extend three classes:

Below is a diagram which represents the above:

image

The picker dialog represents that ‘dialog box window’. The results are returned from the simple query control to the picker dialog. The picker dialog is attached to the entity editor so that the entity editor is aware which is that ‘dialog box window’ to open.

Putting the respective classes to their user interface, it becomes:

image   image

Looks easy, isn’t it :)

For code sample, Igor Kozlov has an excellent sample on customising the EntityEditorWithPicker on his blog.

Wouter van Vugt has an advanced sample on creating a CustomField by using EntityEditorWithPicker (You can grab the code sample here)

SharePoint: Creating a custom field

In SharePoint, a site column is a reusable column definition, or template, that you can assign to multiple lists across multiple SharePoint sites. Site columns are associated to a particular Data Type. This Data Type is called a Field. For example, when you create a site column, you are also prompted to select the type of information, which is nothing but a Data Type or a Field.

creating-site-column

Sometimes, it is necessary for us to create our own custom field that does not conform to the field types included in SharePoint by default. Something like this:

custom-field-site-column

How do we do that?

All you have to do is – create a custom field which would result in creating a Field Class, Field Control and Field Type Definitions

image

The Field Class should inherit from any of the SPField classes shown above in the diagram.

The Field Control should have Field Rendering Control and a Field Rendering Template.

The Field Type Definitions is a XML file which contains some information about the custom field.

Custom Field Class - CustomField

Below is a custom field class which inherits SPFieldChoice

public class CustomField : SPFieldChoice
{
    public CustomField(SPFieldCollection fields, string fieldName) :

                                                                    base(fields, fieldName) { }

    public CustomField(SPFieldCollection fields, string typeName, string displayName) :

                                                                    base(fields, typeName, displayName) { }

    public override BaseFieldControl FieldRenderingControl

    {
        get
        {
            BaseFieldControl fieldControl = new CustomFieldControl();
            fieldControl.FieldName = InternalName; return fieldControl;
        }
    }
}

As you can see in the above code, it does nothing but creates a custom field control to render our custom field.

Field Rendering Template – CustomFieldControl.ascx

<SharePoint:RenderingTemplate Id="CustomFieldTemplate" runat="server" >    
    <Template> 
        <asp:CheckBox ID="YesNoCheckBox" runat="server"  Text="Yes/No" />    
    </Template>
</SharePoint:RenderingTemplate>

This is going to render a simple ASP.NET CheckBox

 Field Rendering Control – CustomFieldControl.cs

The name of the field rendering control should be same as the name of the field rendering template(ascx) name and must inherit from BaseFieldControl.

public class CustomFieldControl : BaseFieldControl
{    
#region Member Variables        
protected CheckBox YesNoCheckBox;    
private string _value;    
#endregion    
#region Overridden Methods       
#endregion    
#region Private Methods        
#endregion
}

The basic template(with our example’s member variables) code block is shown above. The member variables are nothing but the controls that we created in the field rendering template.

The field control class can be considered as the code behind for the field rendering template.

To make our custom field work, we first need to render the template and display our checkbox.

#region Overridden Methods
protected override void CreateChildControls()
{    
if (Field == null && this.ControlMode == SPControlMode.Display)    
{   return;  }        
base.CreateChildControls();    
FindDisplayControle();
}
#endregion
#region Private Methods
private void FindDisplayControle()
{    
YesNoCheckBox = (CheckBox)TemplateContainer.
FindControl(DefaultValues.YesNoCheckBoxName);    
if (DisplayLiteral == null || YesNoCheckBox == null)        
throw new ConfigurationErrorsException("Error: Cannot load the controls!");
}
#endregion

The code block finds the checkbox from our template container (field rendering template).

So, how is the value persisted?

We do that ‘magic’ by overriding the Value property

#region Overridden Methods
public override object Value
{    
get
{
EnsureChildControls();
SetValue();
return _value;    
}    
set
{
EnsureChildControls();
_value = value.ToString(); 
LoadCheckBox();
}
}
#endregion
#region Private Methods
private void LoadCheckBox()
{    
if(!string.IsNullOrEmpty(_value))
{ 
YesNoCheckBox.Checked = _value=="Yes";    
}
}
private void SetValue()
{    
_value = YesNoCheckBox.Checked ? "Yes" : "No";
}
#endregion

Looks very simple, isn’t it :)

One last thing to do is to tell SharePoint our default template name and display template name, which is nothing but the name of our field rendering template

#region Overridden Methods
protected override string DefaultTemplateName
{ 
get
{ 
return DefaultValues.RenderingTemplateName;    
}
}
public override string DisplayTemplateName
{ 
get
{
return DefaultValues.RenderingTemplateName;    
}
}
#endregion

Field Type Definitions – fldtypes_<custom-field>.xml

We now need to create a field type definition. The field type definition file is an XML file whose name is prefixed by fldtypes_ followed by a name. It is important that we follow this convention. Our field type definition for our custom field is called as fldtypes_customfield.xml

<fieldtypes>
<FieldType>
<Field Name="TypeName">CustomField</Field>
<Field Name="TypeDisplayName">Custom Field</Field>
<Field Name="TypeShortDescription">Custom field</Field>
<Field Name="ParentType">Note</Field>
<Field Name="FieldTypeClass">Chaks.Samples.SharePoint.CustomField, 
Chaks.Samples, Version=1.0.0.0, 
Culture=neutral, 
PublicKeyToken=****************
</Field>
<Field Name="UserCreatable">TRUE</Field>
</FieldType>
</fieldtypes>

You can read more about custom field type definitions here

 

Deploying

1) Place the .dll into the GAC

2) Copy the fldtypes_customfield.xml into 12hive->TEMPLATE->XML

2) Copy the CustomFieldControl.ascx into 12hive->TEMPLATE->CONTROLTEMPLATES

( It is always recommended to use STSDEV or WspBuilder for SharePoint projects. That makes your deployment (and development) very easy )

You can download the files below:

 


Creative Commons License
Chaks' Corner Blog by Chakkaradeep Chandran is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
Based on a work at www.chakkaradeep.com.
Permissions beyond the scope of this license may be available at http://www.chakkaradeep.com.