Add a color picker to your SharePoint list using JSLink

Have you ever wanted to add a color picker to a field in your SharePoint list? When I was creating my GTD Dashboard solution I had a list that contained a hex color code field that I would later use to dynamically style another list using that color value.

Now I’m pretty savvy in graphic design programs and can easily extract the hex color from an image. But I thought, wouldn’t it be much easier to select the color from a popup color picker dialog and have it automatically derive the hex code for me?

Well I found out that it’s really very easy to do this in SharePoint with the help of the JSColor JavaScript plugin and JSLink.

What is JSColor?

JSColor is a very easy-to-use color picker for your HTML forms. You simply refer to a JavaScript file and add a class to the desired input fields. That’s it. And it’s very easy to implement inside of SharePoint using the client-side object model and JSLink.

Before we see how to implement this, let’s take a look at the end result. When adding or editing an item, if you click anywhere inside the Color input box, the color picker will pop up. And after clicking anywhere inside the color box, the appropriate hex code will appear as the value for the Color field.

Implementing the Color Picker

To implement the color picker, follow these steps:

1. The first thing you must do is download the JSColor files from the JSColor web site.
2. Unzip the files and upload the JSColor.js file and the images to your Site Assets library. If that library doesn’t exist, you can create one. Or you can upload it to any library that you wish. You’ll just need to make a note where it’s at because you’ll have to update the location in the following code.
3. Then you’ll need to copy the JavaScript code (at the bottom of this post) into Notepad and save it as AddColorPicker.js. Make sure to save it with a .js extension, NOT a .txt extension. You will need to tweak the code before saving if you uploaded the JSColor.js file to a different library in your site.
4. Upload the file you just saved to the Site Assets library (or wherever you saved the JSColor.js file to).
5. Add a reference to your JavaScript file in the JSLink property of the form web part on the Edit and/or Add forms of your list.

To add a reference to your JavaScript file on your Add and Edit forms, open either form in Edit mode, and go into the web part properties:

In the web part properties, expand the Miscellaneous section at the bottom, and enter the path to the JavaScript file, for example ~site/SiteAssets/AddColorPicker.js. If you changed the location or name of the file, you’ll have to update accordingly.

Below is the code you can copy for step 3. This is the same code I demoed at the Collab365 Conference, hence the reference to it in the code.

Again I am assuming that you will upload this file to your Site Assets library. If that is not the case, be sure to update line 7. Also, my color field is named Color, so if the field you’re referencing is named something else, then you’ll also have to update line 12.

var Collab365 = Collab365 || {};

Collab365.RenderColorField = function () {

(window.jQuery || document.write('<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"><\/script>')); 

document.write('<script src="../../SiteAssets/jscolor.js"><\/script>'); 

    var ctx = {};
    ctx.Templates = {};
    ctx.Templates.Fields = {
      Color: {
        DisplayForm: null,
        EditForm: Collab365.AddColorPicker,
        NewForm: Collab365.AddColorPicker,
        View: null
      }
    };

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(ctx);
};
 
Collab365.AddColorPicker = function (ctx) {
    
    var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx);

    RegisterCallBacks(formCtx);

    var color = ctx.CurrentFieldValue ? ctx.CurrentFieldValue.toString() : null;
    var html;
       
    html = "<input type='text' value='" + color + "' maxlength='255' id='ColorField' title='Color' style='ime-mode : ' class='jscolor ms-long ms-spellcheck-true'>";

    return html;
};

function RegisterCallBacks(formCtx) {
    //This is what happens when the user clicks save\submit
    formCtx.registerGetValueCallback(formCtx.fieldName, function () {
        //get the choosen value from the Color element
        var color = document.getElementById("ColorField").value;

        return "#" + color;
    });
}
 
Collab365.RenderColorField();