• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Darwin SharePoint User Group, July 2013 - Introduction to client side rendering in SharePoint 2013
 

Darwin SharePoint User Group, July 2013 - Introduction to client side rendering in SharePoint 2013

on

  • 789 views

Slides from the Darwin SharePoint User Group, July 2013 - Introduction to client side rendering in SharePoint 2013. ...

Slides from the Darwin SharePoint User Group, July 2013 - Introduction to client side rendering in SharePoint 2013.

Most of the demos aren't available due use of trial O365 dev accounts.
However, presentation may still provide a big picture on CSR in SharePoint 2013 as well as jump start with useful links and information.

Check out slides, comments and the links, and see how it may help you to get started with CSR in SharePoint 2013.

The SharePoint Code Analysis Framework (SPCAF) is a set of tools created by Torsten Mandelkow and Matthias Einig. You can use the tools to examine .WSP files and .APP files to compare against a set of 400 rules, analyze dependencies, calculate metrics and more. In this session, I am going to take you through a tour of the SPCAF features, discuss the pros and cons of using it, show you how to integrate it with Team Foundation Server (TFS) and how you can add your own custom rules. If you spend time developing or managing SharePoint code, this is the session you have been waiting for.

Most of the slides are based on original SPCAF presentation by Matthias Einig, and were used with Matthias Einig permission.

More information could be found here:
http://spsevents.org/worldwide/Sydney/Pages/Sessions.aspx
http://www.spcaf.com
http://spdevlab.com/

Statistics

Views

Total Views
789
Views on SlideShare
787
Embed Views
2

Actions

Likes
0
Downloads
8
Comments
0

1 Embed 2

https://twitter.com 2

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
  • Here is the plan, and it’s not that big.First of all, I’m going to cover some general ideas ab CSRWhat is it, how it works, what are the differences to prev SharePointNext, I want to discusses what exactly might be done with CSRIn general, this is quite developer’s topic. I won’t bother you with coding a lot, so there going to be a few demos.Finally, as it’s all ab customization, it is good to know options to deliver it to SharePointGenerally speaking, CSR is one more attempt to provide a nice, extensible API to render data in SharePointLet’s see what we have and how CRS different
  • CAMLThe very first option to render you data in SharePoint is CAMLBeen there for a long time, quite legacy and really taughtQuite hard to learn, to implement, to deploy, trace and debugFinally, server sideWell, I remember my first time while I was trying o figure out how to implement rendering for a custom fieldQuite interesting experience, I finally managed to get it done.But at the end of the project I was like that guy (on the following slide)
  • - This is my first impression ofCAML in SharePoint
  • XSLTAnother one option you may consider to display your data in SharePoint is CAMLEspecially with SharePoint 2010, you may ba familiar with XsltListViewWebPart, CQWP, Search Result web part and so onQuite hard to learn, to implement, to deploy, trace and debugIn general, XSLT seems to be on the way out. Sort of. Finally, server side again!My personal experience, Search Results, CQWP, XsltListView – that’s what we usually might do with every 2010 prjBut at the end of the project I was like that guy…
  • I am good!But my coworker are really good with CAML or XSLT.
  • Finally, CSR + JavaScriptWell, I always felt like SharePoint is sort of time machine.While people use responsive design, modern JavaScript libraries and other next stuff….. We were using CAML/XSLTOn the other hand.. JS has win! – growing trend in web development.Finally, with a new SharePoint, MS has one a big step up.Now, with CSR, we have js as a mainstream, modern an recommended way to provide enhancement and customizations in SP2013.Lot’s of benefits for developers, no server side, cloud ready, in general modern web dev stackFinally, CLIENT SIDE! IMPORTANT.Fields, Views, some forms enhancements.
  • Okay, just to summariesHere is SP, here is your browserCAML/XSLTServer sideProduce HTMLCSRClient sideYou’r given JSON, you need to make up HTMLSR is recommended approach.- Anyway, too much theory, let’s build something cool!
  • - Anyway, too much theory, let’s build something cool!Task list demo (may not be available anymore, sorry)https://spdevlab42.sharepoint.com/sites/dspughttps://spdevlab42.sharepoint.com/sites/dspug/projectshttps://spdevlab42.sharepoint.com/sites/dspug/projects/Lists/dspug%20presentation/
  • As you may seen,ListViewWebPart has JSLink propertySo, you may attach your CSR customization with that JSLink propertyJSLink is more complicatedLot’s of object in SharePoint has that propertyFields, Content types, Forms, ViewSome of the web partsListView/ListForms web part to present list data/formsFinally, there are some intetesting thing ab JSLink – this is not just a property!!*** Search web parts, such as Search Results, Content by Search might be customized via JS. Still client side, but slightly different.
  • Anyway, too much theory, let’s build something cool!Let’s continue and see how it works with fields and what might be done!Custom fields demos (mat not be available anymore, sorry)https://spdevlab42.sharepoint.com/sites/dspughttps://spdevlab42.sharepoint.com/sites/dspug/news/https://spdevlab42.sharepoint.com/sites/dspug/clients/
  • Finally, deployment overviewFirst of all, CAML based provision within featuresJSLink is part of the CAML schema, so just put the right value with token “~site/~sitecollection”Next, full access via code/PS/anything else.Finally, you may consider “global” overriding and script delivery with ScriptLink, Custom Action or anything else.Due that, the final implementation really depends on your case, but try to avoid any manual changes.
  • So, we almost done…Here is some getting started stuff you may check out later
  • - Anything to discuss?

Darwin SharePoint User Group, July 2013 - Introduction to client side rendering in SharePoint 2013 Darwin SharePoint User Group, July 2013 - Introduction to client side rendering in SharePoint 2013 Presentation Transcript

  • Darwin SharePoint User Group (DSPUG) General Meeting – 31st July 2013
  • Darwin SharePoint User Group (DSPUG) AGENDA • 5:00 PM - Arrival & Networks • 5:15 PM - Welcome & introductions - Venjie Diola • 5:30 PM - Speaker for July - Anton Vishnyakov (SharePoint Consultant/Developer) • 6:15 PM - TechEd 2013 - Gold Coast / SharePoint for Power Users 2013 • 7:00+ PM - SharePint (Networks & Drinks)
  • Darwin SharePoint User Group (DSPUG) Speaker for July Anton Vishnyakov (SharePoint Consultant/Developer) • • • • • SharePoint 2007/2010/2013 specialist MCTS/MCPD/MCITP/ex-MCT Ex member of RUSUG One of the organizers of “SharePoint Conference Russia 2011” @avishnyakov or http://spdevlab.com
  • Darwin SharePoint User Group (DSPUG) Introduction to client side rendering in SharePoint 2013 • What is inside CSR? • What might be customized with CSR? • How to deploy CSR enhancements?
  • Darwin SharePoint User Group (DSPUG)
  • Darwin SharePoint User Group (DSPUG)
  • Darwin SharePoint User Group (DSPUG)
  • Darwin SharePoint User Group (DSPUG)
  • Darwin SharePoint User Group (DSPUG)
  • Darwin SharePoint User Group (DSPUG) CLIENT SIDE CAML XSLT HTML CSR DATA HTML JSON/JS • The old way: you need to generate HTML on server side. • The new way: you are given JSON, work it out on client side!
  • Darwin SharePoint User Group (DSPUG) Lets build something cool!
  • Darwin SharePoint User Group (DSPUG) JSLink property is the key point • It pairs custom js files for: – Fields, Content Types, Forms, Views – ListView/ListForm web parts • Has interesting features: – – – – Allows specifying multiple files via “|” delimiter Support SOD via “(d)” token Cannot be overwritten for some fields (as example, Taxonomy field) Supports ~site, ~sitecollection, ~layout, ~siteLayouts, etc.. *** 5 facts about JSLink in SharePoint 2013 you might not know
  • Darwin SharePoint User Group (DSPUG) Lets continue building Lets build something cool! something cool!
  • Darwin SharePoint User Group (DSPUG) CSR customizations might be delivered • CAML based provision with in Feature xml – Fields, Content Type, Form, View or particular web part • Code based provision via – Code, PowerShell, js, SharePoint manager, anything else • Any other methods to deliver js – ScriptLink, Custom Action, Master page, direct inclusion via CEWP, etc… Due that flexibility, make your own decision according to situation – apps, sandbox, farm solutions are welcomed.
  • Darwin SharePoint User Group (DSPUG) Getting started with client side rendering in SP2013 • • • • • • • • • • 5 facts about JSLink in SharePoint 2013 you might not know Custom Field Type for SharePoint 2013 – VISA card field sample Custom Field Type for SharePoint 2013 – Custom “Quick Edit” mode rendering Custom Field Types in SharePoint 2013 Apps Custom Field Rendering with JSLink SharePoint 2013: Create a GeoLocation field that renders maps using Nokia Maps SP 2013: Using the JSLink property to change the way your field or views are rendered in SharePoint 2013 SharePoint 2013 custom field samples at codeplex.com SharePoint TypeScript Definitions Introduction to Client-Side Rendering in SharePoint 2013 Basically, anything related to “CSR”, “JSLink” and “render templates”
  • Darwin SharePoint User Group (DSPUG)
  • Darwin SharePoint User Group (DSPUG) Speaker for July Anton Vishnyakov (SharePoint Consultant/Developer) • • • • • SharePoint 2007/2010/2013 specialist MCTS/MCPD/MCITP/ex-MCT Ex member of RUSUG One of the organizers of “SharePoint Conference Russia 2011” @avishnyakov or http://spdevlab.com