I am using SP2010 and I have a javascript that I am using to change color of a button in my document library. I have added an input button in a library column, which is calling javascript onclick. My problem is changing the color of first item button but not letting me change the button color of another item button. Below is the script I am using, I copied it from one of the sites. I am not really good at coding but I understand this requires a little bit of tweaking and event-listener to save the color of the button. I don't understand why I can't change the button color of other buttons for other items.

My requirements are Button changing color and once its changed unless again clicked on will not change the color upon refresh or closing of page. I posted a question before but I didn't want to use the same thread so creating a new question (I hope its okay). Thanks so much for all the help.

E.G. Columns I have currently in my document library Type, Name, Button, Date

function setColor(btn,color){

  var property=document.getElementById(btn);
  if (window.getComputedStyle(property).backgroundColor == 'rgb(244, 113, 33)') {
  else {
    property.style.backgroundColor = "#f47121";

enter image description here

Here is what I am looking for, I have the view above and all I want user to do click on red button and it will turn green and it will save with that color so next user will see that button is green.

  • Might not be related; I have had issues where getComputedStyle could not get the DOM properties and a short delay before execution with window.setTimeout solved it. I never investigated the reason, suspect something Minimal Download Strategy or other SP DOM control issue – Danny '365CSI' Engelman Apr 11 '16 at 20:00
  • How can you identify the other items? Based on id or other field value? Do you want to change color for all items button? – Viraj Gorajia Apr 12 '16 at 8:20
  • It will be based on id I suppose and that is where I am kind of stuck. My boss is not technical neither he wants to go into edit menu on top of all he is using safari and would not change to windows. So in order for me to make SharePoint work for him, I have to create two buttons, once he reads a document for that library he can click on the button which will be red to turn green to let everyone know he has read the document. There will be a lot of documents and each document/item will have a button. – humi Apr 12 '16 at 13:32
  • This is a huge waste of time when you could just create a checkbox to use in datasheet view for him to indicate that he's read it, and then group the view on this field. – Erin L Apr 14 '16 at 20:21
  • He is using Safari as his Brower on his IPad, so datasheet would not work. I have tried everything before I started looking into thos solution – humi Apr 15 '16 at 10:27
var count=0;
(function () 
{    var favoriteColorContext = {};

    // You can provide templates for:
    // View, DisplayForm, EditForm and NewForm
    favoriteColorContext.Templates = {};
    favoriteColorContext.Templates.Fields = {
        "Button": {
            "View": favoriteColorViewTemplate


// The favoriteColorViewTemplate provides the rendering logic
// the custom field type when it is displayed in the view form.
function favoriteColorViewTemplate(ctx) 
   var itemID = ctx.CurrentItem.ID;
   return "<div style='text-align:center;'><input type='button' style='background-color:red' onClick='javascript:OpenPopup("+itemID+")' value='Update'/></div>";
    return "<div style='text-align:center;'><input type='button' style='background-color:blue' onClick='javascript:OpenPopup("+itemID+")' value='Update'/></div>";
function OpenPopup(itemID) 
            title: 'About',     
            showClose: true,
            width: 450,
            height: 320, 
            url: "/_layouts/SolutionFiles/about.aspx?ID="+itemID,    
            {var evtAjax = {currentCtx: ctx,csrAjaxRefresh: true};
            ctx.skipNextAnimation = true;
            AJAXRefreshView(evtAjax, SP.UI.DialogResult.OK);
  1. Make one js file (ex. buttoncolor.js) and add above code.
  2. Upload js file to document library.
  3. Edit list page and edit webpart property.
  4. Add js server relative path with specific prefix in JS Link textbox from Miscellaneous.

~sitecollection/Shared Documents/buttoncolor.js

  1. If you close page using your custom code, do count= 0; at last.
  • Thank you for taking your time to help me, I will try this today and will let you know if any questions. – humi Apr 12 '16 at 13:33
  • It actually didn't work for me. I tried this code and it is not changing color for my buttons at all. I copy pasted the script added script header and and closing but it doesn't do anything for me. Am I missing something? – humi Apr 13 '16 at 13:41
  • Don't add script in script editor. Just follow above steps one by one. It will definitely work. – Viraj Gorajia Apr 14 '16 at 6:00
  • I am trying the steps and adding link under miscellaneous in XSL Link box and its returning an error on the page Unavle to display this webpart. To troubleshoot the problem, open this web page in a Microsoft SharePoint Foundation-compatible HTML editor such as Microsoft SharePoint Designer. – humi Apr 14 '16 at 19:01
  • I don't think JSLink works in 2010 – Erin L Apr 14 '16 at 20:17

Not the answer you're looking for? Browse other questions tagged or ask your own question.