Client side programming with SharePoint 2010 - SharePoin Saturday Vietnam
SharePoint 2013: Using Client-Side Rendering to color-code list cells
-
Upload
randy-mullis -
Category
Technology
-
view
2.340 -
download
5
description
Transcript of SharePoint 2013: Using Client-Side Rendering to color-code list cells
![Page 1: SharePoint 2013: Using Client-Side Rendering to color-code list cells](https://reader034.fdocuments.net/reader034/viewer/2022042522/559bd8721a28ab49158b45d5/html5/thumbnails/1.jpg)
USING CLIENT-SIDE RENDERING TO COLOR-CODE LIST CELLS IN SHAREPOINT 2013
Randy MullisSAS
![Page 2: SharePoint 2013: Using Client-Side Rendering to color-code list cells](https://reader034.fdocuments.net/reader034/viewer/2022042522/559bd8721a28ab49158b45d5/html5/thumbnails/2.jpg)
![Page 3: SharePoint 2013: Using Client-Side Rendering to color-code list cells](https://reader034.fdocuments.net/reader034/viewer/2022042522/559bd8721a28ab49158b45d5/html5/thumbnails/3.jpg)
In SharePoint 2010, our project status reports were done with a Data View Web Part and SP Designer:
![Page 4: SharePoint 2013: Using Client-Side Rendering to color-code list cells](https://reader034.fdocuments.net/reader034/viewer/2022042522/559bd8721a28ab49158b45d5/html5/thumbnails/4.jpg)
The code behind our SP2010 report
![Page 5: SharePoint 2013: Using Client-Side Rendering to color-code list cells](https://reader034.fdocuments.net/reader034/viewer/2022042522/559bd8721a28ab49158b45d5/html5/thumbnails/5.jpg)
For SharePoint 2013, we want to use out-of-the-box components!
![Page 6: SharePoint 2013: Using Client-Side Rendering to color-code list cells](https://reader034.fdocuments.net/reader034/viewer/2022042522/559bd8721a28ab49158b45d5/html5/thumbnails/6.jpg)
Client-side Rendering (CSR) to the rescue!
![Page 7: SharePoint 2013: Using Client-Side Rendering to color-code list cells](https://reader034.fdocuments.net/reader034/viewer/2022042522/559bd8721a28ab49158b45d5/html5/thumbnails/7.jpg)
Some CSR examples:
Task List Priority Color
![Page 8: SharePoint 2013: Using Client-Side Rendering to color-code list cells](https://reader034.fdocuments.net/reader034/viewer/2022042522/559bd8721a28ab49158b45d5/html5/thumbnails/8.jpg)
Some CSR examples:
Substring Long Text
![Page 9: SharePoint 2013: Using Client-Side Rendering to color-code list cells](https://reader034.fdocuments.net/reader034/viewer/2022042522/559bd8721a28ab49158b45d5/html5/thumbnails/9.jpg)
Some CSR examples:
Accordion Effect
![Page 10: SharePoint 2013: Using Client-Side Rendering to color-code list cells](https://reader034.fdocuments.net/reader034/viewer/2022042522/559bd8721a28ab49158b45d5/html5/thumbnails/10.jpg)
Some CSR examples:
Read-only controls
![Page 11: SharePoint 2013: Using Client-Side Rendering to color-code list cells](https://reader034.fdocuments.net/reader034/viewer/2022042522/559bd8721a28ab49158b45d5/html5/thumbnails/11.jpg)
Steps to reach our goal:
![Page 12: SharePoint 2013: Using Client-Side Rendering to color-code list cells](https://reader034.fdocuments.net/reader034/viewer/2022042522/559bd8721a28ab49158b45d5/html5/thumbnails/12.jpg)
Steps to reach our goal: 1. Create new columns as needed
![Page 13: SharePoint 2013: Using Client-Side Rendering to color-code list cells](https://reader034.fdocuments.net/reader034/viewer/2022042522/559bd8721a28ab49158b45d5/html5/thumbnails/13.jpg)
Steps to reach our goal: 1. Create new columns as needed2. Create a View which includes the new columns
![Page 14: SharePoint 2013: Using Client-Side Rendering to color-code list cells](https://reader034.fdocuments.net/reader034/viewer/2022042522/559bd8721a28ab49158b45d5/html5/thumbnails/14.jpg)
Steps to reach our goal: 1. Create new columns as needed2. Create a View which includes the new columns3. Add a snippet to hide the left-side navigation
and All Contents box
![Page 15: SharePoint 2013: Using Client-Side Rendering to color-code list cells](https://reader034.fdocuments.net/reader034/viewer/2022042522/559bd8721a28ab49158b45d5/html5/thumbnails/15.jpg)
Steps to reach our goal: 1. Create new columns as needed2. Create a View which includes the new columns3. Add a snippet to hide the left-side navigation
and All Contents box4. Enable the JavaScript Display Template Content
Type to your Master Page Gallery
![Page 16: SharePoint 2013: Using Client-Side Rendering to color-code list cells](https://reader034.fdocuments.net/reader034/viewer/2022042522/559bd8721a28ab49158b45d5/html5/thumbnails/16.jpg)
Steps to reach our goal: 1. Create new columns as needed2. Create a View which includes the new columns3. Add a snippet to hide the left-side navigation
and All Contents box4. Enable the JavaScript Display Template Content
Type to your Master Page Gallery5. Upload the Client-side Rendering JavaScript to
the Master Page Gallery
![Page 17: SharePoint 2013: Using Client-Side Rendering to color-code list cells](https://reader034.fdocuments.net/reader034/viewer/2022042522/559bd8721a28ab49158b45d5/html5/thumbnails/17.jpg)
Steps to reach our goal: 1. Create new columns as needed2. Create a View which includes the new columns3. Add a snippet to hide the left-side navigation
and All Contents box4. Enable the JavaScript Display Template Content
Type to your Master Page Gallery5. Upload the Client-side Rendering JavaScript to
the Master Page Gallery6. Add the URL to the JS Link field in the List Views
Web Part
![Page 18: SharePoint 2013: Using Client-Side Rendering to color-code list cells](https://reader034.fdocuments.net/reader034/viewer/2022042522/559bd8721a28ab49158b45d5/html5/thumbnails/18.jpg)
First new column: ColorStatus (A Calculated Column)
=IF(Status=”On-Target”,”Lime”,
IF(Status=”Distressed”,”Yellow”,
IF(Status=”On-Hold”,”Red”,”White”)))
![Page 19: SharePoint 2013: Using Client-Side Rendering to color-code list cells](https://reader034.fdocuments.net/reader034/viewer/2022042522/559bd8721a28ab49158b45d5/html5/thumbnails/19.jpg)
The syntax for this is:
=IF(Condition=”value”,
”set value”,”else set this value”)
![Page 20: SharePoint 2013: Using Client-Side Rendering to color-code list cells](https://reader034.fdocuments.net/reader034/viewer/2022042522/559bd8721a28ab49158b45d5/html5/thumbnails/20.jpg)
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))))
![Page 21: SharePoint 2013: Using Client-Side Rendering to color-code list cells](https://reader034.fdocuments.net/reader034/viewer/2022042522/559bd8721a28ab49158b45d5/html5/thumbnails/21.jpg)
![Page 22: SharePoint 2013: Using Client-Side Rendering to color-code list cells](https://reader034.fdocuments.net/reader034/viewer/2022042522/559bd8721a28ab49158b45d5/html5/thumbnails/22.jpg)
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
![Page 23: SharePoint 2013: Using Client-Side Rendering to color-code list cells](https://reader034.fdocuments.net/reader034/viewer/2022042522/559bd8721a28ab49158b45d5/html5/thumbnails/23.jpg)
![Page 24: SharePoint 2013: Using Client-Side Rendering to color-code list cells](https://reader034.fdocuments.net/reader034/viewer/2022042522/559bd8721a28ab49158b45d5/html5/thumbnails/24.jpg)
Add the “Current Status” column to the View (“ColorStatus” is used but not visible)
![Page 25: SharePoint 2013: Using Client-Side Rendering to color-code list cells](https://reader034.fdocuments.net/reader034/viewer/2022042522/559bd8721a28ab49158b45d5/html5/thumbnails/25.jpg)
![Page 26: SharePoint 2013: Using Client-Side Rendering to color-code list cells](https://reader034.fdocuments.net/reader034/viewer/2022042522/559bd8721a28ab49158b45d5/html5/thumbnails/26.jpg)
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>
![Page 27: SharePoint 2013: Using Client-Side Rendering to color-code list cells](https://reader034.fdocuments.net/reader034/viewer/2022042522/559bd8721a28ab49158b45d5/html5/thumbnails/27.jpg)
Enable the JavaScript Display Template Content Type to your Master Page Gallery
(at /_catalogs/masterpage)
![Page 28: SharePoint 2013: Using Client-Side Rendering to color-code list cells](https://reader034.fdocuments.net/reader034/viewer/2022042522/559bd8721a28ab49158b45d5/html5/thumbnails/28.jpg)
![Page 29: SharePoint 2013: Using Client-Side Rendering to color-code list cells](https://reader034.fdocuments.net/reader034/viewer/2022042522/559bd8721a28ab49158b45d5/html5/thumbnails/29.jpg)
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);
![Page 30: SharePoint 2013: Using Client-Side Rendering to color-code list cells](https://reader034.fdocuments.net/reader034/viewer/2022042522/559bd8721a28ab49158b45d5/html5/thumbnails/30.jpg)
Add the URL to the JS Link field in the List Views Web Part
~site/_catalogs/masterpage/addcolorjsli
nk12.js
![Page 31: SharePoint 2013: Using Client-Side Rendering to color-code list cells](https://reader034.fdocuments.net/reader034/viewer/2022042522/559bd8721a28ab49158b45d5/html5/thumbnails/31.jpg)
![Page 32: SharePoint 2013: Using Client-Side Rendering to color-code list cells](https://reader034.fdocuments.net/reader034/viewer/2022042522/559bd8721a28ab49158b45d5/html5/thumbnails/32.jpg)
And more ideas...
![Page 33: SharePoint 2013: Using Client-Side Rendering to color-code list cells](https://reader034.fdocuments.net/reader034/viewer/2022042522/559bd8721a28ab49158b45d5/html5/thumbnails/33.jpg)
![Page 34: SharePoint 2013: Using Client-Side Rendering to color-code list cells](https://reader034.fdocuments.net/reader034/viewer/2022042522/559bd8721a28ab49158b45d5/html5/thumbnails/34.jpg)
![Page 35: SharePoint 2013: Using Client-Side Rendering to color-code list cells](https://reader034.fdocuments.net/reader034/viewer/2022042522/559bd8721a28ab49158b45d5/html5/thumbnails/35.jpg)
http://www.linkedin.com/in/randymullis
https://twitter.com/RandyMullis
Randy Mullis
![Page 36: SharePoint 2013: Using Client-Side Rendering to color-code list cells](https://reader034.fdocuments.net/reader034/viewer/2022042522/559bd8721a28ab49158b45d5/html5/thumbnails/36.jpg)
324 Blackwell St, Durham, NC 27701