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;
}
Leave a Comment