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:

Picker01

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:



< %@ 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$" %>
<sharepoint:renderingtemplate ID="SPCustomPickerField" runat="server">
<template>
<custpicker:spcustompickereditor ID="myCustomPicker" runat="server" ValidatorEnabled="true"></custpicker:spcustompickereditor>

</template>
</sharepoint:renderingtemplate>


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.



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;
}

}
}


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.



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());
}
}
}


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

Picker04

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

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.
Picker02

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.



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;
}
}
}


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:



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

<asp:content ID="PageHead" ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">

</asp:content>

<asp:content ID="Main" ContentPlaceHolderID="PlaceHolderMain" runat="server">
<table width="200px">
<tr>
<td><custpicker:spcustompickereditor ID="myCustomPicker" runat="server"></custpicker:spcustompickereditor></td>

</tr>
</table>

</asp:content>


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:

Picker05

Picker06

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 ::..

The article or information provided here represents completely my own personal view & thought. It is recommended to test the content or scripts of the site in the lab, before making use in the production environment & use it completely at your own risk. The articles, scripts, suggestions or tricks published on the site are provided AS-IS with no warranties or guarantees and confers no rights.

Karsten Pohnke About Karsten Pohnke
He is Consultant for SharePoint Solutions for collaboration, communication and business processes. He provides his customers applications based on standard features as well as development or combining the power of several microsoft tools like Dynamics CRM. In his free time he tries to collect tipps and worthy experience in this blog.

6 comments on “SharePoint 2010 Create a custom Picker with Dialog

  1. Nice! Good job 🙂 it helped alot.
    i have nearly the same code, BUT you can of course make it much more dynamic 🙂

  2. Pingback: HowTo: Create Custom Picker (Dialog) for SharePoint | One Cigarette with Flo

  3. Hi,

    How to call this application page from edit form?

    Thank You,
    Safiya

  4. Server Error in ‘/’ Application.

    Configuration Error
    Description: An error occurred during the processing of a configuration file required to service this request. Please review the specific error details below and modify your configuration file appropriately.

    Parser Error Message: Could not load type ‘PeopleEditor.CustPeopleFind’.

    Source Error:

    Line 267:

    Line 269:
    Line 270:
    Line 271:

    Source File: C:\inetpub\wwwroot\wss\VirtualDirectories\80\web.config Line: 269

    Version Information: Microsoft .NET Framework Version:2.0.50727.5485; ASP.NET Version:2.0.50727.5491

    Help needed to resolve this issue

Submit comment

Allowed HTML tags: <a href="http://google.com">google</a> <strong>bold</strong> <em>emphasized</em> <code>code</code> <blockquote>
quote
</blockquote>

Please fill in the captcha: * Time limit is exhausted. Please reload CAPTCHA.