Custom DispForm.aspx Form

Question

I have requirement to create display form for my custom list with two fields Title and State(open or close options ) if the state of item equal close , i want to make the background Row of state field in dispForm.aspx = Red else background Row of state field in dispForm.aspx = Green

How can i do it in sharepoint designer ? thanks in Advance

Answer 1

Try to use JQuery by Adding the following code based on your field title and value

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>

$(document).ready(function(){


if ($('h3:contains("Status")').closest('td').next('td').text().indexOf('In progress') != -1)
{

$('h3:contains("Status")').closest('tr').css("background-color", "green");
}
else
{

$('h3:contains("Status")').closest('tr').css("background-color", "red");
}
});
</script>

[OutPut]

For the detail steps with image check Conditional Formating at DispForm.aspx via JQuery in SharePoint

Answer 2

Never done it before on SharePoint Designer..

But in case you wanna give a try using jslink, you could follow this link:

Customize List Form Fields in Display Form (DispForm.aspx) using JS Link in SharePoint 2013

, which explain how to achieve that using jslink (in the example, return an image based on the field value).

In case you want to change the background url of the row, you could just change the return value of the function by changing the conditions like:

...
if(ctx.currentItem.State == 'close')
    return '<p style="background-color:red">';
else
    return '<p style="background-color:green">';
...

Answer 3

To accomplish this in SP Designer, you would simply need to use the structure to trap the condition like so:

<xsl-if test="[State] = 'Open'">

    <td style="background-color: green"><xsl:value-of select="State"/></td>

</xsl-if>

Then do the same for State=Close. You can also use the structure.