Beginning SharePoint Development with JavaScriptJared Matfess, SharePoint Architect

Thanks to our Sponsors! Platinum:

Gold:

Silver:

Raffle:

More Fun StuffRaffle: Please join us in the Atrium at 5:15 PM for the raffle. We are

raffling some exciting prizes including Fitbits, HP tablets, and who knows, maybe a Surface 3 (need to be present to win)!!!

SharePint will be held at Mad Mex (370 Atwood St, Pittsburgh, PA 15213). While it starts at 5:30 PM, there’s no end time!!!!

Pittsburgh Area SharePoint User GroupMeets at the Microsoft office on the North Shore More Info:

https://www.linkedin.com/groups/Pittsburgh-Area-SharePoint-User-Group-3769745/about

We do Request that…You fill out the Session Evals. These will also be your Raffle tickets.

Print your name clearly if you intend to participate in the Raffle and drop the forms at the registration desk after the last session.

You visit the sponsors. The event is possible due to their generous support and we request that you visit them and inquire about their products & services.

Cell phones be kept on silent as a courtesy to other attendees and speakers

5

About Me

Solution Architect with Slalom Consulting

10+ years in the IT Field

Happily married for 4 years!

President of CT SharePoint Users Group (www.ctspug.org)

Blog: www.jaredmatfess.com

Twitter: @JaredMatfess

E-mail: JaredM@slalom.com

We design and build strategies and systems to help our clients solve their most complex and interesting business challenges.

Our Services Information

Managementand Analytics

OrganizationalEffectiveness

Delivery Leadership

CustomerEngagement

Products andInnovations

TechnologyEnablement

Strategy andOperations

7

8

Dig the session? If you dig the session, feel free to thank:

@SlalomHartford

9

Client-side development Specifically JavaScript injected into SharePoint – no Apps

A brief primer on JavaScript Just the bare minimum what you should know to get going..

An even more brief primer on SharePoint REST – how it works, why you should care Basically how to get this client-side goodness into SharePoint

Some 3rd Party Libraries you might want to check out

* This presentation is a hybrid of one I gave with Chris LaQuerre (VP of CTSPUG) last year with some updated content, etc…

What I plan to cover…

Undated photo of Chris & I

10

Session Warning…. There’s going to be a little bit of code

I love pugs, so you might see a few in this presentation

Stop me if I’m talking too fast, I get a little excited!

Client-side DevelopmentWhat is it? Why would I want it? How do I get started?

11

12

So what is this client-side development?

13

Traditional SharePoint Development C#/.NET wizards would write lots of code

Code is compiled into a .WSP file

File is deployed to the SharePoint farm Added to SP Global Assembly Cache (GAC)

Either good things happen, or stuff breaks SharePoint Admins get made when stuff breaks

Lather, rinse, repeat

14

New hotness – Client-side Development Code is not deployed on the server

SharePoint App Model Injecting JavaScript into your site collection (what we’re going to cover)

Code leverages Client-side Object Model (CSOM)

*Warning* Code by default runs under the privilege of the user executing it SharePoint Apps help you get around this by granting the app access to resources

15

Client-side Dev + JavaScript: “It’s for your benefit” With its sudden rise in popularity, JavaScript translates to opportunities outside

of SharePoint

You can rapidly deploy solutions without upsetting the Farm admins Client side mitigates a lot of the risk of deploying server side code which tends to break

stuff from time to time

O365 doesn’t support server side solutions Microsoft is investing heavily to improve the SharePoint REST API It’s becoming an absolutely viable solution for SharePoint Development

16

Microsoft’s Position – More JavaScript Please!

http://channel9.msdn.com/Blogs/Office-365-Dev/JavaScript-injection-in-SharePoint-Online-Office-365-Developer-Patterns-and-Practices

17

Change in thinking – client side first!

Server Side Code Timer jobs Custom site definitions 3rd party products where you have no choice Custom workflows (when you don’t own Nintex or K2)

Client Side Code Everything else

18

What do I need to get started? SharePoint / O365 environment

Text Editor Web Storm Visual Studio NotePad++ SharePoint Designer!

Hardcore-Developer might scoff but SharePoint Designer is an awesome tool when you’re first getting started

19

Where do I put my scripts?

Option #1

Embed in Script Editor Web Part (SP2013)• Please don’t

Option #2

Document Library – Reference via Content Editor Web Part!• Enable Versioning (just in case)

Option #3

Drop it in the hive (on premise only)?• Only if you want to dance with danger

Option #4

Bundle with a SharePoint App (2013 only)

Primer on JavaScript & jQueryJust to get you going…

20

The history of JavaScript in a PowerPoint Slide 1995 LiveScript written in 10 days

1997 Browser wars escalate

1999 JavaScript ES3 (do-while, RegEx, exception handling)

2005 Ajax coined

2006 Rise of libraries (jQuery, YUI, Dojo, MooTools)

2009 JavaScript ES5 (Strict mode, getters / setters / JSON)

2010 Browsers are somewhat standard

2011 Rise of the frameworks (Angular, Ember)

2012 Server-side JavaScript gains popularity

2014 Jared & Chris give their first talk on SharePoint Development with JavaScript

The Nature of JavaScript

22

Its dynamic Objects can be directly created without first creating an object factory (e.g. a class) Properties can be freely added and removed from objects after creation

It fails silently Exception handling wasn’t added until ECMAScript 3 which is why the language often

fails silently and automatically converts the values of arguments and operands

It’s deployed as source code Anyone can view the source Compression and magnification are frequently used for performance and obfuscation

It’s part of the web platform JavaScript is an essential part of the web (HTML5 APIs, DOM, etc.) JavaScript is increasingly being used in non-browser settings (ex: Node.js)

23

AJAX / $.ajax

Asynchronous Javascript & XML With or without XML

This transformed JavaScript from being a light scripting language to a data driven application platform

Sends and receives data in a variety of formats – JSON, XML, HTML, and Text

Allows you to send/receive without the need to refresh the page Makes web applications feel like desktop applications

24

AJAX is how you are going to retrieve data from SharePoint when you develop your solutions

You will specify JSON (JavaScript Object Notation) – similar to XML

It will enable you to update portions of your page while leaving others untouched!

Why should you care about AJAX?

25

Then there was jQuery jQuery is an uber-popular library which is run by <insert high % number> of

websites

jQuery’s “sweet spot” is making changes to the Document Object Model (DOM) jQuery is all about the Selectors

Everything that you do with jQuery can be done with JavaScript – it’s just easier to do in jQuery

Be mindful there’s two “tracks” for jQuery 1.x (IE8 / legacy browser compatibility), 2.x (modern browsers)

26

jQuery API: All about the selectors!

jQuery Selectors Demo

27

28

Where does jQuery go?

Consider hosting jQuery in an internal “CDN” Avoid the “SharePoint’s down” - when it’s not Consolidate lots of jQuery files everywhere

One suggested approach would be to call it jquery.minand use a separate column for version info so yourdocumentation will always be correct Downside is you need to test more applications before

you “upgrade jQuery”

SharePoint & CSOMBuilding the house

29

Getting Data In & Out of SharePoint SharePoint’s REST API

Can be leveraged inside & outside of SharePoint

Client Context Class of SharePoint Object Model Requires SharePoint specific JavaScript files already loaded to use

In my opinion, it’s much easier to get started with learning REST first (at least for Read operations)

31

REpresentational State Transfer (REST) Something Roy Fielding described in 2000 as a way to share data over HTTP

REST (or RESTful) services are based on four design principles:

1. Use HTTP methods explicitly (POST, GET, PUT, DELETE)

2. Be stateless

3. Expose directory structure-like URIs

4. Transfer XML, JavaScript Object Notation (JSON), or both

Implementation details of a RESTful service are left up to the implementer

32

Refresher on HTTP Verbs HTTP POST – create a new entry (CREATE NEW)

HTTP GET – retrieve resources (READ)

HTTP PUT – update/replace the resource being targeted (UPDATE)

HTTP Delete – delete the resources (DELETE)

33

Working with REST

Since REST uses HTTP methods you can test your queries in the browser

https://ctsharepointusergroup.sharepoint.com/bootstrap/_api/Web/Lists/GetByTitle('CustomNews')

34

Working with IE (shudder)

Not helpful

35

Let’s fix that right quick!

36

This is way more helpful!

37

SharePoint is like me.. It butchers names..

38

jQuery + REST (So Happy Together!) $.ajax function is my preferred method for executing an ajax command against

SP’s REST API

$.ajax({

url: “/sites/ctspug/_api/web/lists/getbytitle('Fake%20Data')/items”, type: “GET”, headers: { “accept”: “applicaton/json;odata=verbose” }

});

39

And back comes the goodness… You’re either going to get a single item or a collection of items:

data.d.results[i].column = collection data.d[i].column = single item

Fiddler will be your friend!

Big Demo Time..First you show the demo..Then you show the code..Then you rule the world..

40

Please work…

41

23

4

5

6

1

42

1

• Add empty <div> to page with unique ID

• HTML will be dynamically be written to <div> later using JavaScript

43

• Add custom CSS references

• Add jQuery reference (local or CDN)

2

3

• Use jQuery’s $( document ).ready() to wait until the Document Object Model (DOM) for the page is ready for JavaScript code to execute

• The ‘use script’ directive (introduced in ECMAScript 5) enforces rules / safeguards such as requiring variables to be declared before use

4

• jQuery $.ajax call asynchronously executes REST call to get List data

• Requested data format is JSON

• Success or Error function is executed on completion

46

5

• Success function initialized empty array to hold HTML that will be written to page

• For loop iterates through all items and builds HTML

• HTML is written to empty <div> on page

47

6

• Error function will execute if an error is returned by the AJAX call

• Displaying a JavaScript alert that says “error” is not a best practice

48

Creating Data using REST

3rd Party Libraries“Helping to make you awesome…”

49

*Boiler-plate warning for 3rd party libraries* If you choose your libraries wisely, you can really enhance your solutions with

minimal effort

Most of the time you can benefit from someone else's’ struggle to maintain cross-browser compatibility

The more libraries you include, the more bits flowing over the network line

Some libraries do not play nicely together

When to use libraries? It depends..

51

Obligatory Nascar Slide

52

Moment JS An amazing library for working with dates & times..

http://www.momentjs.com

53

jQueryUI Lots of cool “widgets” to spice up your JavaScript solutions

Be careful to only take what you need.. Otherwise it’s a pretty big include

http://www.jqueryui.com

54

Data Tables An amazing library that formats your data into a table (duh) and it looks

awesome!

http://www.datatables.net

Books, books, and more books...

55

Talk to your SPUG leader about discounts on books!

56

Helpful Pluralsight Courses

Developing SharePoint 2013 Solutions with JavaScript

http://www.pluralsight.com/courses/developing-sharepoint-2013-javascript

SharePoint 2013 Development: Client Object Model & REST API

http://www.pluralsight.com/courses/sharepoint-2013-client-object-model-rest

© 2014 Slalom, LLC. All rights reserved. The information herein is for informational purposes only and represents the current view of Slalom, LLC. as of the date of this presentation.SLALOM MAKES NO WARRANTIES, EXPRESS, IMPLIED, OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.