Edit SharePoint Field properties, including lookup column list association, with client side code only

Guest Author: Alexander Bautz
SharePoint JavaScripts

Alexander has updated the code to include “a small fix regarding showing the “Title” field as an available field, changed to DisplayName for the Field label and to add the “Title” column as an editabel column”.

This code enables you to edit the following field properties using jQuery only:

• Hidden: Specifies whether the field is displayed in the list.
• ReadOnly: Specifies whether values in the field can be modified.
• Required: Determines whether the field requires values.
• Show In NewForm: Specifies whether the field is displayed in the form that is used to create list items.
• Show In DispForm: Specifies whether the field is displayed in the form for displaying list items.
• Show In EditForm: Specifies whether the field is displayed in the form that is used to edit list items.
• Show In List Settings: Specifies whether the field is displayed in the page for customizing list settings.
• Show In Version History: Specifies whether the field is displayed in the page for viewing list item versions.
• Show In View Forms: Specifies whether the field is displayed in pages that are used to view list data.
• Lookup column list association: Change the list association for a lookup column – Note: If you do this, all existing elements in this column will be lost.

Create a WebPartPage, insert a CEWP, and paste this code (change the reference to jQuery):

};
wrapSoapRequest(wsBaseUrl + ‘lists.asmx’, ‘http://schemas.microsoft.com/sharepoint/soap/GetListCollection’, xmlStr, function(data){
if ($(’ErrorText’, data).length > 0) {
result.success = false;
} else {
result.success = true;
var arrTypesToSkip = ['110','111','112','113','114','115','116','117','118'];
$(’List’, data).each(function(){
if($.inArray($(this).attr(’ServerTemplate’),arrTypesToSkip)==-1){
result.lists.push($(this));
}
});
}
});
return result;
}

function getFieldProperties(){
$("#insertListfieldControlsHere").html(”);
listGuid = $("#insertListCollectionHere").find(’option:selected’).val();

var list = customGetList(listGuid);
listName = list.name;
var textStyleHeader = "style=’border-bottom:1px silver solid;border-right:1px silver solid;text-align:center;padding:0 10 0 3′";
var textStyleBody = "style=’border-bottom:1px silver solid;border-right:1px silver solid;text-align:left’";
var tHeader = ”;
tHeader += "<tr valign=’top’ align=’left’ style=’background-color:#CCCCCC’>";
tHeader += "<th style=’border-bottom:1px silver solid;padding:0 10 0 3′>Name</th>";
tHeader += "<th title=’Specifies whether the field is displayed in the list.’ "+textStyleHeader+">Hidden</th>";
tHeader += "<th title=’Specifies whether values in the field can be modified.’ "+textStyleHeader+">ReadOnly</th>";
tHeader += "<th title=’Determines whether the field requires values.’ "+textStyleHeader+">Required</th>";
tHeader += "<th title=’Specifies whether the field is displayed in the form that is used to create list items.’ "+textStyleHeader+">Show In NewForm</th>";
tHeader += "<th title=’Specifies whether the field is displayed in the form for displaying list items.’ "+textStyleHeader+">Show In DispForm</th>";
tHeader += "<th title=’Specifies whether the field is displayed in the form that is used to edit list items.’ "+textStyleHeader+">Show In EditForm</th>";
tHeader += "<th title=’Specifies whether the field is displayed in the page for customizing list settings.’ "+textStyleHeader+">Show In List Settings</th>";
tHeader += "<th title=’Specifies whether the field is displayed in the page for viewing list item versions.’ "+textStyleHeader+">Show In Version History</th>";
tHeader += "<th title=’Specifies whether the field is displayed in pages that are used to view list data.’ "+textStyleHeader+">Show In View Forms</th>";
tHeader += "<th title=’Change the list association for a lookup column’ "+textStyleHeader+">Lookup column list association</th>";
tHeader += "<th title=” "+textStyleHeader+">Save changes</th>";
tHeader += "</tr>";

$("#insertListfieldControlsHere").append(tHeader);
var tbody = ”;
fieldsObj = {};
$.each(list.fields,function(i,field){
var name = field.attr(’Name’);
fieldsObj[name]=field;
var dispName = field.attr(’DisplayName’);
var fieldType = field.attr(’Type’);
var tdStr = "<td style=’border-bottom:1px silver solid;border-right:1px silver solid;text-align:left;vertical-align:top;padding:2 5 0 3′>"+dispName+"</td>";
// Hidden
tdStr += "<td "+textStyleBody+">"+
"<input type=’radio’ name=’"+name+"_hidden’ propName=’Hidden’ value=’TRUE’ /><label>Yes</label><br />"+
"<input type=’radio’ name=’"+name+"_hidden’ propName=’Hidden’ value=’FALSE’ /><label>No</label><br />"+
"</td>";
// ReadOnly
tdStr += "<td "+textStyleBody+">"+
"<input type=’radio’ name=’"+name+"_readOnly’ propName=’ReadOnly’ value=’TRUE’ /><label>Yes</label><br />"+
"<input type=’radio’ name=’"+name+"_readOnly’ propName=’ReadOnly’ value=’FALSE’ /><label>No</label><br />"+
"</td>";
// Required
tdStr += "<td "+textStyleBody+">"+
"<input type=’radio’ name=’"+name+"_required’ propName=’Required’ value=’TRUE’ /><label>Yes</label><br />"+
"<input type=’radio’ name=’"+name+"_required’ propName=’Required’ value=’FALSE’ /><label>No</label><br />"+
"</td>";
// ShowInNewForm
tdStr += "<td "+textStyleBody+">"+
"<input type=’radio’ name=’"+name+"_showInNewForm’ propName=’ShowInNewForm’ value=’TRUE’ /><label>Yes</label><br />"+
"<input type=’radio’ name=’"+name+"_showInNewForm’ propName=’ShowInNewForm’ value=’FALSE’ /><label>No</label><br />"+
"</td>";
// ShowInDispForm
tdStr += "<td "+textStyleBody+">"+
"<input type=’radio’ name=’"+name+"_showInDisplayForm’ propName=’ShowInDisplayForm’ value=’TRUE’ /><label>Yes</label><br />"+
"<input type=’radio’ name=’"+name+"_showInDisplayForm’ propName=’ShowInDisplayForm’ value=’FALSE’ /><label>No</label><br />"+
"</td>";
// ShowInEditForm
tdStr += "<td "+textStyleBody+">"+
"<input type=’radio’ name=’"+name+"_showInEditForm’ propName=’ShowInEditForm’ value=’TRUE’ /><label>Yes</label><br />"+
"<input type=’radio’ name=’"+name+"_showInEditForm’ propName=’ShowInEditForm’ value=’FALSE’ /><label>No</label><br />"+
"</td>";
// ShowInListSettings
tdStr += "<td "+textStyleBody+">"+
"<input type=’radio’ name=’"+name+"_showInListSettings’ propName=’ShowInListSettings’ value=’TRUE’ /><label>Yes</label><br />"+
"<input type=’radio’ name=’"+name+"_showInListSettings’ propName=’ShowInListSettings’ value=’FALSE’ /><label>No</label><br />"+
"</td>";
// ShowInVersionHistory
tdStr += "<td "+textStyleBody+">"+
"<input type=’radio’ name=’"+name+"_showInVersionHistory’ propName=’ShowInVersionHistory’ value=’TRUE’ /><label>Yes</label><br />"+
"<input type=’radio’ name=’"+name+"_showInVersionHistory’ propName=’ShowInVersionHistory’ value=’FALSE’ /><label>No</label><br />"+
"</td>";
// ShowInViewForms
tdStr += "<td "+textStyleBody+">"+
"<input type=’radio’ name=’"+name+"_showInViewForms’ propName=’ShowInViewForms’ value=’TRUE’ /><label>Yes</label><br />"+
"<input type=’radio’ name=’"+name+"_showInViewForms’ propName=’ShowInViewForms’ value=’FALSE’ /><label>No</label><br />"+
"</td>";
// Lookup columns change list assosiation
if($(this).attr(’Type’)==’Lookup’ || $(this).attr(’Type’)==’LookupMulti’ && $(this).attr(’List’)!=undefined){
tdStr += "<td "+textStyleBody+">"+listSelectLookupReassosiation+"</td>";
}else{
tdStr += "<td "+textStyleBody+">&nbsp;</td>";
}

// Save changes button
tdStr+="<td style=’border-bottom:1px silver solid;text-align:center’><input onclick=’javascript:submitChangedFieldProperties(\"tr_"+name+"\")’ type=’button’ value=’save’></td>";

// Append to table
$("#insertListfieldControlsHere").append("<tr id=’tr_"+name+"’ name=’"+name+"’ dispName=’"+dispName+"’ fieldType=’"+fieldType+"’>"+tdStr+"</tr>");

// Lookup column list re-association
if($(this).attr(’Type’)==’Lookup’ || $(this).attr(’Type’)==’LookupMulti’ && $(this).attr(’List’)!=undefined){
var currentListAssociation = $(this).attr(’List’).toLowerCase();
$("#insertListfieldControlsHere tr[id='tr_"+name+"'] select[propName='List'] option").each(function(i,opt){
if(opt.value.toLowerCase()==currentListAssociation){
opt.selected=true;
}
});
}

// Check the correct radio button for existing properties
// Hidden
var hidden = $(this).attr(’Hidden’);
if(hidden!=’undefined’){
$("#insertListfieldControlsHere input[name='"+name+"_hidden'][value='"+hidden+"']").attr(’checked’,true);
}
// ReadOnly
var readOnly = $(this).attr(’ReadOnly’);
if(readOnly!=’undefined’){
$("#insertListfieldControlsHere input[name='"+name+"_readOnly'][value='"+readOnly+"']").attr(’checked’,true);
}
// Required
var required = $(this).attr(’Required’);
if(required!=’undefined’){
$("#insertListfieldControlsHere input[name='"+name+"_required'][value='"+required+"']").attr(’checked’,true);
}
// ShowInNewForm
var newForm = $(this).attr(’ShowInNewForm’);
if(newForm!=’undefined’){
$("#insertListfieldControlsHere input[name='"+name+"_showInNewForm'][value='"+newForm+"']").attr(’checked’,true);
}
// ShowInDispForm
var dispForm = $(this).attr(’ShowInDisplayForm’);
if(dispForm!=’undefined’){
$("#insertListfieldControlsHere input[name='"+name+"_showInDisplayForm'][value='"+dispForm+"']").attr(’checked’,true);
}
// ShowInEditForm
var editForm = $(this).attr(’ShowInEditForm’);
if(editForm!=’undefined’){
$("#insertListfieldControlsHere input[name='"+name+"_showInEditForm'][value='"+editForm+"']").attr(’checked’,true);
}
// ShowInListSettings
var listSettings = $(this).attr(’ShowInListSettings’);
if(listSettings!=’undefined’){
$("#insertListfieldControlsHere input[name='"+name+"_showInListSettings'][value='"+listSettings+"']").attr(’checked’,true);
}
// ShowInVersionHistory
var versionHistory = $(this).attr(’ShowInVersionHistory’);
if(versionHistory!=’undefined’){
$("#insertListfieldControlsHere input[name='"+name+"_showInVersionHistory'][value='"+versionHistory+"']").attr(’checked’,true);
}
// ShowInViewForms
var viewForms = $(this).attr(’ShowInViewForms’);
if(viewForms!=’undefined’){
$("#insertListfieldControlsHere input[name='"+name+"_showInViewForms'][value='"+viewForms+"']").attr(’checked’,true);
}
});
}

function customGetList(listName){
xmlStr = [];
xmlStr.push(’<GetList xmlns="http://schemas.microsoft.com/sharepoint/soap/">’);
xmlStr.push(’<listName>’ + listName + ‘</listName>’);
xmlStr.push(’</GetList>’);
xmlStr = xmlStr.join(”);
var result = {success:false,fields:[]};
wrapSoapRequest(wsBaseUrl + ‘lists.asmx’, ‘http://schemas.microsoft.com/sharepoint/soap/GetList’, xmlStr, function(data){
if($(’ErrorText’, data).length > 0) {
result.success = false;
}else{
result.success = true;
result.name = $(’List’, data).attr(’Name’);
var arrOfTypesToSkip = ['Computed','Calculated'];
$(’Field’, data).each(function(){
// Title field
if($(this).attr(’StaticName’)==’Title’){
result.fields.push($(this));
}else if($(this).attr(’FromBaseType’)!=’TRUE’ && $(this).attr(’Sealed’)!=’TRUE’ && $(this).attr(’DisplayName’)!=undefined && $.inArray($(this).attr(’Type’),arrOfTypesToSkip)==-1){
result.fields.push($(this));
}
});
}
});
return result;
}

function submitChangedFieldProperties(trId){
var trObj = $("#"+trId);
var name = trObj.attr(’name’);
var currFieldObj = fieldsObj[name];
var changed = false;
trObj.find(’input:radio:checked’).each(function(){
var propName = $(this).attr(’propName’);
var checked = $(this).attr(’checked’);
var val = $(this).val();
if(currFieldObj.attr(propName)!=val){
currFieldObj.attr(propName,val);
changed = true;
}
});
// Lookup column list re-association
trObj.find(’select option:selected’).each(function(){
var propName = $(this).parent().attr(’propName’);
var val = $(this).val();
if(currFieldObj.attr(propName)!=val && val!=”){
currFieldObj.attr(propName,val);
changed = true;
}
});

// Convert xml object to string
if(window.ActiveXObject){
var stringFromXML = currFieldObj[0].xml;
}else{
var stringFromXML = (new XMLSerializer()).serializeToString(currFieldObj[0]);
}

if(changed){
var saveOK = onclickUpdateFieldProperties(listName,stringFromXML);
if(saveOK.success){
trObj.find(’input:button’).hide().parent().html("<span>Saved OK</span>").parent().css({’background-color’:'#A6D785′});
trObj.find(’input:button’).attr(’disabled’,true);
}else if(!saveOK.success){
trObj.find(’input:button’).hide().parent().html("<span>Error occured</span>").parent().css({’background-color’:'#F08080′});
trObj.find(’input:button’).attr(’disabled’,true);
}
}else{
alert("You haven’t made any changes!");
}
}

function onclickUpdateFieldProperties(listName,fieldXML){
xmlStr = [];
xmlStr.push(’<UpdateList xmlns="http://schemas.microsoft.com/sharepoint/soap/">’);
xmlStr.push(’<listName>’ + listName + ‘</listName>’);
xmlStr.push(’<listProperties><List/></listProperties>’);
xmlStr.push(’<newFields><Fields></Fields></newFields>’);
xmlStr.push(’<updateFields>’);
xmlStr.push(’<Fields>’);
xmlStr.push(’<Method ID="1">’);
xmlStr.push(fieldXML);
xmlStr.push(’</Method>’);
xmlStr.push(’</Fields>’);
xmlStr.push(’</updateFields>’);
xmlStr.push(’<deleteFields><Fields></Fields></deleteFields>’);
xmlStr.push(’</UpdateList>’);
xmlStr = xmlStr.join(”);

var result = {success:false};
wrapSoapRequest(wsBaseUrl + ‘lists.asmx’, ‘http://schemas.microsoft.com/sharepoint/soap/UpdateList’, xmlStr, function(data){
if ($(’ErrorText’, data).length > 0) {
result.success = false;
} else {
result.success = true;
}
});
return result;
}

function wrapSoapRequest(webserviceUrl,requestHeader,soapBody,successFunc){
var xmlWrap = [];
xmlWrap.push("<?xml version=’1.0′ encoding=’utf-8′?>");
xmlWrap.push("<soap:Envelope xmlns:xsi=’http://www.w3.org/2001/XMLSchema-instance’ xmlns:xsd=’http://www.w3.org/2001/XMLSchema’ xmlns:soap=’http://schemas.xmlsoap.org/soap/envelope/’>");
xmlWrap.push("<soap:Body>");
xmlWrap.push(soapBody);
xmlWrap.push("</soap:Body>");
xmlWrap.push("</soap:Envelope>");
xmlWrap = xmlWrap.join(”);
$.ajax({
async:false,
type:"POST",
url:webserviceUrl,
contentType:"text/xml; charset=utf-8",
processData:false,
data:xmlWrap,
dataType:"xml",
beforeSend:function(xhr){
xhr.setRequestHeader(’SOAPAction’,requestHeader);
},
success:successFunc
});
}
</script>

Guest Author: Alexander Bautz
SharePoint JavaScripts

Alexander Bautz is a SharePoint consultant/developer (mainly JavaScript/jQuery solution) living in Norway. Alexander spends a lot of his spare time blogging on the same topics. His focus area is "end user customizations" with no (or as little as possible) server side code.