Mastering JavaScript in SharePoint: Tips and Techniques

1. JS in SP – Why, What & How Nick Hadlee and Gary Payne

2. WHY JavaScript…

3. …you can do some Cool Things!

4. ...can’t touch the server

5. …because it’s easy now (really?)

6. HOW to add JavaScript?

7. In the Masterpage <SharePoint:ScriptLinklanguage="javascript"name="menu.js"OnDemand="false"runat="server"Localizable="false"/> true" <scripttype="text/javascript"> // <![CDATA[ document.write(‘<script type="text/javascript"src="/_layouts/menu.js"></’ + ‘script>’); // ]]> </script> <scripttype="text/javascript">RegisterSod("menu.js", “\u002f_layouts\u002f15\u002fmenu.js?rev=pcr83s11QGFA2kLt5rDQ1g\u00253D\u00253D");</script>

8. Control Delegate <SharePoint:DelegateControlrunat="server" ControlId="AdditionalPageHead"AllowMultipleControls="true" /> <?xml version="1.0" encoding="utf-8"?> <Elementsxmlns="http://schemas.microsoft.com/sharepoint/"> <Control Id="AdditionalPageHead" Sequence="50" ControlSrc="~/_CONTROLTEMPLATES/SPC/jQueryControl.ascx" /> </Control> </Elements>

9. A Custom Action <?xml version="1.0" encoding="utf-8"?> <Elementsxmlns="http://schemas.microsoft.com/sharepoint/"> <CustomAction ScriptSrc="~SiteCollection/SiteAssets/jquery-1.8.3.min.js" Location="ScriptLink" Sequence="10"> </CustomAction> </Elements>

10. Straight in the page

11. HOW to use JS in SP?

12. OData – What is it?

13. OData demo – Get some data http://[site]/_api/web/lists/ GetByTitle('Towns')/items?$select=Title

14. OData demo - AutoComplete

15. TIP!!! Getting internal name of list fields http://[site]/_api/web/lists/ getbytitle('Events')/Fields ?$select=Title,InternalName,ID

16. CSOM & JSOM

17. JSOM – What is it?

18. Typical JSOM Pattern varclientContext = SP.ClientContext.get_current(); varweb = clientContext.get_web(); varlist = web.get_lists().getByTitle("Rooms"); varfloorChoiceField = clientContext.castTo( list.get_fields().getByInternalNameOrTitle("Floor"), SP.FieldChoice ); clientContext.load(floorChoiceField); clientContext.executeQueryAsync( Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed) );

19. Typical JSOM Pattern varclientContext = SP.ClientContext.get_current(); varweb = clientContext.get_web(); varlist = web.get_lists().getByTitle("Rooms"); varfloorChoiceField = clientContext.castTo( list.get_fields().getByInternalNameOrTitle("Floor"), SP.FieldChoice ); clientContext.load(floorChoiceField); clientContext.executeQueryAsync( Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed) );

20. Typical JSOM Pattern varclientContext = SP.ClientContext.get_current(); varweb = clientContext.get_web(); varlist = web.get_lists().getByTitle("Rooms"); varfloorChoiceField = clientContext.castTo( list.get_fields().getByInternalNameOrTitle("Floor"), SP.FieldChoice ); clientContext.load(floorChoiceField); clientContext.executeQueryAsync( Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed) );

21. Typical JSOM Pattern varclientContext = SP.ClientContext.get_current(); varweb = clientContext.get_web(); varlist = web.get_lists().getByTitle("Rooms"); varfloorChoiceField = clientContext.castTo( list.get_fields().getByInternalNameOrTitle("Floor"), SP.FieldChoice ); clientContext.load(floorChoiceField); clientContext.executeQueryAsync( Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed) );

22. Demo – Reading and writing

23. TIP!!! You can only work with files up to 1.5 MB by using the JavaScript object model. To upload larger files, use REST.

24. Client Side Rendering

25. Enhancing data displays

26. Client Side Rendering • Method of changing how areas of SharePoint’s UI via JS micro templates “Display Templates” • JSLink or JS Link • Search

27. JSLink • Fields • View(s) templates "View" • Forms templates "DisplayForm" "EditForm" "NewForm" • Views • The entire view via an “Item” template or “Body” template • A field in a view via a “View” template • Can also limit to a specific view and/or list template • Xslt List View Web Parts • Forms

28. JSLink The JavaScript template pattern: (function(){ // Initialize the variable that store the objects. varoverrideCtx = {}; overrideCtx.Templates = {}; // Do the template bits here // <-- Overidden rendering is added here --> // Register the template overrides. SPClientTemplates.TemplateManager .RegisterTemplateOverrides(overrideCtx); })();

29. JSLink (function(){ // Initialize the variable that store the objects. varoverrideCtx = {}; overrideCtx.Templates = {}; // A field template. Can be static text or a function overrideCtx.Fields = { LinkTitle = { "View" : "No problem here!" } } // Register the template overrides. SPClientTemplates.TemplateManager .RegisterTemplateOverrides(overrideCtx); })();

30. JSLink (function(){ // Initialize the variable that store the objects. varoverrideCtx = {}; overrideCtx.Templates = {}; // A field template. Can be static text or a function overrideCtx.Fields = { LinkTitle = { "View" : titleFieldFunction} } // Register the template overrides. SPClientTemplates.TemplateManager .RegisterTemplateOverrides(overrideCtx); })();

31. JSLink function titleFieldFunction(ctx){ // Craft the html to be returned by the function varreturnHtml = ""; returnHtml += "<b>"; returnHtml += ctx.CurrentItem.Title; returnHtml += "</b>"; returnreturnHtml; }

32. CSR demos

33. TIP!!! _spPageContextInfo is a JS object on every SP page _spPageContextInfo.webServerRelativeUrl • http://blog.tedpattison.net/Lists/Posts/Post.aspx?ID=9 • http://johnliu.net/blog/2012/2/3/sharepoint-javascript-current-page-context-info.html

34. _spPageContextInfo

35. Contact Details Gary Payne http://www.smallsteps.co.nz Gary.payne@smallsteps.co.nz Nick Hadlee @nickhadlee http://nickhadlee.wordpress.com nicholas.hadlee@intergen.co.nz