SharePoint 2010 Create a custom Picker with Dialog

If you don’t know what a picker is, you have two options. Option one is to cancel reading this post and go to google or option two you read on and look at the picture below:

A picker allows users to open a separate dialog, in which they can search for items or elements which they want to choose. It only allows to enter values that are from these search results. A good example is the people picker. But if you want to use your own picker with your own values in it, you can do it by using code. So in this post i would like to share how i created my custom picker with a dialog.

For what can we use such custom picker? Examples:

• To provide a special lookup list for customers, projects, resources, or other elements
• Connect to a separate system (LOB) and get data from other sources than SharePoint
• to make it easier to enter a special value of a large list or find an item in a large list

I used a separate list which i defined in the UI of SharePoint and called it “Customer” with a title column and a “ContactName” column, both from type Text. This list contains the possible values for the picker.

How should we start?Okay let’s start with a project in Visual Studio. We have to add a mapped folders: Controltemplates.

Please add to this folder a user control. This user control should look like this:

[sourcecode language=”csharp”]

< %@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
< %@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
< %@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
< %@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
< %@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
< %@ Import Namespace="Microsoft.SharePoint" %>
< %@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
< %@ Control Language="C#" Debug="true" %>
< %@ Register TagPrefix="custPicker" Namespace="SPCustomPicker.FieldCode" Assembly="$SharePoint.Project.AssemblyFullName$" %>

[/sourcecode]

We add a reference to something that we did not created yet, you will see it later.

After that we create a folder “FieldCode” and add three .cs files

• SPCustomPickerEditor
• SPCustomQueryControl
• SPCustomPickerDialog

Let’s go into the details.

SPCustomPickerEditor

The PickerEditor is the starting point. It provides the field (like a textfield) with check and search buttons. Here we make a reference to the PickerDialog.

[sourcecode language=”csharp”]

namespace SPCustomPicker.FieldCode
{
public class SPCustomPickerEditor : EntityEditorWithPicker
{
protected override void OnInit(EventArgs e)
{
base.OnInit(e);
PickerDialogType = typeof(SPCustomPickerDialog);
ValidatorEnabled = true;
AllowTypeIn = true;
MultiSelect = false;
}

public override PickerEntity ValidateEntity(PickerEntity needsValidation)
{
DataTable dt = new DataTable();
SPSite site = new SPSite(SPContext.Current.Site.ID);
SPWeb web = site.RootWeb;

SPList list = web.Lists[“Customers”];
SPListItemCollection items = list.Items;
dt = items.GetDataTable();

DataRow[] row = dt.Select(“Title = ‘”+needsValidation.Key+”‘”);

if (row.Length > 0)
{
needsValidation.IsResolved = true;
needsValidation.Key = needsValidation.Key;
needsValidation.DisplayText = needsValidation.DisplayText;
needsValidation.Description = needsValidation.Description;
needsValidation.EntityData.Clear();
needsValidation.EntityData.Add(needsValidation.Key, needsValidation.DisplayText);
}
else
needsValidation.IsResolved = false;
return needsValidation;
}

}
}

[/sourcecode]

SPCustomPickerDialog

Now we define the dialog. It is a pop up dialog which opens if a user clicks on the search button of the pickereditor and it allows to search for a special item. In this dialog, we add the columns which should be displayed in the result pane and the dropdown. Here we make a reference to the QueryControl.

[sourcecode language=”csharp”]

namespace SPCustomPicker.FieldCode
{
public class SPCustomPickerDialog : PickerDialog
{
public SPCustomPickerDialog()
: base(new SPCustomPickerQueryControl(), new TableResultControl(), new SPCustomPickerEditor())
{
ArrayList columnDisplayName = ((TableResultControl)base.ResultControl).ColumnDisplayNames;

columnDisplayName.Clear();
columnDisplayName.Add(“Title”);
columnDisplayName.Add(“ContactName”);

ArrayList columnNames = ((TableResultControl)base.ResultControl).ColumnNames;

columnNames.Clear();
columnNames.Add(“Title”);
columnNames.Add(“ContactName”);

ArrayList columnWidths = ((TableResultControl)base.ResultControl).ColumnWidths;

columnWidths.Clear();
columnWidths.Add(Unit.Percentage(30).ToString());
columnWidths.Add(Unit.Percentage(30).ToString());
}
}
}

[/sourcecode]

In order to prevent an error when opening the picker dialog we have to change some settings. Otherwise this nice message will popup.

First we have to change properties of the whole project. Set Include Assembly in Package to false.

After changing it from true to false we also have to add the dll. Therefore go to you package and click on advanced. There you can add the dll to gac.

So far so good. The error should dissapear.

SPCustomQueryControl

We have to provide the query for the available results – this we are going to do in this class. So we have to query our customer list. We get also the possibility to filter this list. The variables search and group are for the filter. I didn’t implement these but you should know, that search is the value to look for and group is the column where it should be.

[sourcecode language=”csharp”]

namespace SPCustomPicker.FieldCode
{
public class SPCustomPickerQueryControl : SimpleQueryControl
{
public SPCustomPickerQueryControl()
{
Load += new EventHandler(SPCustomPickerQueryControl_Load);
}

void SPCustomPickerQueryControl_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
EnsureChildControls();
mColumnList.Items.Add(“Title”);
mColumnList.Items.Add(“ContactName”);
}
}

protected override int IssueQuery(string search, string groupName, int pageIndex, int pageSize)
{

DataTable results = getFilteredData(search, groupName);

PickerDialog.Results = results;
PickerDialog.ResultControl.PageSize = results.Rows.Count;

return results.Rows.Count;
}

public override PickerEntity GetEntity(DataRow dr)
{
PickerEntity entity = new PickerEntity();
entity.DisplayText = string.Empty + dr[“Title”];
entity.Key = string.Empty + dr[“Title”];
entity.Description = string.Empty + dr[“ContactName”];
entity.IsResolved = true;
entity.EntityData.Add(entity.Key, entity.Description);

return entity;
}

public DataTable getFilteredData(string search, string groupName)
{

DataTable dt = new DataTable();
SPSite site = new SPSite(SPContext.Current.Site.ID);
SPWeb web = site.RootWeb;

SPList list = web.Lists[“Customers”];
SPListItemCollection items = list.Items;

//Filter Logic is missing

//Return DataTable
dt = items.GetDataTable();

return dt;
}
}
}

[/sourcecode]

Application Page

To see if it worked we add a mapped folder “Layouts” to the project and add an application page. The application page we add following lines of code:

[sourcecode language=”csharp”]

< %@ Register TagPrefix="custPicker" Namespace="SPCustomPicker.FieldCode" Assembly="$SharePoint.Project.AssemblyFullName$" %>

[/sourcecode]

We added a reference to the picker like we did in the custom control above.

DEPLOY & TEST

Now if everything is correct we should have a similiar result:

That’s it. Hope it helps you in any kind. The next time i will show you how to use this custom picker as a custom fieldtype. So stay tuned and come back.

..:: I LIKE SHAREPOINT ::..