Make Sharepoint fields ReadOnly in List Forms using Javascript

  • Add Content Editor Web Part in any of your New or edit list form.
  • Add javascript code shown below in any text file and add it some document library in your SharePoint site. In SetReadOnly method, pass html field type (input,textarea etc) as first argument and field Display name as second argument.
  • Modify Content Editor webpart to refer to this text file.
_spBodyOnLoadFunctionNames.push("makeFieldsReadOnly()"); 

function getTagFromIdentifierAndTitle(tagName, identifier, title) { 
  var len = identifier.length; 
  var tags = document.getElementsByTagName(tagName); 
  for (var i=0; i < tags.length; i++) { 
    var tempString = tags[i].id; 
    if (tags[i].title == title && (identifier == "" || tempString.indexOf(identifier) == tempString.length - len)) { 
      return tags[i]; 
    } 
  } 
  return null; 
} 
function makeFieldsReadOnly()
{ 
  setReadOnly('input','Text Field Display Name');
  setReadOnly('select','Dropdown Field DisplayName');
  setReadOnly('textarea','Multitext Field DisplayName' );
  setReadOnly('peoplepicker','PeoplePicker Field DisplayName');
}
function setReadOnly(type, name) { 
    //set local variables
    var blnSet = true;
    var txt;
    var tmpType = type;

    //change the tmpType
    if (tmpType == "date" || tmpType == "url") {
        tmpType = "input";
    }

    //get the element
    var element;
	if(type != 'peoplepicker')
	{
		element = getTagFromIdentifierAndTitle(tmpType, "", name); 
	}

    //create a new span tag
    var newP = document.createElement("span");

    //check what type of element
    if (type == "select") {
        //set the value
        txt = element.options[element.selectedIndex].text;
    }
    else if (type == "input" || type == "textarea") { 
        if (element.type == "checkbox") {
            //set the value
            txt = element.checked;
        }
        else {
            //set the value
            txt = element.value;
        }
    }
    else if (type == "date") {
        var tmp = "";
        //if there is a parent element
        if (element.parentElement) {
            //get images
            var tags = element.parentElement.parentElement.getElementsByTagName("img");

            //hide the iamges
            for (var i = 0; i < tags.length; i++) {
                tags[i].style.display = "none";
            }

            //get the drop down
            var sels = element.parentElement.parentElement.getElementsByTagName("select");

            //hide the drop down
            for (var i = 0; i < sels.length; i++) {
                tmp += " " + sels[i].value;
                sels[i].style.display = "none";
            }
        }
        //set the value 
        if (element.value != "") {
            txt = element.value + tmp;
        }
        else {
            txt = "";
        }
    }
    else if (type == "url") {
        //get the parent tags
        var tags = element.parentNode.getElementsByTagName("input");
        var description = "";

        //find the description
        for (var i = 0; i < tags.length; i++) {             
            if (tags[i].id.indexOf("Description") > -1) {
                description = tags[i].value;
            }
        }

        //set the default description
        if (description == "") {
            description = element.value;
        }

        //create the link
        var link = "" + description + "";

        //hide the parent node
        element.parentNode.style.display = "none";
        //add to the parent's parent
        element.parentNode.parentNode.innerHTML = link + " " + element.parentNode.parentNode.innerHTML;

        //do not auto generate
        blnSet = false;
    }
    else if (type == "peoplepicker") {
		var tr = GetFieldRow(name);
		var controls;
		controls = tr.getElementsByTagName("DIV"); 
		for(var k=0; k < controls.length; k++) { 				
                      if(controls[k].id.indexOf("UserField_upLevelDiv") > 0) { 
					txt = controls[k].innerText.trim();	
					txt = txt.replace(';','');	
					element = controls[k];
		  }
		}

		var hrefs = document.getElementsByTagName("A"); 
		for(var i=0; i < hrefs.length; i++) { 			
                             if(hrefs[i].id.indexOf("UserField_checkNames") > 0 || hrefs[i].id.indexOf("UserField_browse") > 0) { 
				hrefs[i].style.display = "none"; 
			}
		}
	}

	//should be auto generated
    if (blnSet) { 
        //create a new text node
        var newT = document.createTextNode(txt);

        //add the text node to the span tag's inner html
        newP.appendChild(newT);

        //add the new span tag before the element
        element.parentNode.insertBefore(newP, element);

        //set the element to invisible
        element.style.display = "none"; 
    }
}

function GetFieldRow(fieldLabel) { 
			var nobrs = document.getElementsByTagName("nobr");
			for(var i=0; i < nobrs.length ; i++) { 
				if (nobrs[i].innerText == fieldLabel) { 
					var tr = GetParentByTagName("TR", nobrs[i]);
					return tr;
				}
			}
		}

function GetParentByTagName(parentTagName, childElementObj) {
	var parent = childElementObj.parentNode;
	while(parent.tagName.toLowerCase() != parentTagName.toLowerCase()) {
		parent = parent.parentNode;
	}
	return parent;
}

Trackbacks

Leave a Comment

Your email address will not be published. Required fields are marked *