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

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

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

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

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
Page 3: SharePoint 2013: Using Client-Side Rendering to color-code list cells

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

The code behind our SP2010 report

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

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

Client-side Rendering (CSR) to the rescue!

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

Some CSR examples:

Task List Priority Color

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

Some CSR examples:

Substring Long Text

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

Some CSR examples:

Accordion Effect

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

Some CSR examples:

Read-only controls

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

Steps to reach our goal:

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

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

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

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

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

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

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

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

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

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

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
Page 22: SharePoint 2013: Using Client-Side Rendering to color-code list cells

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
Page 24: SharePoint 2013: Using Client-Side Rendering to color-code list cells

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
Page 26: SharePoint 2013: Using Client-Side Rendering to color-code list cells

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

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
Page 29: SharePoint 2013: Using Client-Side Rendering to color-code list cells

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

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
Page 32: SharePoint 2013: Using Client-Side Rendering to color-code list cells

And more ideas...

Page 33: SharePoint 2013: Using Client-Side Rendering to color-code list cells
Page 34: SharePoint 2013: Using Client-Side Rendering to color-code list cells
Page 35: SharePoint 2013: Using Client-Side Rendering to color-code list cells

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

324 Blackwell St, Durham, NC 27701