Home > SharePoint > SharePoint 2010 Custom List and Custom Form With Color Picker

SharePoint 2010 Custom List and Custom Form With Color Picker

Here’s how I incorporated a color picker in a custom list.

The end result looks like this:

image

 

I used the laktek color picker found here:

https://github.com/laktek/really-simple-color-picker

Create a blank SharePoint 2010 Solution and chose “Deploy as farm solution”

 

Add a new content type

 

image

 

Choose an “Item” base content type.

The end result should look something like below.  Notice that “Inherits” is set to “FALSE” and that custom “FormTemplates” are added under the “XMLDocuments” node.  For this posting I’ll just demonstrate the “New” form.

ml version="1.0" encoding="utf-8"?> <Elements xmlns="http://schemas.microsoft.com/sharepoint/"> <Field ID="{36231708-9678-4403-A8DE-5F18F7C2875A}" Name="Color" StaticName="Color" DisplayName="Color" Type="Text"></Field> <!-- Parent ContentType: Item (0x01) --> <ContentType ID="0x01005a7c9dfa042c49828097e34c1973ce35" Name="ColorPickerField - ColorPickerFieldCT" Group="Custom Content Types" Description="My Content Type" Inherits="FALSE" Version="0"> <FieldRefs> <!--Use Title field for Event Name--> <FieldRef ID="{fa564e0f-0c70-4ab9-b863-0177e6ddd247}" Name="EventName" DisplayName="Event Name"/> <FieldRef ID="{36231708-9678-4403-A8DE-5F18F7C2875A}" Name="Color" /> </FieldRefs> <XmlDocuments> <XmlDocument NamespaceURI="http://schemas.microsoft.com/sharepoint/v3/contenttype/forms"> <FormTemplates xmlns="http://schemas.microsoft.com/sharepoint/v3/contenttype/forms"> <Display>ColorPickerDsplForm</Display> <Edit>ColorPickerEditForm</Edit> <New>ColorPickerNewForm</New> </FormTemplates> </XmlDocument> </XmlDocuments> </ContentType> </Elements>

 

Add a”List Definition” based on the content type

 

image

 

Change the “Type” of the “generated” “list definition” to a unique type.  I set mine to “10002”.

image

In the Schema file copy the “FieldRef” nodes to the “ViewFields” in the“Main” view. This adds the fields to the default list view.

image

image

 

Add a “Layouts” mapped folder with the “laktek” files and a custom script

Here’s what my “layouts” looks like.  “colorPicker.css” and “jquery.colorPicker.js” are from the laktek download.

image

 

Here’s the “ColorScript.txt” (the <style> overrides the SharePoint .ms-long style allowing the textbox and colorPicker to exist on the same line)

<link type="text/css" href="/_layouts/ColorPickerField/colorPicker.css" rel="stylesheet" /> <script type="text/javascript" src="/_layouts/ColorPickerField/jquery-1.4.1.js"></script> <script language="javascript" type="text/javascript" src="/_layouts/ColorPickerField/jquery.colorPicker.js"></script> <script type="text/javascript"> $(document).ready(function () { $('.ColorPicker').colorPicker(); }); function ColorChanged() { var txt = $('#colorPicker_hex-0').val(); var fld = $("input[title='Color']"); fld[0].value = txt; } </script> <style> .ms-long {width:150px;font-family:Verdana, sans-serif;} </style>

 

Add a “Mapped” “CONTROLTEMPLATES” folder

Then add a user control that has the same name as your “New” form in the Content Type

image

Delete the code behind files and copy the markup below in the .ascx file.

Change the id  of the “SharePoint:RenderingTemplate” to the id under the “FormTemplates”  “New” node in the Content Type. In my case “ColorPickerNewForm”.

<%@ Control Language="C#" %> <%@ 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" %> <%@Register TagPrefix="wssuc" TagName="ToolBar" src="~/_controltemplates/ToolBar.ascx" %> <SharePoint:RenderingTemplate id="ColorPickerNewForm" runat="server"> <Template> </Template> </SharePoint:RenderingTemplate>

 

Build and Deploy the solution

Go to the SharePoint site and create a list from the list definition

 

image

 

Open SharePoint 2010 Designer

 

Go to “List and Libraries” and select the list.  Then edit the  “NewForm.aspx”.

 

DO NOT SAVE IT.  You’ll just copy some XML to your .ascx control.

image

 

Delete the web part below

image

 

Go to “Custom List Form…” and select your list

image

Add your list

image

Add a “Content Editor” webpart. Type in the URL of the Color Script in the layouts folder (or whatever location the script is in). For me I had to enable”Anonymous Authentication”  for the site in Central Admin for the script work in the layouts folder.

image

Copy the XML between the “ZoneTemplate” nodes.

Go back to Visual Studio and paste in between the “Template” node in the .ascx control under the “CONTROLTEMPLATES” mapped file that you created earlier

 

Do a search and replace of the guid in the ParameterBinding ListID “DefaultValue” attribute.  Replace with a blank. There should be six of them.

image

 

Find the node where the “FieldName” attribute is equal to your new field. In my case, “Color”. Add the “<div>” elements below around the “SharePoint:FormField” and the “SharePoint:FieldDescription”.

Add an input field with an “onchange()” event.

<td width="400px" valign="top" class="ms-formbody"> <div> <div style="float:left;"> <SharePoint:FormField runat="server" id="ff2{$Pos}" ControlMode="New" FieldName="Color" __designer:bind="{ddwrt:DataBind('i',concat('ff2',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Color')}"/> <SharePoint:FieldDescription runat="server" id="ff2description{$Pos}" FieldName="Color" ControlMode="New"/> </div> <div style="float:left;"> <input type="text" id="color1" name="color1" class="ColorPicker" onchange="ColorChanged();" ></input> </div> </div> </td>

Here’s what my .ascx XML looks like:

<%@ Control Language="C#" %> <%@ 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" %> <%@Register TagPrefix="wssuc" TagName="ToolBar" src="~/_controltemplates/ToolBar.ascx" %> <SharePoint:RenderingTemplate id="ColorPickerNewForm" runat="server"> <Template> <WebPartPages:DataFormWebPart runat="server" IsIncluded="True" NoDefaultStyle="TRUE" ViewFlag="8" Title="ColorList" PageType="PAGE_NEWFORM" ListName="" Default="FALSE" DisplayName="ColorList" __markuptype="vsattributemarkup" __WebPartId="{F29454C4-1049-4120-8615-F2744ED668B0}" partorder="2" id="g_f29454c4_1049_4120_8615_f2744ed668b0"> <DataSources> <SharePoint:SPDataSource runat="server" DataSourceMode="ListItem" UseInternalName="true" UseServerDataFormat="True" selectcommand="&lt;View&gt;&lt;Query&gt;&lt;Where&gt;&lt;Eq&gt;&lt;FieldRef Name=&quot;ContentType&quot;/&gt;&lt;Value Type=&quot;Text&quot;&gt;ColorPickerField - ColorPickerFieldCT&lt;/Value&gt;&lt;/Eq&gt;&lt;/Where&gt;&lt;/Query&gt;&lt;/View&gt;" id="ColorList2"><SelectParameters><WebPartPages:DataFormParameter Name="ListItemId" ParameterKey="ListItemId" PropertyName="ParameterValues" DefaultValue="0"/><WebPartPages:DataFormParameter Name="ListID" ParameterKey="ListID" PropertyName="ParameterValues" DefaultValue=""/><WebPartPages:DataFormParameter Name="MaximumRows" ParameterKey="MaximumRows" PropertyName="ParameterValues" DefaultValue="10"/></SelectParameters><DeleteParameters><WebPartPages:DataFormParameter Name="ListItemId" ParameterKey="ListItemId" PropertyName="ParameterValues" DefaultValue="0"/><WebPartPages:DataFormParameter Name="ListID" ParameterKey="ListID" PropertyName="ParameterValues" DefaultValue=""/></DeleteParameters><InsertParameters><WebPartPages:DataFormParameter Name="ListItemId" ParameterKey="ListItemId" PropertyName="ParameterValues" DefaultValue="0"/><WebPartPages:DataFormParameter Name="ListID" ParameterKey="ListID" PropertyName="ParameterValues" DefaultValue=""/></InsertParameters><UpdateParameters><WebPartPages:DataFormParameter Name="ListItemId" ParameterKey="ListItemId" PropertyName="ParameterValues" DefaultValue="0"/><WebPartPages:DataFormParameter Name="ListID" ParameterKey="ListID" PropertyName="ParameterValues" DefaultValue=""/></UpdateParameters></SharePoint:SPDataSource> </DataSources> <ParameterBindings> <ParameterBinding Name="ListItemId" Location="QueryString(ID)" DefaultValue="0"/> <ParameterBinding Name="ListID" Location="None" DefaultValue=""/> <ParameterBinding Name="MaximumRows" Location="None" DefaultValue="10"/> <ParameterBinding Name="dvt_apos" Location="Postback;Connection"/> <ParameterBinding Name="ManualRefresh" Location="WPProperty[ManualRefresh]"/> <ParameterBinding Name="UserID" Location="CAMLVariable" DefaultValue="CurrentUserName"/> <ParameterBinding Name="Today" Location="CAMLVariable" DefaultValue="CurrentDate"/> </ParameterBindings> <datafields>@ID,ID;@ContentType,Content Type;@Title,Title;@Modified,Modified;@Created,Created;@Author,Created By;@Editor,Modified By;@_UIVersionString,Version;@Attachments,Attachments;@File_x0020_Type,File Type;@FileLeafRef,Name (for use in forms);@FileDirRef,Path;@FSObjType,Item Type;@_HasCopyDestinations,Has Copy Destinations;@_CopySource,Copy Source;@ContentTypeId,Content Type ID;@_ModerationStatus,Approval Status;@_UIVersion,UI Version;@Created_x0020_Date,Created;@FileRef,URL Path;@ItemChildCount,Item Child Count;@FolderChildCount,Folder Child Count;@Color,Color;</datafields> <XSL> <xsl:stylesheet xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:dsp="http://schemas.microsoft.com/sharepoint/dsp" version="1.0" exclude-result-prefixes="xsl msxsl ddwrt" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:ddwrt2="urn:frontpage:internal"> <xsl:output method="html" indent="no"/> <xsl:decimal-format NaN=""/> <xsl:param name="dvt_apos">'</xsl:param> <xsl:param name="ManualRefresh"></xsl:param> <xsl:variable name="dvt_1_automode">0</xsl:variable> <xsl:template match="/" xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:dsp="http://schemas.microsoft.com/sharepoint/dsp" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:SharePoint="Microsoft.SharePoint.WebControls"> <xsl:choose> <xsl:when test="($ManualRefresh = 'True')"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td valign="top"> <xsl:call-template name="dvt_1"/> </td> <td width="1%" class="ms-vb" valign="top"> <img src="/_layouts/images/staticrefresh.gif" id="ManualRefresh" border="0" onclick="javascript: {ddwrt:GenFireServerEvent('__cancel')}" alt="Click here to refresh the dataview."/> </td> </tr> </table> </xsl:when> <xsl:otherwise> <xsl:call-template name="dvt_1"/> </xsl:otherwise> </xsl:choose> </xsl:template> <xsl:template name="dvt_1"> <xsl:variable name="dvt_StyleName">ListForm</xsl:variable> <xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row"/> <div> <span id="part1"> <table border="0" width="100%"> <xsl:call-template name="dvt_1.body"> <xsl:with-param name="Rows" select="$Rows"/> </xsl:call-template> </table> </span> <SharePoint:AttachmentUpload runat="server" ControlMode="New"/> <SharePoint:ItemHiddenVersion runat="server" ControlMode="New"/> </div> </xsl:template> <xsl:template name="dvt_1.body"> <xsl:param name="Rows"/> <tr> <td class="ms-toolbar" nowrap="nowrap"> <table> <tr> <td width="99%" class="ms-toolbar" nowrap="nowrap"><IMG SRC="/_layouts/images/blank.gif" width="1" height="18"/></td> <td class="ms-toolbar" nowrap="nowrap"> <SharePoint:SaveButton runat="server" ControlMode="New" id="savebutton1"/> </td> <td class="ms-separator"> </td> <td class="ms-toolbar" nowrap="nowrap" align="right"> <SharePoint:GoBackButton runat="server" ControlMode="New" id="gobackbutton1"/> </td> </tr> </table> </td> </tr> <tr> <td class="ms-toolbar" nowrap="nowrap"> <SharePoint:FormToolBar runat="server" ControlMode="New"/> </td> </tr> <xsl:call-template name="dvt_1.rowedit"> <xsl:with-param name="Pos" select="concat('_', position())" /> </xsl:call-template> <tr> <td class="ms-toolbar" nowrap="nowrap"> <table> <tr> <td width="99%" class="ms-toolbar" nowrap="nowrap"><IMG SRC="/_layouts/images/blank.gif" width="1" height="18"/></td> <td class="ms-toolbar" nowrap="nowrap"> <SharePoint:SaveButton runat="server" ControlMode="New" id="savebutton2"/> </td> <td class="ms-separator"> </td> <td class="ms-toolbar" nowrap="nowrap" align="right"> <SharePoint:GoBackButton runat="server" ControlMode="New" id="gobackbutton2"/> </td> </tr> </table> </td> </tr> </xsl:template> <xsl:template name="dvt_1.rowedit"> <xsl:param name="Pos" select="position()"/> <tr> <td> <table border="0" cellspacing="0" width="100%"> <tr> <td width="190px" valign="top" class="ms-formlabel"> <H3 class="ms-standardheader"> <nobr>Event Name<span class="ms-formvalidation"> *</span> </nobr> </H3> </td> <td width="400px" valign="top" class="ms-formbody"> <SharePoint:FormField runat="server" id="ff1{$Pos}" ControlMode="New" FieldName="Title" __designer:bind="{ddwrt:DataBind('i',concat('ff1',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Title')}"/> <SharePoint:FieldDescription runat="server" id="ff1description{$Pos}" FieldName="Title" ControlMode="New"/> </td> </tr> <tr> <td width="190px" valign="top" class="ms-formlabel"> <H3 class="ms-standardheader"> <nobr>Color</nobr> </H3> </td> <td width="400px" valign="top" class="ms-formbody"> <div> <div style="float:left;"> <SharePoint:FormField runat="server" id="ff2{$Pos}" ControlMode="New" FieldName="Color" __designer:bind="{ddwrt:DataBind('i',concat('ff2',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Color')}"/> <SharePoint:FieldDescription runat="server" id="ff2description{$Pos}" FieldName="Color" ControlMode="New"/> </div> <div style="float:left;"> <input type="text" id="color1" name="color1" class="ColorPicker" onchange="ColorChanged();" ></input> </div> </div> </td> </tr> <tr style="height:75px;"></tr> <tr id="idAttachmentsRow"> <td nowrap="true" valign="top" class="ms-formlabel" width="20%"> <SharePoint:FieldLabel ControlMode="New" FieldName="Attachments" runat="server"/> </td> <td valign="top" class="ms-formbody" width="80%"> <SharePoint:FormField runat="server" id="AttachmentsField" ControlMode="New" FieldName="Attachments" __designer:bind="{ddwrt:DataBind('i','AttachmentsField','Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Attachments')}"/> <script> var elm = document.getElementById(&quot;idAttachmentsTable&quot;); if (elm == null || elm.rows.length == 0) document.getElementById(&quot;idAttachmentsRow&quot;).style.display=&apos;none&apos;; </script> </td> </tr> <xsl:if test="$dvt_1_automode = '1'" ddwrt:cf_ignore="1"> <tr> <td colspan="99" class="ms-vb"> <span ddwrt:amkeyfield="ID" ddwrt:amkeyvalue="ddwrt:EscapeDelims(string(@ID))" ddwrt:ammode="view"></span> </td> </tr> </xsl:if> </table> </td> </tr> </xsl:template> </xsl:stylesheet> </XSL> </WebPartPages:DataFormWebPart> <WebPartPages:ContentEditorWebPart ID="ContentEditorWebPart1" webpart="true" runat="server" __webpartid="{3C0DD773-BEBC-4367-BD24-1E66B7AF042B}"> <WebPart xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns="http://schemas.microsoft.com/WebPart/v2"> <Title>Content Editor</Title> <FrameType>None</FrameType> <Description>Allows authors to enter rich text content.</Description> <IsIncluded>true</IsIncluded> <PartOrder>4</PartOrder> <FrameState>Normal</FrameState> <Height /> <Width /> <AllowRemove>true</AllowRemove> <AllowZoneChange>true</AllowZoneChange> <AllowMinimize>true</AllowMinimize> <AllowConnect>true</AllowConnect> <AllowEdit>true</AllowEdit> <AllowHide>true</AllowHide> <IsVisible>true</IsVisible> <DetailLink /> <HelpLink /> <HelpMode>Modeless</HelpMode> <Dir>Default</Dir> <PartImageSmall /> <MissingAssembly>Cannot import this Web Part.</MissingAssembly> <PartImageLarge>/_layouts/images/mscontl.gif</PartImageLarge> <IsIncludedFilter /> <ExportControlledProperties>true</ExportControlledProperties> <ConnectionID>00000000-0000-0000-0000-000000000000</ConnectionID> <ID>g_3c0dd773_bebc_4367_bd24_1e66b7af042b</ID> <ContentLink xmlns="http://schemas.microsoft.com/WebPart/v2/ContentEditor">http://intranet.contoso.com/_layouts/ColorPickerField/ColorScript.txt</ContentLink> <Content xmlns="http://schemas.microsoft.com/WebPart/v2/ContentEditor" /> <PartStorage xmlns="http://schemas.microsoft.com/WebPart/v2/ContentEditor" /> </WebPart></WebPartPages:ContentEditorWebPart> </Template> </SharePoint:RenderingTemplate>

Here’s what my solution looks like:

image

 

Deploy and go to your new list

Add new item and you should get the custom form with the color picker.

 

Helpful Links:

http://ikarstein.wordpress.com/2010/12/29/walkthrough-create-custom-sharepoint-2010-list-form-for-deployment-in-a-visual-studio-2010-project/

http://www.codeproject.com/Articles/223431/Custom-SharePoint-List-Forms

Advertisements
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: