Spca2014 js link and display templates hatch
1 like354 views
This document discusses advanced rendering of lists in SharePoint using JavaScript and display templates. It covers customizing fields, forms, views and validation. It provides examples of overriding field templates to customize rendering and pass values. Challenges of timing and cross-site scripting with JSLink are also addressed. The document recommends deploying templates and JSLink files together in WSP packages within a site collection.
Spca2014 js link and display templates hatch
- 2. Martin Hatch SharePoint Practice Lead @ Ballard Chalmers, UK Advanced List Rendering with JSLinkand Display Templates @MartinHatch https://martinhatch.com martin.hatch@hatchsolutions.co.uk Slide Deck: http://mhat.ch/SPConnect14 Code: http://mhat.ch/JSLinkCode
- 3. •Custom Fields •Display Forms and Views •New and Edit Forms •Validation •Advanced Techniques (SOD / AJAX / JavaScript CSOM) •Custom Views •Headers & Footers •Item Templates •Gotchas (Quick Edit / Paging) •Multiple Language Support (RESX files in JavaScript!) •Leveraging JSLink •Deploying with Visual Studio Agenda
- 4. •Just some JavaScript which needs to be loaded on the page (the Script Editor Web Part is a nice way to do simple testing) •It essentially just returns some HTML as a string value •List Display Templates can be targeted to a specific List Template Type (e.g. 100 = Custom List, 101 = Document Library) •Display Templates execute VERY early in the page lifecycle, so you’ll have to be creative if you want to leverage CSOM or AJAX Display Templates 101
- 5. varfieldOverride= {}; fieldOverride.Templates= {}; fieldOverride.Templates.Fields= { “InternalFieldName”: { “NewForm”: myNewForm, “EditForm”: myEditForm, “DisplayForm”:myDisplayMethod, “View”: myViewMethod } }; // Optional: Restrict this template the “Custom List” template fieldOverride.ListTemplateType= 100; // register our field override with SharePoint SPClientTemplates.TemplateManager.RegisterTemplateOverrides(fieldOverride); A basic Display Template Rinse-and-Repeat to override multiple fields This line tells SharePoint about our template
- 6. •Each render method receives a “context” object which allows you to pull out some key information: •CurrentFieldValue •CurrentFieldSchema •CurrentItem* * CurrentItemalso contains built-in variables for each field that the item has, so you can use for example “CurrentItem.Title” Custom Fields: Views and Display Forms
- 7. functionRenderFieldValue(ctx) { // place in a div to make sure the description field (if present) // wraps to the next linereturn"<div>"+ ctx.CurrentFieldValue+ "</div>"; }; •End of the day it is just a method which returns some HTML •Be careful of Taxonomy / Lookup fields as it will include the raw value and not “clean” text (e.g. “1#;Lookup Item A”) Custom Fields: Basic Display Form
- 8. DEMO Custom Fields: Views and Display Forms .....
- 9. •These are the same as the Display Form, except we now need to provide SharePoint with the field value on save •We can do this using a RegisterCallbacksmethod, passing it the method which will return the field value (as a string). •How you retrieve and format the value is up to you, but don’t forget to read in the current item value when the edit form loads! •Be aware that complex data types (Lookups / Taxonomy Fields) will expect the data in a specific format! Custom Fields: New and EditForms
- 10. •You can register Validators for ANY field (even if you aren’t providing a display template for rendering) •Standard validation (e.g. “Mandatory / Required Field”) will be implemented automatically, so you only need to add your own. •When you register your validator you need to provide 3 things: •An object which contains a “Validate” method (returning true or false) •A callbackmethod for when the field does not validate. •The field you want to bind the validator to. Custom Fields: Validating User Input
- 11. DEMO Custom Fields: Editing and Validating .....
- 12. •The “Display Template” rendering occurs very early in the page load cycle, which has a few knock-on affects: •The JavaScript CSOM doesn’t work as “ClientContext” is null •Script on Demand methods “RegisterSod” and “LoadSodByKey” need to be called before your override template or it won’t work •Attempting to slow this process down will break your template: •$(“document”).ready(function() { }); •ExecuteOrDelayUntilScriptLoaded(function() { }, “scriptkey”); Its all about the timing …
- 13. •Simple Rules: •Instead of CSOM, use an AJAX request with the REST API which has no “page state” dependencies •Instead of using “RegisterScript” roll your own •Return the bare minimum HTML •Create a separate asyncfunction to do all your processing (which you can fire off once the page is finished rendering) … working around your limitations
- 14. •SharePoint contains a Script RESX Handlerwhich will automatically generate a JavaScript object containing the resource strings for the current UI culture _layouts15ScriptResx.ashx ?name=MyResourcefile &culture=en-US •_spPageContextInfo.currentUICultureNameis generated by SharePoint automatically generates Multiple Language Support
- 15. •“resheader” attribute needs to be added manually (the SharePoint ones already have this value) <resheadername="classFullName"> <value>My Namespace</value> </resheader> •Resource file must be in the 15Resources folder. •This technique does NOT work in Office 365. As an alternative, store a list of string variables in a JS files using the UI Culture as the filename and dynamically load them RESX file .. Some assembly required
- 16. DEMO JavaScript Multi-Language Support .....
- 17. JSLink–The magic plumbing •A mechanism which allows you to “attach” JavaScript to different SharePoint elements •Any JavaScript specified is automatically added to the page when that “element” is rendered •Tokens available to create SharePoint contextual URLs: •~layouts •~sitecollectionlayouts •~sitecollection •~site
- 18. JSLink •You can include multiple JavaScript files by separating them with the “pipe” | symbol. These will be loaded left-to-right •~layouts/firstFile.js| ~layouts/secondFile.js •SharePoint will automatically ensure that the same file is not loaded in twice (so you don’t need to worry about duplication!)
- 19. JSLink–The good and the .. challenges •You can leverage JSLinkfrom different places, but these all have different challenges: Location Good Challenge Fields •Site Columns •List Fields (schema.xml) Easyto distribute platform wide If you want different behaviour on differentlists then you’ll need to manually modify in the schema.xml (e.g. standard lookup on one, cascading lookup on another?) Content Types Easy to distribute platform wide Will not firein List Views (no .. I don’t know why either) List View Web Part Easy to add through the browser What about people who create their own views? ListForm Web Part Easy to add through the browser What about creating list templates?
- 20. •Your Display Templates can be placed anywhere, at the end of the day it is just some JavaScript •If you are deploying WSP Packages, make sure your JSLinkfiles are deployed in the same package as your Fields / Content Types / List Schemas •Be aware of cross-site scripting protection, recommended to deploy within the site collection (i.e. instead of Azure CDN) Deployment
- 21. Martin Hatch @MartinHatch http://www.martinhatch.com martin.hatch@hatchsolutions.co.uk Thank You