1 / 37

Fun with SharePoint, jQuery, and “ jWhatever ”

Fun with SharePoint, jQuery, and “ jWhatever ”. Mary F. Harvey Principal Consultant Lighthouse Computer Services. Who’s Mary?. Microsoft Developer for over 20 years

clemance-legend
Download Presentation

Fun with SharePoint, jQuery, and “ jWhatever ”

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. Fun with SharePoint, jQuery, and “jWhatever” Mary F. Harvey Principal Consultant Lighthouse Computer Services

  2. Who’s Mary? Microsoft Developer for over 20 years Natural Language Understanding, Enterprise Document Management, Custom Web Application Development, eCommerce, and then came… SharePoint (since 2003 Beta) Currently: Principal Architect Lighthouse Computer Services Microsoft Technology Group In Lincoln, RI http://www.lighthousecs.com mharvey@lighthousecs.com, @maryha10 Also: Avid Red Sox Fan and Ballroom Dancer http://mlb.mlb.com/mlb/gameday/index.jsp?gid=2014_04_12_bosmlb_nyamlb_1

  3. Introduction for Today’s Session Web Parts Pros: generated as part of the SharePoint ASPX page so easier to interact with the site data, automatically uses the page CSS definitions, web part connections Problem: Server-side solution deployment App Parts Pros: no server-side solution deployment required, can be built in any technology, still able to access site information on behalf of the user with the App permissions Problem: not really part of the page – embedded in an iframe JavaScript/jQuery solutions Resulting HTML is embedded as part of the page as a Web Part No server-side deployment Use On-Premises, in the Cloud, in SharePoint Host itself as well as in Apps

  4. On the Menu for Today What you need to know jQuery and associated Plugins and Packages JavaScript-Based Application Frameworks Accessing SharePoint data from the client Putting the pieces together – Examples/Demos! Packaging and Deployment?

  5. What You Need to Know

  6. jQuery A JavaScript library released in 2006 that facilitates DOM Manipulation From document.getElementById('test').style.display='none'; to $("#test").hide() But that was just the beginning…

  7. jQuery UI and other Packages What’s out there for jQuery coolness? “Free” downloadable components jQuery Plugins –http://plugins.jquery.com/ jQueryUI– http://jqueryui.com/ Full Calendar – http://arshaw.com/fullcalendar/ Charting – http://www.jqplot.com/ Etc. Commercial Component Packages/Suites Wijmo – from ComponentOne - http://wijmo.com/ jQWidgets – http://www.jqwidgets.com/ Charting – http://www.jqchart.com/ Many others

  8. jQuery Demos What’s out there we could use in SharePoint?

  9. JavaScript-based Application Frameworks Knockout.js (http://www.knockoutjs.com) A jQuery library using MVVM for data binding to HTML elements and observables for dynamic updates AngularJS (http://www.angularjs.org/) A framework that uses MVW (Model-View-Whatever) to dynamically update the UI. Great for single page applications (or single div!). Backbone A JavaScript library with a RESTful JSON interface and is based on the model–view–presenter (MVP). Designed for developing single-page web applications, and for keeping various parts of web applications (e.g. multiple clients and the server) synchronized

  10. Knockout Demo http://knockoutjs.com/examples/contactsEditor.html

  11. Getting (Setting) SharePoint Data JSOM – The SharePoint JavaScript Object Model varclientContext = new SP.ClientContext(siteUrl); varoWebsite = clientContext.get_web(); this.collList = oWebsite.get_lists(); clientContext.load(collList); clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed)); SharePoint REST API https://server/sites/somesite/_api/... Client-Side Rendering – JS Link SPServices – jQuery library for SharePoint Web Services from CodePlex

  12. REST to JSON Demo Don’t be intimidated by the REST xml

  13. Example function getWebData(‘/sites/demosite/_api/web’) { $.ajax({ url: url, method: "GET", headers: { "Accept": "application/json; odata=verbose" }, success: function (data) { $('#webdata').text(data.d.Title); }, error: function (error) { $('#getwebdataerror').text(error.message); } }); }

  14. Some Caveats with Using JavaScript When accessing SharePoint data, you are limited to the current user’s security Web Part Pages/Publishing pages vs. Wiki Pages Edit Mode – Be wary of manipulating the SharePoint DOM elements! Minimal Download Strategy Package conflicts Lotsof versions – be sure to check/test compatibility! Browser Compatibility

  15. Putting the Pieces Together – Demos!

  16. First, Need Some Reference Files What needs to be referenced? JavaScript Libraries CSS Files Images Loaded via the Master Page? Only once in a site For a Publishing site – can apply to all sites For Collaboration – have to set the master page in each site Loaded within a CEWP or Script Editor Web part? A lot of references, have to add to each page Would be nice to have a “complete” part, but what if have multiple on one page? Use a Loader CEWP in the Web Part Gallery so only loaded once

  17. Where to Keep Files? Site If only used within that site Site Collection Used throughout site Used in site templates Common CEWP Snippets “Common” Site Collection (/sites/common) Used across the farm (except snippets) Site Assets Library – My Personal Preference scripts css images snippets

  18. Dropdown Search/Filter Demo Great for long lookup lists

  19. Apply Widgets to Forms Edit a List Form (New, Display, Edit) Using a WijmoComboBox Add CEWPs to Bind Widget to DOM element <script type="text/javascript"> $(document).ready(function () { $(“select[id*=‘Client_’”).wijcombobox({ showingAnimation: { effect: 'blind' }, hidingAnimation: { effect: 'blind' } }); }); </script>

  20. Accordion List View Demo A new format for News and Announcements!

  21. List View Web Parts, CSR and Widgets List View Web Part Set up the View to contain the data to be displayed JS Link Property under Miscellaneous ~sitecollection/_catalogs/masterpage/scripts/mycustomdisplay.js Generates html structure needed for attached widget Bind Wijmo Accordion (Content Editor Web Part) $(document).ready(function () { $("#accordion").wijaccordion(); });

  22. Table of Contents Demos Not really happy with the Table of Contents Web Part, so …

  23. JSOM and jQuery – Early Version JSOM – Extracts the webs hierarchy (without security errors) varweb; varwebCollection; context = new SP.ClientContext.get_current(); webCollection= web.getSubwebsForCurrentUser(null); context.load(web); context.load(webCollection); context.executeQueryAsync(function () { … } Use jQuery to generate DOM Structure listDiv = $("#result"); listDiv.append('<p><span class="ms-rteFontSize-4">' + web.get_title() + ' Sites</span></p>');

  24. Browse Sites Widget – A cooler version Knockout View Model with Items (the Site Hierarchy) Data-bind the jqWidgets Tree to the View Model source Apply Bindings Loads the View Model Uses REST to get the hierarchy of Webs /[path]/_api/web/Webs Uses Webs url from REST to get the next layer

  25. jQuery and Knockout <script type=“text/javascript”> varvm = new WebsModel(); // Bind ViewModel to DOM ko.applyBindings(vm, $('#KnowledgeBaseTree').get(0)); // Bind DOM to widget $('#tree').jqxTree('expandAll') // load data getWebs('/sites/demoteam/kb/_api/web/Webs', vm.items); </script> <div id="KnowledgeBaseTree"> <h2>Browse the Knowledge Base</h2><br /> <div style="float: left; margin-left: 50px;"> <div data-bind="jqxTree: {source: items, theme: getDemoTheme()}" id="tree"></div> </div> </div>

  26. AngularJS Demo Very basic as that’s where I’m at

  27. A Little Architecture and Design Need to think about your application – Module, Controller, Views, Services, etc. Most examples: “<html ng-app>: “The ngApp directive designates the root element of the application and is typically placed near the root element of the page - e.g. on the <body> or <html> tags.” Recommend trying in a SharePoint app! But can also be placed in a div! Recommend for embedding in SharePoint Pages to avoid interfering with standard DOM In Demo: the basic: Module, Controller, View for Dialog Using the Angular Bootstrap UI for a Modal Dialog: $modal

  28. “Single ComponentApplication” Demo Not exactly a single page application

  29. Contact Editor Details Created Contacts View Model – contacts.js Contains the current contact information and a list of contacts Methods to Load, Select, Add, Update, and Delete Uses REST to get and set data Note: Manually sets the data in a Contact object, but a more powerful method would be Knockout.js mapping (ko.mapping) that automatically creates/maps a view model based on JSON.

  30. Wrapping up …

  31. Common Resources Common JavaScript libraries, CSS, and Image files “Common” Site collection Root site collection – need to account for security – everyone may need access including external users How Included on a Page? Master Page? Note: Site Templates saved without contents will use the defaultseattle.master. Save site templates that need this master page with content. Content Editor Web Part? Script editor web Part?

  32. Application Client-side Components In one or more referenced JavaScript files – Include: View Models Utility Methods The “Web Part”: In a Script EditorWeb Part Cannot be exported – “One Offs” But can add HTML directly in page In a Content Editor Web Part – More Reusable I like snippet files – add an HTML link to the CEWP Great for maintaining multiple instances of the component! Loads any JavaScript files not in the master page HTML structure Sets variables for that context Export and add to Web Part Gallery or add to Site Template

  33. Resources jQuery – http://jquery.com jQueryUI – http://jqueryui.com Knockout JS – http://knockoutjs.com AngularJS - http://angularjs.org/ Demos http://jqueryui.com/demos/ http://i-like-robots.github.io/EasyZoom/ http://www.agilecarousel.com/ http://arshaw.com/fullcalendar/ http://www.jstree.com/ JSOM, REST, CSOM: JSOM Index: http://msdn.microsoft.com/en-us/library/office/dn268594(v=office.15).aspx

  34. More Resources SPServices – jQuery Library for SharePoint Web Services: http://spservices.codeplex.com/ Josh McCarty Blog on Full Calendar with SPServices: http://joshmccarty.com/2011/11/sharepoint-jquery-and-fullcalendar%E2%80%94now-with-spservices/ Commercial Packages Charting – jQChart - http://www.jqchart.com/ Display and Charting with Knockout and AngularJS support: Wijmo – http://wijmo.com jqWidgets - http://www.jqchart.com/ Quick Primer on CSR/JS Link http://www.idubbs.com/blog/2012/js-link-for-sharepoint-2013-web-partsa-quick-functional-primer/ Doing CRUD with REST and jQuery: http://martinbodocky.wordpress.com/2013/01/25/crud-operations-by-rest-services-in-sharepoint-2013/

  35. Thanks to our sponsors!

  36. One final note Fill out Session evaluation Fill out your “Golden Ticket” event evaluation form & turn in for the big raffle at the Closing (4th Floor) XBoxes!! Tweet! #spsbos

  37. Thank You! My Email: Twitter: @maryha10

More Related