In SharePoint 2010, we used various approaches to project status reports including the Data View Web Part and SharePoint Designer. For SharePoint 2013, we wanted to color-code without SP Designer. This talk with show in detail how to make your lists more visually attractive and highlight values with color. The technique can be applied to status fields, financial data, or even league standings!

1. USING CLIENT-SIDE RENDERING TO COLOR-
CODE LIST CELLS IN SHAREPOINT 2013
Randy Mullis
SAS

3. In SharePoint 2010, our project status
reports were done with a Data View Web
Part and SP Designer:

4. The code behind our SP2010 report

5. For SharePoint 2013, we want to use out-
of-the-box components!

6. Client-side Rendering (CSR) to the rescue!

7. Some CSR examples (from article by Muawiyah
Shannak):
Task List Priority Color

8. Some CSR examples:
Substring Long Text

9. Some CSR examples:
Accordion Effect

10. Some CSR examples:
Read-only controls

11. Steps to reach our goal:

12. Steps to reach our goal:
1. Create new columns as needed

13. Steps to reach our goal:
1. Create new columns as needed
2. Create a View which includes the new columns

14. Steps to reach our goal:
1. Create new columns as needed
2. Create a View which includes the new columns
3. Add a snippet to hide the left-side navigation
and All Contents box

15. Steps to reach our goal:
1. Create new columns as needed
2. Create a View which includes the new columns
3. Add a snippet to hide the left-side navigation
and All Contents box
4. Enable the JavaScript Display Template Content
Type to your Master Page Gallery

16. Steps to reach our goal:
1. Create new columns as needed
2. Create a View which includes the new columns
3. Add a snippet to hide the left-side navigation
and All Contents box
4. Enable the JavaScript Display Template Content
Type to your Master Page Gallery
5. Upload the Client-side Rendering JavaScript to
the Master Page Gallery

17. Steps to reach our goal:
1. Create new columns as needed
2. Create a View which includes the new columns
3. Add a snippet to hide the left-side navigation
and All Contents box
4. Enable the JavaScript Display Template Content
Type to your Master Page Gallery
5. Upload the Client-side Rendering JavaScript to
the Master Page Gallery
6. Add the URL to the JS Link field in the List Views
Web Part

18. First new column: ColorStatus (A Calculated Column)
=IF(Status=”On-Target”,”Lime”,
IF(Status=”Distressed”,”Yellow”,
IF(Status=”On-Hold”,”Red”,”White”)))

19. The syntax for this is:
=IF(Condition=”value”,
”set value”,”else set this value”)

20. ColorStatus:
=IF(Status=”On-Target”,”Lime”,
IF(Status=”Distressed”,”Yellow”,
IF(Status=”On-Hold”,”Red”,”White”)))
If true, then value, else (If true, then value, else (If
true, then value, else value))))

22. Second new column: Current Status (A Calculated
Column)
=”<DIV style=’font-size:12px;
background-color:
”&ColorStatus&”;’>”&Status&”</DIV>”
Value of our new
ColorStatus column
Value of our Status
column

24. Add the “Current Status” column to
the View (“ColorStatus” is used but
not visible)

26. Let’s hide the Navigation and Site
Contents on the left using the Script
Editor Web Part:
<style>
#sideNavBox { DISPLAY: none }
#contentBox { margin-left: 20px }
</style>

27. Enable the JavaScript Display Template
Content Type to your Master Page Gallery
(at /_catalogs/masterpage)

29. Upload our Client-side Rendering JavaScript to the site’s
Master Page Gallery
var ccContext = {
Templates: {
Fields: {
“CurrentStatus”: {“View”:
“<#=STSHtmlDecode(ctx.CurrentItem.CurrentStatus)#>”
}
}
}
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides
(ccContext);

30. Add the URL to the JS Link field in the
List Views Web Part
~site/_catalogs/masterpage/addcolorjsli
nk12.js

32. And more ideas...

35. http://www.linkedin.com/in/randymullis
https://twitter.com/RandyMullis
Randy Mullis

36. 324 Blackwell St, Durham, NC 27701