Alter or Style SharePoint List forms (New, Edit and Display)

With the JS code below you can modify a SharePoint form view to your wishes. I commented what is important and highlighted such code and HTML with the green color.

In the example below there is one part that I have to explain a little better:

$(“.ms-formtable tr td.ms-formlabel h3.ms-standardheader a[name=’SPBookmark_your_field_id’]”).parent().parent().parent().children(“td.ms-formbody”)

The “parent.parent.parent.children” part means that we need to get the cell with the actual value. The reason why I did not try to directly to get the value with jquery but went to the value through a work around is because I had problem getting the value. The value is populated by SharePoint javascript meaning that I was not able to find a good way to identify the exact table cell where a particular value of a field resided. If you have a better solution please let me know in the comments, thx :).

JQuery code to find and perform styling and possible data alteration to a Display form table cell(s):

var SPFormsFunctionalities = {
AlterAccountsLedgerDisplayForm: function () {
// Make sure that we only operate on SP Display Forms and nothing else
if (window.location.href.indexOf(“DispForm.aspx?ID=”) > -1) {

// Remove any SharePoint adittional comments in the TD to get to the actual datetime value
$(“.ms-formtable tr td.ms-formlabel h3.ms-standardheader a[name=’SPBookmark_your_field_id’]”).parent().parent().parent().children(“td.ms-formbody”).contents().filter(function () {
return this.nodeType == 8;
}).remove();

// Get the value and remove any whitespaces to make sure that there is actual data or if we want to process that data
var creditStoppageValue = $.trim($(“.ms-formtable tr td.ms-formlabel h3.ms-standardheader a[name=’SPBookmark_your_field_id’]”).parent().parent().parent().children(“td.ms-formbody”).html());

// If the value is not empty then highlight it
if (!SPFormsFunctionalities.empty(creditStoppageValue)) {
$(“.ms-formtable tr td.ms-formlabel h3.ms-standardheader a[name=’SPBookmark_your_field_id’]”).parent().css(“color”, “red”);
$(“.ms-formtable tr td.ms-formlabel h3.ms-standardheader a[name=’SPBookmark_your_field_id’]”).parent().parent().parent().children(“td.ms-formbody”).css(“color”, “red”);
// Make sure that we only operate on SP Edit Forms and nothing else
} /*else if (window.location.href.indexOf(“EditForm.aspx?ID=”) > -1) {
alert(“found EditForm”);

}*/
}
},
empty: function (data) {
if (typeof (data) == ‘number’ || typeof (data) == ‘boolean’) {
return false;
}
if (typeof (data) == ‘undefined’ || data === null) {
return true;
}
if (typeof (data.length) != ‘undefined’) {
return data.length == 0;
}
var count = 0;
for (var i in data) {
if (data.hasOwnProperty(i)) {
count++;
}
}
return count == 0;
}
};

if ($) {
$(document).ready
(
function () {
SPFormsFunctionalities.AlterAccountsLedgerDisplayForm();
}
);
}

The HTML upon which the JQuery code above would operate on

<table class=”ms-formtable” style=”margin-top: 8px;” border=”0″ cellpadding=”0″ cellspacing=”0″ width=”100%”>

<tr>
<td nowrap=”true” valign=”top” width=”113px” class=”ms-formlabel“><h3 class=”ms-standardheader”><a name=”SPBookmark_sp_internal_field_name_goes_here”></a>your field title is here</h3></td>
<td valign=”top” class=”ms-formbody” width=”350px” id=”SPFieldDateTime”>
<!– FieldName=”SP field name is here”
FieldInternalName=”sp internal field name is here”
FieldType=”SPFieldDateTime”
–>
<span id=’WPQ2da070d16-f172-4faf-8060-029b2a734fc6sp_internal_field_name_goes_here’ data-sp-control=’SPFieldDateTime’ data-sp-options='{&quot;mode&quot;:1,&quot;source&quot;:&quot;sp_internal_field_name_goes_here&quot;}’></span>

</td>
</tr>
</table>

Sources:

The empty function is from: http://www.sitepoint.com/testing-for-empty-values/

 

Notice: That this example was tested against SharePoint 2010

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s