Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
USING CLIENT-SIDE RENDERING TO COLOR-
CODE LIST CELLS IN SHAREPOINT 2013
Randy Mullis
SAS
In SharePoint 2010, our project status
reports were done with a Data View Web
Part and SP Designer:
The code behind our SP2010 report
For SharePoint 2013, we want to use out-
of-the-box components!
Client-side Rendering (CSR) to the rescue!
Some CSR examples (from article by Muawiyah
Shannak):
Task List Priority Color
Some CSR examples:
Substring Long Text
Some CSR examples:
Accordion Effect
Some CSR examples:
Read-only controls
Steps to reach our goal:
Steps to reach our goal:
1. Create new columns as needed
Steps to reach our goal:
1. Create new columns as needed
2. Create a View which includes the new columns
Steps to reach our goal:
1. Create new columns as needed
2. Create a View which includes the new columns
3. Add a snippet ...
Steps to reach our goal:
1. Create new columns as needed
2. Create a View which includes the new columns
3. Add a snippet ...
Steps to reach our goal:
1. Create new columns as needed
2. Create a View which includes the new columns
3. Add a snippet ...
Steps to reach our goal:
1. Create new columns as needed
2. Create a View which includes the new columns
3. Add a snippet ...
First new column: ColorStatus (A Calculated Column)
=IF(Status=”On-Target”,”Lime”,
IF(Status=”Distressed”,”Yellow”,
IF(Sta...
The syntax for this is:
=IF(Condition=”value”,
”set value”,”else set this value”)
ColorStatus:
=IF(Status=”On-Target”,”Lime”,
IF(Status=”Distressed”,”Yellow”,
IF(Status=”On-Hold”,”Red”,”White”)))
If true,...
Second new column: Current Status (A Calculated
Column)
=”<DIV style=’font-size:12px;
background-color:
”&ColorStatus&”;’>...
Add the “Current Status” column to
the View (“ColorStatus” is used but
not visible)
Let’s hide the Navigation and Site
Contents on the left using the Script
Editor Web Part:
<style>
#sideNavBox { DISPLAY: n...
Enable the JavaScript Display Template
Content Type to your Master Page Gallery
(at /_catalogs/masterpage)
Upload our Client-side Rendering JavaScript to the site’s
Master Page Gallery
var ccContext = {
Templates: {
Fields: {
“Cu...
Add the URL to the JS Link field in the
List Views Web Part
~site/_catalogs/masterpage/addcolorjsli
nk12.js
And more ideas...
http://www.linkedin.com/in/randymullis
https://twitter.com/RandyMullis
Randy Mullis
324 Blackwell St, Durham, NC 27701
SharePoint 2013: Using Client-Side Rendering to color-code list cells
SharePoint 2013: Using Client-Side Rendering to color-code list cells
SharePoint 2013: Using Client-Side Rendering to color-code list cells
SharePoint 2013: Using Client-Side Rendering to color-code list cells
SharePoint 2013: Using Client-Side Rendering to color-code list cells
SharePoint 2013: Using Client-Side Rendering to color-code list cells
SharePoint 2013: Using Client-Side Rendering to color-code list cells
SharePoint 2013: Using Client-Side Rendering to color-code list cells
Upcoming SlideShare
Loading in …5
×

SharePoint 2013: Using Client-Side Rendering to color-code list cells

4,434 views

Published on

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!

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

SharePoint 2013: Using Client-Side Rendering to color-code list cells

  1. 1. USING CLIENT-SIDE RENDERING TO COLOR- CODE LIST CELLS IN SHAREPOINT 2013 Randy Mullis SAS
  2. 2. In SharePoint 2010, our project status reports were done with a Data View Web Part and SP Designer:
  3. 3. The code behind our SP2010 report
  4. 4. For SharePoint 2013, we want to use out- of-the-box components!
  5. 5. Client-side Rendering (CSR) to the rescue!
  6. 6. Some CSR examples (from article by Muawiyah Shannak): Task List Priority Color
  7. 7. Some CSR examples: Substring Long Text
  8. 8. Some CSR examples: Accordion Effect
  9. 9. Some CSR examples: Read-only controls
  10. 10. Steps to reach our goal:
  11. 11. Steps to reach our goal: 1. Create new columns as needed
  12. 12. Steps to reach our goal: 1. Create new columns as needed 2. Create a View which includes the new columns
  13. 13. 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
  14. 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 4. Enable the JavaScript Display Template Content Type to your Master Page Gallery
  15. 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 5. Upload the Client-side Rendering JavaScript to the Master Page Gallery
  16. 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 6. Add the URL to the JS Link field in the List Views Web Part
  17. 17. First new column: ColorStatus (A Calculated Column) =IF(Status=”On-Target”,”Lime”, IF(Status=”Distressed”,”Yellow”, IF(Status=”On-Hold”,”Red”,”White”)))
  18. 18. The syntax for this is: =IF(Condition=”value”, ”set value”,”else set this value”)
  19. 19. 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))))
  20. 20. 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
  21. 21. Add the “Current Status” column to the View (“ColorStatus” is used but not visible)
  22. 22. 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>
  23. 23. Enable the JavaScript Display Template Content Type to your Master Page Gallery (at /_catalogs/masterpage)
  24. 24. 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);
  25. 25. Add the URL to the JS Link field in the List Views Web Part ~site/_catalogs/masterpage/addcolorjsli nk12.js
  26. 26. And more ideas...
  27. 27. http://www.linkedin.com/in/randymullis https://twitter.com/RandyMullis Randy Mullis
  28. 28. 324 Blackwell St, Durham, NC 27701

×