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 a[name=’SPBookmark_your_field_id’]”).parent().parent().parent().children(“”)

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 a[name=’SPBookmark_your_field_id’]”).parent().parent().parent().children(“”).contents().filter(function () {
return this.nodeType == 8;

// 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 a[name=’SPBookmark_your_field_id’]”).parent().parent().parent().children(“”).html());

// If the value is not empty then highlight it
if (!SPFormsFunctionalities.empty(creditStoppageValue)) {
$(“.ms-formtable tr a[name=’SPBookmark_your_field_id’]”).parent().css(“color”, “red”);
$(“.ms-formtable tr a[name=’SPBookmark_your_field_id’]”).parent().parent().parent().children(“”).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)) {
return count == 0;

if ($) {
function () {

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%”>

<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”
<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>



The empty function is from:


Notice: That this example was tested against SharePoint 2010

Leave a Reply

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

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

Google photo

You are commenting using your Google 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 )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.