Upload
randy-mullis
View
2.339
Download
5
Tags:
Embed Size (px)
DESCRIPTION
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!
Citation preview
USING CLIENT-SIDE RENDERING TO COLOR-CODE LIST CELLS IN SHAREPOINT 2013
Randy MullisSAS
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:
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 needed2. Create a View which includes the new columns
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
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
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
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
First new column: ColorStatus (A Calculated Column)
=IF(Status=”On-Target”,”Lime”,
IF(Status=”Distressed”,”Yellow”,
IF(Status=”On-Hold”,”Red”,”White”)))
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, then value, else (If true, then value, else (If true, then value, else value))))
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
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: none }
#contentBox { margin-left: 20px }
</style>
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: {
“CurrentStatus”: {“View”:
“<#=STSHtmlDecode(ctx.CurrentItem.CurrentStatus)#>”
}
}
}
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides
(ccContext);
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