Intended as an overview for power users and developers working with SharePoint 2013 to understand new capabilities for page customizations using CSR (client side rendering) and JS Link.

1. Customizing Sites and
Pages in SharePoint
2013
WES PRESTON

2. Session Abstract
This session covers an overview of how to do basic ‘theme’ and
Client-Side Rendering (CSR) customizations of SharePoint 2013 list
views – beginning with capabilities in the web interface and similar
to the activities you would have used SharePoint Designer for with
the 2010 platform. These include conditional
formatting, customizing views, etc… If you are a SharePoint 2010
power-user that utilized SharePoint designer for page
customization, this session will show you where to start with 2013. If
you are a developer or designer, this session will show you what out
of box and client-side customizations are available with 2013.

3. Intro: Wes Preston
Based in Minneapolis, MN
MVP – SharePoint Server (5 years)
MCITP – SharePoint Administrator 2010
MCTS – SharePoint 2010, Configuration
MCTS – WSS 3.0 and MOSS Configuration
www.idubbs.com/blog
www.trecstone.com
@idubbs
wes@trecstone.com

4. Agenda
Overview
General Features and Updates
◦ New Templates
◦ Apps
Styling
◦ Change the Look
◦ Design Manager
Client-Side Rendering
◦ JS Link

5. Overview

6. Ground Rules and Changing Times
Microsoft recommends leading with out-of-box solutions whenever possible
◦ Get to know SharePoint’s features and capabilities before adding customizations
SharePoint Designer 2013
◦ SharePoint Designer workflows
◦ Aimed at Developers for page customizations – Code View only
◦ Extending functionality for power users no longer available without Design View

7. Configuration vs. Customization
Web
Interface
SharePoint
Designer GUI
HTML, CSS,
XSLT, JavaScript
.NET
Web
Interface
Apps
HTML5,
CSS,
JavaScript
.NET
Users
Devs

8. What is ‘Customization’ in
SharePoint
The answer depends on the audience:
Important when communicating with each group
May vary within each organization

9. User ‘Customization’
Lists, Libraries, (now ‘Apps’) and Views
◦ App Templates
◦ Columns, metadata, fields
Options available via the browser
◦ Page Layouts
◦ Web Parts
◦ Formatting Text and Graphics
◦ Site Pages and Wiki Pages

10. Power Users
Skillset 1
◦ Connected web parts
◦ SharePoint Store apps
◦ SPD Workflows
Skillset 2
◦ ‘Copy/Paste Development’
◦ HTML in Calculated Fields
◦ Simple Client-Side Rendering (CSR/JavaScript)

11. ‘Pro’ Developers
Full range of customization options and opportunities:
Some of the same, some new… LOTS of options.
◦ Farm and Sandbox Solutions
◦ Apps
◦ New look and feel options
◦ Advanced Client-Side Rendering (CSR) within Visual Studio solutions

12. SharePoint 2013 New Features
Add ‘Tiles’ to the page – the Promoted Links app (see blog post)
Timeline Views, Project Summary, etc…
Themes, Branding and Style options

13. SharePoint Designer 2013
Expanded workflow management capabilities
◦ Out of scope for our discussion
No more Design View
◦ Can still/only make changes directly to code
Simple Client Side Rendering (CSR)
◦ JavaScript editing
◦

14. Apps Overview
Out-of-the-box Apps
◦ Same lists and library templates we’ve been using, with a few new ones in 2013
SharePoint App Store
◦ 3rd Party Apps – Lots of potential here…
Private App Catalog
◦ In-house custom developed (.NET) created apps specific to the organization
◦ Custom Lists with specific views, functionality, etc.

15. Branding

16. Branding, Styles and Theming
‘Looks’
◦ Choose from pre-created Looks
◦ Tweak look details and preview before applying
◦ Add or Edit color palettes (at Site Collection level)
◦ Deprecated: Create themes using PowerPoint
Design Manager
◦ Ease of use for Dreamweaver, Notepad, others
◦ Export and Import Design Package
◦ Snippets

17. Change the Look
Galleries
◦ Add New Font Schemes (XML)
◦ Add New Color Palettes (XML)
◦ Add Master Pages (Must be ‘15’ to show in dropdown)
Composed Looks
Essentially pre-baked packages of:
◦ Master Pages
◦ Background images
◦ Fonts
◦ Color Palettes

18. Demo
THEMES AND COMPOSED LOOKS

19. Demo - Looks
Change the Look

20. Demo – Looks
Change the Look -> Tweak a Composed Look

21. Demo - Looks
Theme Gallery

22. Demo - Looks
Color Palette Font Scheme

23. Demo - Looks
Composed Looks

24. Demo - Looks
Composed Looks

25. Design Manager
Design Manager is NEW for 2013
Only available with Publishing enabled
Maps a network drive for 3rd party apps to integrate (Dreamweaver)
◦ Uploaded files are converted to master pages
◦ Snippets Wizard – configure, cut and paste
Same Master page, Page Layout, CSS relationships as earlier versions
New Display Templates
New Design Packages

26. Client Side Rendering

27. Template Evolution
SharePoint 2010
◦ Data + XSL = HTML Server-side processing
SharePoint 2013
◦ Data + .js = HTML Client-Side Processing

28. What is Client-Side Rendering (CSR)
JavaScript
HTML
CSS
Display Templates

29. CSR Implementation
Deploy as an App
Deploy as a solution
Deploy manually and configure JS Link
Choose the implementation approach that best fits your needs.
◦ “It depends”…

30. Simple CSR Approach
Showing main components of the JS Link approach
Master Page Gallery
◦ Upload your .js file
◦ Must use the ‘JavaScript Display Template’ content type
Web part page
◦ Web part – set the JS Link property

31. Demo
JS LINK WEB PART PROPERTY

32. Demo – JS Link
Before:
Standard All Items view of a Custom list and columns

33. Demo – JS Link
Create the js file – csr_overridable_demo1.js

34. Demo – JS Link
Add the js file to the Master Page Gallery
Change the content type to JavaScript Display
Template and complete fields

35. Demo – JS Link
On the list web part, add the address to the JS Link property:
◦ ~site/_catalogs/masterpage/csr_overridable_demo1.js

36. Demo – JS Link
After: See the updates

37. Notes, Trivia and Gotchas
Need to know and find the internal column names
◦ Click on the column name in the List Settings page
Adding columns using the edit grid
◦ Internal names created automatically

38. Demo 2 – JS Link
Use the item context

39. Demo 2 – JS Link
Before and After:
Simple, but just scratching the surface…

40. Demo 3 – JS Link
Call other function

41. Demo 3 – JS Link
Before and After:
Still simple, but going a little deeper and seeing more potential…

42. Demo 4 – JS Link
Item override
◦ Control over how the web part is rendered,
not just the individual fields

43. Demo 4 – JS Link
Before and After:

44. Client-Side Rendering Recap
Approaches
◦ [Crawl] Field overrides
◦ [Walk] Item overrides – Includes Headers and Footers
◦ [Run] PreRender and PostRender overrides
Targeting
◦ BaseViewID
◦ ListTemplateType

45. Using SharePoint Designer
Can open and tweak in SharePoint Designer (SPD)
◦ Can also use Visual Studio, but Power Users likely won’t have access to VS.
Doesn’t display in the main ‘Master Pages’ site objects
◦ All Files -> _catalogs -> masterpage

46. Form Override Notes
SharePoint Designer Forms
◦ Default Forms – Use the ListFormWebPart and isn’t easily configurable. You do have JSLink and CSR Render
Mode.
◦ Custom-Created Forms (SPD) – Use the DataFormWebPart and can still be edited in SPD Code View or the XSL
on the Web Part properties. NO JSLink.
Display Templates
◦ DispForm.aspx
◦ EditForm.aspx
◦ NewForm.aspx
NOTE: JSLink override won’t work if form has been edited in SPD.

47. Quick Recap
Understand your toolset – new and existing OOB web parts and apps.
New Design Manager – Publishing Customizations
New App Model and Customization Approaches
Client-Side Rendering (CSR) – Start with JS Link
◦ See what develops in the coming months: practical best practices, patterns, etc.

48. Try It Yourself!
Play with many of these features in Office365
◦ http://office.microsoft.com/en-us/business/compare-office-for-business-plans-FX102918419.aspx
◦ I recommend the E1 plan as a test platform – but you need to Trial with something else in the ‘E’ group.
You get all the Enterprise features.

49. References
JS Link Primer – Blog Post
http://www.idubbs.com/blog/2012/js-link-for-sharepoint-2013-web-partsa-quick-functional-primer/
Microsoft: “Use as out-of-box whenever possible…”
http://sharepoint.microsoft.com/blog/Pages/BlogPost.aspx?pID=1012
Customize a list view in apps using client-side rendering. (similar pieces to customizing list views)
http://msdn.microsoft.com/en-us/library/jj220045(v=office.15).aspx
http://msdn.microsoft.com/en-
us/library/microsoft.sharepoint.client.listtemplatetype(v=office.15).aspx

50. References
Creating a New Color Palette
http://www.estruyf.be/blog/creating-a-new-color-palette-for-a-sharepoint-2013-composed-
look/
SharePoint 2013 First Look for Power Users – Asif Rehmani (MVP)
https://store.vook.com/storefronts/book/sharepoint-2013-first-look-for-power-
users.html#.UHxqZLgo5mN
Lightning Tools – Data Viewer Web Part
http://lightningtools.com/products/data-viewer-web-part/

51. Thank You!
Special thanks to:
◦ Raymond Mitchell @iwkid
◦ Phil Jirsa @pjirsa
◦ Jon Campbell (Microsoft) @MSFT_joncamp
◦ Kirk Evans (Microsoft) @kaevans