Bind ColorPicker Control to the sharepoint List field using JSlink

Hello Developers…

I am back to share something new things with you guys. and i am pleasure to sharing.

Today , First of all i m explaining you what is the business requirement .

Definition : I have created custom list(ColorList) in share point  . In this there are two column Title and Color. in the Color column type is Text . now i want to render Color column with color-picker control and save the color code to the share point list  with # . I have uploaded image below.


You can see what i want as an output.  right ?

Solution : 

first of all i have searched lots of colorpicker.js . At last i have download jquery.colorpicker.js and used it because this Js file give me almost all the functionality which is i required.


You can find of colorpicker.js from this link .

Once JS is decided upload JS file to share point _catalog folder with proper naming convention . Open Your url in share point designer and Click on “All Files” -> Click on “_catalog” -> Drag An Drop Your file to this folder. Folder is automatically uploaded to the your share point server.

You have to all necessary files upload in share point.

List of files you have to include in share point.

1) colorpicker.css



4)Images of Color picker and layout js in proper folder.

now, open your SharePoint Page on which you want to apply Js link . That must be One or more from the three pages.




i have write on NewForms.aspx to fulfill requirement.

Now open NewForms in Edit mode.


Right Click On Edit Web part -> select Miscellaneous -> Add Jslink to JSlink Tab -> Save ->Stop editing.

This is the process to bind jslink to NewForm.aspx.

Now i am explaining , What is JSlink in share point ?

-> Jslink  is simple java script to render your control with more user friendliness and attractive. you can use Jsquery,AngualrJS whatever you ant to implement.It’s a purely combination of CSS and JS File for client side rendering.

->You can apply lots of combination to the share point default pages .

What Jslink do excatly?

-> Jslink simply override your control with share-point control .

Now i m coming on code,


(function () {
// Intialize the variables for overrides objects
var overrideCtx = {};
overrideCtx.Templates = {};
//overrideCtx.OnPostRender = [];
//overrideCtx.OnPostRender.push(function(){OnPostRenderFunc(); });
// Override field data
overrideCtx.Templates.Fields = {
‘Color’:   //Color is our field name which will replace by the color picker control .
‘NewForm’: ingredientsNewAndEdit // ingredientsNewAndEdit function to render our HTMl to sharepoint Newforms,aspx
overrideCtx.OnPostRender = postRenderHandler;
// Register the override of the field
function ingredientsNewAndEdit(Ctx)
var string = “/_catalogs/masterpage/layout.css,/_catalogs/masterpage/colorpicker.css”
for(var i=0 ; i<string.split(“,”).length;i++)
var link = document.createElement(‘link’);
link.id = “Css” + i;
link.rel = ‘stylesheet’;
link.type = ‘text/css’;
link.href = string.split(“,”)[i].toString();
document.getElementsByTagName(‘head’)[0].appendChild(link); //Load CSS file pro-grammatically.
var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx);
var FieldHtml=”<p><div id=’colorSelector’><div style=’background-color: #0000ff’></div></div></p>”
return FieldHtml;

function postRenderHandler(ctx)
if(ctx.ListSchema.Field[0].Name == “Color”)
color: ‘#0000ff’,
onShow: function (colpkr) {
return false;
onHide: function (colpkr) {
return false;
onChange: function (hsb, hex, rgb) {
$(‘#colorSelector div ‘).css(‘backgroundColor’, ‘#’ + hex);




Once your HTMl Control render successfully on page after that you can get that control using this property with out _postback, So you can manipulate with the control’s value property .

It’s amazing datepicker control .


You can see the output.

If have any query or suggestion  regarding code , feel free to ask.


Happy Coding 🙂