1 / 17

Getting Started with Knockout, jQuery, and REST in SharePoint

Getting Started with Knockout, jQuery, and REST in SharePoint. SharePoint Saturday Omaha October 11, 2014. About Me…. Former Trainer / Consultant with SharePoint Working with SharePoint since SharePoint 2007 Working for Boys Town as SharePoint Developer / Architect

conan-gates
Download Presentation

Getting Started with Knockout, jQuery, and REST in SharePoint

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Getting Started with Knockout, jQuery, and REST in SharePoint SharePoint Saturday Omaha October 11, 2014

  2. About Me… • Former Trainer / Consultant with SharePoint • Working with SharePoint since SharePoint 2007 • Working for Boys Town as SharePoint Developer / Architect • http://www.Boystown.org / http://www.boystownhospital.org

  3. Outline • The SharePoint 2013 App Model • Make SharePoint 2010 Development Future-Ready • Let’s Talk jQuery • Tools You Should Know • Getting Data with REST • Alternatives and Additions to REST • Data Presentation Frameworks • Introduction to KnockoutJS • Adding Additional Frameworks • Internet Facing and Other Caveats

  4. The SharePoint 2013 App Model • New method of developing in SharePoint 2013 • Dramatic change from the previous versions • Goal to have as much code as possible run outside the SharePoint Worker Process • Numerous Benefits • Downside? • Remote Hosted vs. SharePoint Hosted Apps • Trying to Find the Analog between how we used to do things vs. how we do things now • Can significantly slow down migration to SharePoint 2013, especially if moving to O365 and the cloud • Learning the core development techniques that are needed to be effective in SharePoint 2013 as a developer

  5. Custom Code Future Ready • Perhaps Upgrade from SharePoint 2010 is not happening at a fast rate in your organization • What happens when a new request that may require custom code comes in? • If you create new managed code, it may be faster, but basically an additional delay to upgrade • No app model to work with, cannot adopt the SharePoint 2013 model immediately • …or can you? • Client side object model and a REST Interface is Provided as Part of SharePoint 2010 and 2013 • Minor variations of core REST model from 2010 to 2013, but 2010 does not have the full library of APIs • SharePoint 2010 technically not HTML5 compatible, but can be “forced” that way

  6. Let’s Talk jQuery • How many use jQuery? http://jquery.com / http://api.jquery.com • Biggest Deals: • Selecting Elements – not just by ID, but by any attribute within the DOM • Dynamic Event Binding – programmatically generate HTML and bind Javascript code to it • Super easy shortcuts for AJAX support ($.ajax and $.getJSON) • Foundation for a vast array of other libraries • Validation • jQuery.UI • Etc • Notes for SharePoint: • The $ is the jQuery shortcut, however, SharePoint can use that in different places too • Consider using NoConflict • Be careful with where you add this to your page, your scripts need to run after jQuery is loaded

  7. Tools You Should Know • A Good Javascript Editor • We’ll be using SharePoint Designer with is an “Ok” Javascript editor • Visual Studio works, may pack other features we don’t want • Any input from you? • Visual Studio SPA Templates - http://www.asp.net/single-page-application • jsFiddle - http://jsfiddle.net – amazing in browser editor for testing frameworks and platforms, not ideal for full development • Fiddler - http://www.telerik.com/fiddler - watch your requests go back and forth • Please don’t install this on a production server…

  8. Get Data with REST • REST – Representational State Transfer • Got it? Good enough? • Way of getting or changing data via a browser request, defined in the URL and the verb • Better? • Sample: • /policies/FFBH/_vti_bin/listdata.svc/FFBHPolicies?$filter=GoverningPolicyID%20eq%20'7100'&$expand=PolicyDocType&$orderby=Title&$select=PolicyID,Title,EffectiveDate,PolicyDocType • Define service endpoint, list, filter, sort, and columns • Send this request, get back JSON data • Verbs: GET, POST, PUT, DELETE

  9. DEMO Getting data with REST and displaying data with jquery

  10. Alternatives or Additions to REST • Javascript CSOM (Client Side Object Model) • “Feels” more like SharePoint Server Side Code • Web, Site, List, ListItem, etc. objects • Learn batching and request timing • Still goes through listdata.svc • DataJS - http://datajs.codeplex.com/ • Works with oData (which is what listdata.svc is) • Can use JSON or ATOM • Interrogate services, get metadata information • Batching (Not entirely supported by SharePoint, but workarounds exist for that) • BreezeJS - http://www.breezejs.com/ • Uses DataJS under the hood • Feels a lot like working with DataSets • Change Tracking, Rich Queries

  11. Data Presentation Frameworks • REST is Great for Getting Data, not Showing Data • Could use jQuery and String Concatenation to Generate and Place HTML • However, I submit that this is terrible (example) • Have fun debugging that or dealing with any changes • Data presentation frameworks utilize data binding (familiar term, yes ) to surface data • Numerous templates in this fields, but the two biggest are AngularJS (https://angularjs.org/) and KnockoutJS (http://knockoutjs.com/) • How to pick? • Once you learn one well, it makes it easier to learn the other

  12. Introduction to Knockout • Implementation of the MVVM Development Pattern • Has two components, the HTML Template and the Javascript ViewModel • Uses the HTML5 compliant “data-” attribute • Great tutorial on the http://Knockoutjs.com site • SPA Example • Simple list query and data display

  13. DEMO Simple List Display that Puts it all together

  14. Adding Additional Display Frameworks • What is a “Compelling Display”? • Something that doesn’t look so much like everything else, but still looks familiar • Just like numerous data and presentation frameworks, a huge volume of UI Tools • jQueryUI - http://jqueryui.com/ • Numerous widgets (Accordions, Datepickers, etc.) • Other Interactions (Drag and Drop, Resizing, etc.) • Toastr - http://codeseven.github.io/toastr/ • Notifications Popups • D3JS - http://d3js.org/ • Good charting • Isotope - http://isotope.metafizzy.co/index.html • Interesting Display and Interactions • Something they all must do: • Be responsive (respond to browser size, device, etc.) • Have an older browser “shim” (still supporting IE8?) • Most will state that they will work fine without jQuery, but that doesn’t mean they shouldn’t use it anyway

  15. DEMO Putting it all together: Knockout, jquery, Rest, and display frameworks

  16. Internet Facing and Other Caveats • Depending on Patch Level in SharePoint 2010, listdata.svc may or may not work anonymously • This is terrible, but understandable • You may be able to adjust this with PowerShell (SPWebApplication has an AnonymousRestrictedTypes collection), but there is no guarantee this will work • Our solution was to create a custom WCF Service that would work with REST calls and host it in _vti_bin • Services are the way to go in the future anyways, right? • Why _vti_bin? • Cross Origin Requests – Services on Different Sites? • Blocked by Default • Search for CORS to find techniques to get there • Ensure the Protocol and Host is set dynamically in code! • Extended web applications can have different names • HTTP vs. HTTPS

More Related