Due to the nature of this material, this document refers to numerous hardware and software products by their trade names. References to other companies and their products are for informational purposes only, and all trademarks are the properties of their respective companies. It is not the intent of ProTech Professional Technical Services, Inc. to use any of these

names generically

"Charting the Course ...

... to Your Success!"

MOC 55191 A JavaScript deep-dive for SharePoint Developers

Course Summary Description

This three-day instructor-led course is intended for Experienced Microsoft SharePoint developers who want to be able to create client-side applications and/or SharePoint add-ins using JavaScript. In the course, students learn the basics and potential pitfalls of JavaScript and jQuery. They are also introduced to the SharePoint app model and to the JavaScript Clientside Object Model. Students learn how to communicate with SharePoint using REST and OAuth. Also, JSLink is introduced as a way to customize SharePoint rendering. Finally, some popular JavaScript libraries are presented and used within a SharePoint context: Angular.js, Breeze.js. Objectives

At the end of this course, students will be able to:

Write basic JavaScript

Write JavaScript functions

Use some advanced JavaScript patterns like Module and Class

Use new features introduced with the ECMASCRIPT 5 standard

Query and Manipulate the DOM and respond to DOM events using JQuery

Create a SharePoint add-in

Use JSOM to communicate with SharePoint

Use REST to communicate with SharePoint, optionally using OAuth for authentication

Use JSLink to customize how SharePoint renders parts of the interface

Have an understanding of what Breeze.js can do within a SharePoint context

Write a Single Page Application using Angular.js within SharePoint

Topics

JavaScript Introduction

JavaScript Language

Modern JavaScript

JavaScript Patterns

JQuery Overview

JQuery Querying

JQuery Events

JavaScript Client Object Model

JavaScript Client Object Model and the Cross Domain Library

JavaScript and REST

Introducing apps for SharePoint

SharePoint App Fundamentals

OAuth and ADAL

Breeze.js

Branding your sites with JavaScript

JSLink

Creating Single Page Applications in SharePoint using Angular.js

Audience

This course is intended for experienced SharePoint developers with limited to intermediate JavaScript experience. They should be familiar with common SharePoint terminology. Prerequisites

Before attending this course, students must have:

Experience using Microsoft SharePoint

Experience developing Farm and/or Sandboxed solutions for SharePoint

Experience creating projects with Microsoft Visual Studio Duration

Three days

Due to the nature of this material, this document refers to numerous hardware and software products by their trade names. References to other companies and their products are for informational purposes only, and all trademarks are the properties of their respective companies. It is not the intent of ProTech Professional Technical Services, Inc. to use any of these

names generically

"Charting the Course ...

... to Your Success!"

MOC 55191 A JavaScript deep-dive for SharePoint Developers

Course Outline I. JavaScript Introduction

This module explains about the origins of JavaScript and introduces the student to what JavaScript is.

A. What is JavaScript B. What is ECMAScript C. Using libraries to extend JavaScript

functionality D. Debugging JavaScript with the browser

debugger

II. JavaScript Language

This module explains how to write basic JavaScript. It describes how to create and use variables and the types that are available in JavaScript. Also, it explains about objects in Javascript, including some out-of-the-box objects like Date, Array, Math, etc. The module shows how to write functions and explains about the scopes they create. Prototypes are also introduced. Error handling is the last part of this module.

A. Variables, Objects, Arrays and Functions B. JavaScript Scopes and Closures C. Function Parameters D. Function Constructors E. Prototypes F. Error handling

Lab : JavaScript Basics

Read a number input from a user and compare it with a random value

Write a function to test the elements of an array

Write a function that transforms the casing of a string

Write a rock-paper-scissors game using JavaScript objects

Solve a JavaScript scope problem

III. Modern JavaScript

This module explains how to write JavaScript using the ECMAScript 5 standard. It explains about strict mode, accessor properties, some new methods and native JSON support. Next, some guidelines are given as to writing maintainable JavaScript code. It takes a look at some handy tools you can use to enhance your script.

A. Strict Mode B. Accessor Properties C. New methods in ECMAScript 5 D. JavaScript and JSON E. Writing maintainable code F. Code verification and minimization

IV. JavaScript Patterns

This module explains how to use some of the most popular patterns in JavaScript.

A. Callback Pattern B. Options hashing C. Self-invoking functions D. Class Pattern E. Module Pattern F. The self reference

V. JQuery Overview

This module explains what JQuery is and how we can use it from JavaScript. It also introduces the student to companion libraries and plugins for JQuery. This chapter covers the basics of JQuery selectors, JQuery wrapped objects, JQuery chains and some utility functions. The student also discovers how to extend the JQuery framework.

A. JQuery core, libraries, plugins B. Why JQuery? C. Fundamental elements and concepts D. JQuery and other libraries

VI. JQuery Querying

This module explains how to select elements from the Document Object Model using JQuery selectors. The student gets an overview of all the possible selectors and their use.

A. jQuery selectors: Element, Class, ID, etc. B. Managing wrapped element sets C. Traversing the Document Object Model

VII. JQuery Events

This module explains how the event model works inside the Document Object Model. It explains what a DOM level 0 and level 2 event is. The students is shown why browser differences make development with events difficult. Next, the student will learn that jQuery solves the cross-browser issues and gives us a unified event model.

A. The event programming model B. DOM Level 0 event model C. DOM Level 2 event model D. JQuery unified event model

Lab : Programming the jQuery event model

Select DOM elements

Do a calculation based on the elements attributes

Toggle elements in the DOM based on user input

Due to the nature of this material, this document refers to numerous hardware and software products by their trade names. References to other companies and their products are for informational purposes only, and all trademarks are the properties of their respective companies. It is not the intent of ProTech Professional Technical Services, Inc. to use any of these

names generically

"Charting the Course ...

... to Your Success!"

MOC 55191 A JavaScript deep-dive for SharePoint Developers

Course Outline (cont’d)

VIII. JavaScript Client Object Model

This module explains how to use the JavaScript Client Object Model – JSOM – to read data from or write data to SharePoint. The student will learn how to access different data sources like taxonomy, user profiles, etc. Also, we take a look at some common JavaScript functionalities in SharePoint: Dialogs, Status Bar messages and notifications.

A. JSOM overview and limitations B. Getting started with JSOM C. Performing Operations with JSOM D. Using SP.ListOperation E. Using SP.UI

Lab : Performing Operations With JSOM

Load the necessary JavaScript libraries

Load User Profile information

Creating an announcement from JSOM

Load Follow data from SharePoint

Allow users to Unfollow

IX. JavaScript Client Object Model and the Cross Domain Library

This module explains in what scenario’s we need to use the Cross Domain Library that SharePoint provides. The student will learn how the library works and how he can perform cross-domain requests.

A. Scenario B. How it works C. Executing a cross-domain request

X. JavaScript and REST

This module explains how to call the SharePoint REST web services from JavaScript. Students will learn the basics of an AJAX request and how they can be performed using jQuery. They will also learn how the REST url’s are built, thus explaining the ODATA standard. Finally, students will learn that cross-domain request can also be made using CORS.

A. REST and OData fundamentals B. SharePoint 2013 REST API C. AJAX D. Programming with REST E. Solving cross domain issues with CORS

XI. Introducing apps for SharePoint

This module explains what the SharePoint App model is, and why it is useful. It explains when to choose the app model and when not to.

A. Why apps? B. SharePoint 2010 Application Challenges C. App principles

XII. SharePoint App Fundamentals

This module explains how to create an app for SharePoint. The student will learn about the different hosting options for apps and which one to pick. In this module we also take a look at the app content, generated by visual studio. Students will learn what kind of artifacts an app can contain. They will also learn what an app package consists of and how it gets deployed – to the app catalog or the public marketplace.

A. App web & host web B. App hosting options C. Building a SharePoint Hosted app D. App entry points E. Deployment F. Tenancies and app installation scope

Lab : Building a SharePoint hosted weather app

Creating a SharePoint hosted app

Loading the weather content

Creating an app part

Adding an app part property

Use JavaScript to load weather dynamically

XIII. OAuth and ADAL

This module explains what OAuth is and how it fits into the App model for SharePoint. In this chapter, students will also learn what ADAL is and how it makes life easier when implementing OAuth

A. Azure AD B. Adding Apps C. OAuth for Apps D. ADAL Overview

XIV. Breeze.js

This module explains what Breeze.js is and how it is useful within a SharePoint context. Students are shown how to create an EntityManager and how to add Entities to it. Next, the student will learn how to perform operations using the Breeze library.

A. What is Breeze B. OData Web Services C. Breeze.js D. Integrating Breeze with SharePoint

Due to the nature of this material, this document refers to numerous hardware and software products by their trade names. References to other companies and their products are for informational purposes only, and all trademarks are the properties of their respective companies. It is not the intent of ProTech Professional Technical Services, Inc. to use any of these

names generically

"Charting the Course ...

... to Your Success!"

MOC 55191 A JavaScript deep-dive for SharePoint Developers

Course Outline (cont’d)

XV. Branding your sites with JavaScript

This module explains what can be done with JavaScript in regard to branding. The students will learn how to brand the App Web by loading the SharePoint Chrome Control and/or Style Sheets. The student will also learn how to inject JavaScript into the Host Web, thus giving us options to modify and brand the Host Web’s look and feel. Finally, the student will learn how to use SharePoint’s Minimal Download Strategy for his own files.

A. Loading the Chrome Control B. Loading the SharePoint style sheets C. Injecting JavaScript into the Host Web D. Applying Minimal Download Strategy

XVI. JSLink

This module explains how to use JSLink to modify the default rendering of SharePoint. Students will learn how to override the rendering of a certain field for all or some views. They will also learn how to override an entire view. Next, they will learn how to couple JSLink files from code or within SharePoint solutions.

A. JSLink introduction B. Basic syntax C. Using list item values in JSLink D. How to use functions in JSLink E. JSLink in features and code F. Performance Impact

Lab : Customizing List Web Parts with JSLink

Use JSLink to calculate a value based on other columns in a view

Use JSLink to render a view of announcements as an accordion

Render an address field as a map, using the bing maps API

XVII. Creating Single Page Applications in SharePoint using Angular.js

This module explains what Angular.js is and how it can be used in a SharePoint context. Students will learn the basics of Angular data binding, applications, controllers, routing, etc… Students will learn what libraries to load and how to set up a Single Page Application within a SharePoint context

A. What is Angular and why use it? B. MVVM/MVC pattern C. Data Binding D. Dependency Injection E. Modules and Scopes F. Factories and Services G. Single Page Applications: Routing and

Partial Views Lab : Creating a Single Page Application using Angular.js within a SharePoint hosted App

Create a SharePoint hosted app

Load Angular.js

Binding Angular into an app page

Create an Angular Application

Create an Angular Controller

Create an Anguler Service that will call into SharePoint REST

Setup Angular routing