Introduction
As design View from SharePoint Designer 2013 has been removed, there is no way left to do out of box conditional formatting. But one who has little knowledge of XSLT can do it without Design view.
Steps:
To start with Conditional Formatting , follow below step :
1. Open your SharePoint 2013 in SPD and navigate to your custom page and edit it in Advance view.
2. Insert a Data View web part in your page. Click on Insert -> DataView->Select your list.
3. Change this web part XSLTList view web part by clicking on List View Tools ->Design -> Customize XSLT ->Customize Entire View. After this all XSLT for this web part will appear on page.
4. For ROW formatting search for
<xsl:variable name="EditMode" select="$dvt_form_key = @ID or $dvt_form_key = @BdcIdentity"/>
<tr>
After <tr> paste below code :
<xsl:attribute name="style">
<xsl:if test="$thisNode/@Testfield = 'Start'">background-color: #FFFF00;</xsl:if>
<xsl:if test="$thisNode/@Testfield = 'Stop'">background-color: #FF0000;</xsl:if>
<xsl:if test="$thisNode/@Testfield = 'Waiting'">background-color: #00FF00;</xsl:if>
</xsl:attribute>
Note: Testfield is fields internal name . All fields name can be found under <ViewFields> tag. Also you can add or remove fields from List View Tools->Options -> Add/Remove Columns.
5. for Column Formatting, search for
<xsl:template name="FieldRef_printTableCell_EcbAllowed.Testfield" match="FieldRef[@Name='Test']" mode="printTableCellEcbAllowed" ddwrt:dvt_mode="body" ddwrt:ghost="hide">
<xsl:param name="thisNode" select="."/>
<xsl:param name="Position" select="1"/> <xsl:param name="class" />
<td>
Testfield again field's internal name. Copy below code after <td> :
<xsl:attribute name="style">
<xsl:if test="$thisNode/@Testfield = 'Start'">background-color: #FFFF00;</xsl:if>
<xsl:if test="$thisNode/@Testfield = 'Stop'">background-color: #FF0000;</xsl:if>
<xsl:if test="$thisNode/@Testfield = 'Waiting'">background-color: #00FF00;</xsl:if>
</xsl:attribute>
That's it. Save this page and preview in browser.
As soon as I perform this step: List View Tools ->Design -> Customize XSLT ->Customize Entire View and save the file. The data view doesn't display in the browser (even before editing the XSLT). Before that step, it displays as expected. Any ideas?
ReplyDeleteHi Mat,
DeleteCould you please check before customizing Entire view in XSLT , if Data view is getting displayed in browser. If yes , then in SPD select "XsltListViewWebPart " and perform the above step and save & preview in browser.
Hope it helps. Thanks!!
Great post, I managed to bring conditional formmating in similarly way . But I have other problem. Conditional formmating works in my libraries but when thet libries insert like web part colors are not visible.
DeleteHi Aleksandar,
DeleteYou have to do conditional formatting every time you insert data view web part on the page. Have you followed the same steps when you are inserting libraries ?
hi Lalita,
ReplyDeleteno , I did not edit master pages . It is a little more complex. I will try now .
I would first off like to thank you for the post. It has gotten me very close to my goal. One thing I notice is that the resulting dataview does not allow me to directly edit my rows ... In your opinion is there some way I can accomplish this... once again thanks for the great post.
ReplyDeleteThanks a lot Donnie. The way I selected to perform conditional formatting is depreciated. It is a workaround to do conditional formatting in SharePoint 2013 and it does not provide any support for this. I don't think so it will allow any of the formatting like this. You have to do it by doing changes in XSLT only.
DeleteHi, how would this work with a lookup field?
ReplyDeleteHi Rudolf, I apologize for late reply, but still if you are looking for the solution.
DeleteI haven't tried this. But I guess we can use XSLT contains instead of equals. It will do the trick. Please see below an example :
background-color: #FFFF00;
This comment has been removed by the author.
ReplyDeleteThere is a SharePoint product that does conditional formatting in lists and document libraries. It also allows to resize columns, change font styles and colors and many more – it is called List Booster. Check it out at http://www.spbooster.com – works in SharePoint 2013 and SharePoint Online.
ReplyDeleteHi, It's been late for a reply but need some help as I'm not a coding expert! I've done this below in the designer but I can't get the fields to highlight. Any help would be great? I think the issue I have is with the place each line code needs to be is wrong?
ReplyDeleteHI Darren, Could you please check the field name you are using is Internal field name or not. Please check Note in point #4 for more details and let me know. Hopw it will help you out.
ReplyDeleteThanks,Lalita
Hi, I'm only using the code for point 5 and I've replaced the 'TestField' column name for the field required in my case 'RAG_x0020_Status'.
DeleteThis comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteHi,
ReplyDeleteI've managed to get the column code working but the strange thing is that it works when I preview from designer 2013 but when I go back into the sharepoint site the formatting doesn't show? Not sure why this is the case?
is there any way to do conditional formatting in sp2013 - that does not include sharepoint designer?
ReplyDeleteThrough JavaScript, you can achieve this. No out of box feature is available.
DeleteGreat work, with some tweaks I managed to conditional format the list. except the first row is not formatted at all. I can not use JS due a restricted network.
ReplyDeleteFound the problem. Date conversion is not correct. Conflict between US and UK date format.
DeleteWorked for me, good article.
ReplyDelete