Your SlideShare is downloading. ×
0
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
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
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
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
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
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

2,303

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. …

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
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,303
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
24
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×