2013 SPFest - Customizing Sites and Pages in SharePoint 2013
Upcoming SlideShare
Loading in...5
×
 

2013 SPFest - Customizing Sites and Pages in SharePoint 2013

on

  • 8,311 views

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.

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.

Statistics

Views

Total Views
8,311
Views on SlideShare
4,514
Embed Views
3,797

Actions

Likes
2
Downloads
40
Comments
0

7 Embeds 3,797

http://www.idubbs.com 3566
http://microsoftechies.com 205
http://mhmd-public.sharepoint.com 16
http://cloud.feedly.com 5
http://translate.googleusercontent.com 2
http://webcache.googleusercontent.com 2
http://summary 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Since a lot of you are probably developers, you may have noticed that I’m more on the non-development side of the world. My background includes development, but I’ve since transitioned to IT Pro and then to the business side – focusing on translating business needs to where solutions can be built in the SharePoint platform: from out of the box, to SharePoint Designer and the topics we’re talking about today, to .NET development and 3rd party options.

2013 SPFest - Customizing Sites and Pages in SharePoint 2013 2013 SPFest - Customizing Sites and Pages in SharePoint 2013 Presentation Transcript

  • Customizing Sites and Pages in SharePoint 2013 WES PRESTON
  • 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.
  • 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
  • Agenda Overview General Features and Updates ◦ New Templates ◦ Apps Styling ◦ Change the Look ◦ Design Manager Client-Side Rendering ◦ JS Link
  • Overview
  • 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
  • Configuration vs. Customization Web Interface SharePoint Designer GUI HTML, CSS, XSLT, JavaScript .NET Web Interface Apps HTML5, CSS, JavaScript .NET Users Devs
  • What is ‘Customization’ in SharePoint The answer depends on the audience: Important when communicating with each group May vary within each organization
  • 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
  • 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)
  • ‘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
  • 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
  • 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 ◦
  • 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.
  • Branding
  • 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
  • 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
  • Demo THEMES AND COMPOSED LOOKS
  • Demo - Looks Change the Look
  • Demo – Looks Change the Look -> Tweak a Composed Look
  • Demo - Looks Theme Gallery
  • Demo - Looks Color Palette Font Scheme
  • Demo - Looks Composed Looks
  • Demo - Looks Composed Looks
  • 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
  • Client Side Rendering
  • Template Evolution SharePoint 2010 ◦ Data + XSL = HTML Server-side processing SharePoint 2013 ◦ Data + .js = HTML Client-Side Processing
  • What is Client-Side Rendering (CSR) JavaScript HTML CSS Display Templates
  • 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”…
  • 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
  • Demo JS LINK WEB PART PROPERTY
  • Demo – JS Link Before: Standard All Items view of a Custom list and columns
  • Demo – JS Link Create the js file – csr_overridable_demo1.js
  • Demo – JS Link Add the js file to the Master Page Gallery Change the content type to JavaScript Display Template and complete fields
  • Demo – JS Link On the list web part, add the address to the JS Link property: ◦ ~site/_catalogs/masterpage/csr_overridable_demo1.js
  • Demo – JS Link After: See the updates
  • 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
  • Demo 2 – JS Link Use the item context
  • Demo 2 – JS Link Before and After: Simple, but just scratching the surface…
  • Demo 3 – JS Link Call other function
  • Demo 3 – JS Link Before and After: Still simple, but going a little deeper and seeing more potential…
  • Demo 4 – JS Link Item override ◦ Control over how the web part is rendered, not just the individual fields
  • Demo 4 – JS Link Before and After:
  • Client-Side Rendering Recap Approaches ◦ [Crawl] Field overrides ◦ [Walk] Item overrides – Includes Headers and Footers ◦ [Run] PreRender and PostRender overrides Targeting ◦ BaseViewID ◦ ListTemplateType
  • 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
  • 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.
  • 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.
  • 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.
  • 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
  • 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/
  • Thank You! Special thanks to: ◦ Raymond Mitchell @iwkid ◦ Phil Jirsa @pjirsa ◦ Jon Campbell (Microsoft) @MSFT_joncamp ◦ Kirk Evans (Microsoft) @kaevans