Fun with SharePoint, jQuery, and “jWhatever” Mary F. HarveyPrincipal ConsultantLighthouse Computer Services

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 GroupIn Lincoln, RIhttp://www.lighthousecs.commharvey@lighthousecs.com, @maryha10

Also: Avid Red Sox Fan and Ballroom Dancerhttp://mlb.mlb.com/mlb/gameday/index.jsp?gid=2014_04_12_bosmlb_nyamlb_1

Introduction for Today’s SessionWeb 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 connectionsProblem: Server-side solution deployment

App PartsPros: 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 permissionsProblem: not really part of the page – embedded in an iframe

JavaScript/jQuery solutionsResulting HTML is embedded as part of the page as a Web PartNo server-side deploymentUse On-Premises, in the Cloud, in SharePoint Host itself as well as in Apps

On the Menu for TodayWhat you need to know

jQuery and associated Plugins and PackagesJavaScript-Based Application FrameworksAccessing SharePoint data from the client

Putting the pieces together – Examples/Demos!Packaging and Deployment?

What You Need to Know

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…

jQuery UI and other PackagesWhat’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/SuitesWijmo – from ComponentOne - http://wijmo.com/jQWidgets – http://www.jqwidgets.com/ Charting – http://www.jqchart.com/Many others

jQuery Demos

What’s out there we could use in SharePoint?

JavaScript-based Application FrameworksKnockout.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!).

BackboneA 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

Knockout Demo

http://knockoutjs.com/examples/contactsEditor.html

Getting (Setting) SharePoint DataJSOM – The SharePoint JavaScript Object Model

var clientContext = new SP.ClientContext(siteUrl); var oWebsite = 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 APIhttps://server/sites/somesite/_api/...

SPServices – jQuery library for SharePoint Web Services from CodePlex

Client-Side Rendering – JS Link

REST to JSON Demo

Don’t be intimidated by the REST xml

Examplefunction 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); } });}

Some Caveats with Using JavaScriptWhen accessing SharePoint data, you are limited to the current user’s securityWeb Part Pages/Publishing pages vs. Wiki PagesEdit Mode – Be wary of manipulating the SharePoint DOM elements!Minimal Download StrategyPackage conflictsLots of versions – be sure to check/test compatibility!Browser Compatibility

Putting the Pieces Together – Demos!

First, Need Some Reference FilesWhat needs to be referenced?

JavaScript LibrariesCSS FilesImages

Loaded via the Master Page?Only once in a siteFor a Publishing site – can apply to all sitesFor 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 pageWould 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

Where to Keep Files?Site

If only used within that site

Site CollectionUsed throughout siteUsed in site templatesCommon CEWP Snippets

“Common” Site Collection (/sites/common)Used across the farm (except snippets)

Site Assets Library – My Personal Preferencescriptscssimagessnippets

Dropdown Search/Filter Demo

Great for long lookup lists

Apply Widgets to Forms

Edit a List Form (New, Display, Edit)

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>

Using a Wijmo ComboBox

Accordion List View Demo

A new format for News and Announcements!

List View Web Parts, CSR and WidgetsList View Web Part

Set up the View to contain the data to be displayed

JS Link Property under Miscellaneous~sitecollection/_catalogs/masterpage/scripts/mycustomdisplay.jsGenerates html structure needed for attached widget

Bind Wijmo Accordion (Content Editor Web Part)$(document).ready(function () { $("#accordion").wijaccordion();});

Table of Contents Demos

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

JSOM and jQuery – Early VersionJSOM – Extracts the webs hierarchy (without security errors)

Use jQuery to generate DOM Structure

var web;var webCollection;context = new SP.ClientContext.get_current();webCollection = web.getSubwebsForCurrentUser(null);context.load(web);

context.load(webCollection);context.executeQueryAsync(function () { … }

listDiv = $("#result");listDiv.append('<p><span class="ms-rteFontSize-4">' + web.get_title() + ' Sites</span></p>');

Browse Sites Widget – A cooler versionKnockout View Model with Items (the Site Hierarchy)Data-bind the jqWidgets Tree to the View Model sourceApply Bindings

Loads the View Model

Uses REST to get the hierarchy of Webs/[path]/_api/web/WebsUses Webs url from REST to get the next layer

jQuery and Knockout<script type=“text/javascript”>var vm = new WebsModel();// Bind ViewModel to DOMko.applyBindings(vm, $('#KnowledgeBaseTree').get(0));

// Bind DOM to widget$('#tree').jqxTree('expandAll')

// load datagetWebs('/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>

AngularJS Demo

Very basic as that’s where I’m at

A Little Architecture and DesignNeed 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

“Single ComponentApplication” Demo

Not exactly a single page application

Contact Editor DetailsCreated Contacts View Model – contacts.jsContains the current contact information and a list of contactsMethods to Load, Select, Add, Update, and DeleteUses 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.

Wrapping up …

Common ResourcesCommon JavaScript libraries, CSS, and Image files

“Common” Site collectionRoot 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 default seattle.master. Save site templates that need this master page with content.

Content Editor Web Part?Script editor web Part?

Application Client-side ComponentsIn one or more referenced JavaScript files – Include:

View ModelsUtility Methods

The “Web Part”:In a Script Editor Web Part

Cannot be exported – “One Offs”But can add HTML directly in page

In a Content Editor Web Part – More ReusableI 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 pageHTML structureSets variables for that contextExport and add to Web Part Gallery or add to Site Template

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

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/

Thanks to our sponsors!

One final noteFill 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

Thank You!

My Email:Twitter: @maryha10