55191 JavaScript deep-dive for SharePoint Developers

Code: 55191
Course duration: 3 days
Price:

55191 - JavaScript deep-dive for SharePoint Developers (3 Day)

About This Course

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 leard 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.

Audience Profile

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

At Course Completion

  • 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

Course Details

Module 1: JavaScript Introduction

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

Lessons

  • What is JavaScript
  • What is ECMAScript
  • Using libraries to extend JavaScript functionality
  • Debugging JavaScript with the browser debugger

Lab 1: N/A

  • N/A

After completing this module, students will be able to:

  • Understand where JavaScript is loaded and run
  • User the browser debugger to debug JavaScript code

Module 2: 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.

Lessons

  • Variables, Objects, Arrays and Functions
  • JavaScript Scopes and Closures
  • Function Parameters
  • Function Constructors
  • Prototypes
  • Error handling

Lab 1: 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

After completing this module, students will be able to:

  • Write basic JavaScript
  • Create variables and objects in JavaScript
  • Write JavaScript functions
  • Understand JavaScript scopes
  • Understand and extend JavaScript prototypes
  • Handle JavaScript errors

Module 3: 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.

Lessons

  • Strict Mode
  • Accessor Properties
  • New methods in ECMAScript 5
  • JavaScript and JSON
  • Writing maintainable code
  • Code verification and minimization

Lab 1: N/A

  • N/A

After completing this module, students will be able to:

  • Use new ECMAScript features in JavaScript: Strict mode, accessor properties, new methods and JSON
  • Write maintainable JavaScript code

Module 4: JavaScript Patterns

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

Lessons

  • Callback Pattern
  • Options hashing
  • Self-invoking functions
  • Class Pattern
  • Module Pattern
  • The self reference

Lab 1: N/A

  • N/A

After completing this module, students will be able to:

  • Use callbacks
  • User option hashing
  • Write a self-invoking function
  • Use the Class and Module patterns
  • Understand the self reference

Module 5: 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.

Lessons

  • JQuery core, libraries, plugins
  • Why JQuery?
  • Fundamental elements and concepts
  • JQuery and other libraries

Lab 1: N/A

  • N/A

After completing this module, students will be able to:

  • Use the JQuery libraries within a JavaScript context
  • Write basic JQuery syntax
  • Grasp the concept of a JQuery chain
  • Use JQuery utility functions

Module 6: 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.

Lessons

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

Lab 1: N/A

  • N/A

After completing this module, students will be able to:

  • Select elements from the Document Object Model using jQuery selectors
  • Manage the selected jQuery objects
  • Traverse the Document Object Model based on relations between elements

Module 7: 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.

Lessons

  • The event programming model
  • DOM Level 0 event model
  • DOM Level 2 event model
  • JQuery unified event model

Lab 1: 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

After completing this module, students will be able to:

  • Understand the Document Object Model event system
  • Attach events to Document Object Model elements
  • Attach event handlers to Document Object Model elements using jQuery
  • Use interesting jQuery shortcut functions to bind event handlers

Module 8: 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.

Lessons

  • JSOM overview and limitations
  • Getting started with JSOM
  • Performing Operations with JSOM
  • Using SP.ListOperation
  • Using SP.UI

Lab 1: 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

After completing this module, students will be able to:

  • Load the necessary libraries to perform JSOM
  • Perform basic JSOM operations
  • Show content in a SharePoint Dialog
  • Show status bar messages and notifications in SharePoint using JavaScript

Module 9: 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.

Lessons

  • Scenario
  • How it works
  • Executing a cross-domain request

Lab 1: N/A

  • N/A

After completing this module, students will be able to:

  • Load the cross-domain library
  • Execute a cross-domain request using JavaScript

Module 10: 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.

Lessons

  • REST and OData fundamentals
  • SharePoint 2013 REST API
  • AJAX
  • Programming with REST
  • Solving cross domain issues with CORS

Lab 1: N/A

  • N/A

After completing this module, students will be able to:

  • Compose a REST/ODATA uri
  • Call the SharePoint REST/ODATA web services
  • Create AJAX requests
  • Perform AJAX requests using jQuery
  • Use CORS to solve cross-domain issues

Module 11: 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.

Lessons

  • Why apps?
  • SharePoint 2010 Application Challenges
  • App principles

Lab 1: N/A

  • N/A

After completing this module, students will be able to:

  • Understand the SharePoint app model
  • Understand when the app model fits a business need

Module 12: 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.

Lessons

  • App web & host web
  • App hosting options
  • Building a SharePoint Hosted app
  • App entry points
  • Deployment
  • Tenancies and app installation scope

Lab 1: 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

After completing this module, students will be able to:

  • Create Apps for SharePoint
  • Understand and use App infrastructure
  • Deploy Apps
  • Install Apps

Module 13: 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

Lessons

  • Azure AD
  • Adding Apps
  • OAuth for Apps
  • ADAL Overview

Lab 1: N/A

  • N/A

After completing this module, students will be able to:

  • Understand AzureAD and OAuth
  • Understand how the ADAL library can be used

Module 14: 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.

Lessons

  • What is Breeze
  • OData Web Services
  • Breeze.js
  • Integrating Breeze with SharePoint

Lab 1: N/A

  • N/A

After completing this module, students will be able to:

  • Load the Breeze.js library
  • Setup an EntityManager in Breeze
  • Create Entities in Breeze
  • Perform operations on Entities in Breeze
  • Integrate Breeze with SharePoint

Module 15: 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.

Lessons

  • Loading the Chrome Control
  • Loading the SharePoint style sheets
  • Injecting JavaScript into the Host Web
  • Applying Minimal Download Strategy

Lab 1: N/A

  • N/A

After completing this module, students will be able to:

  • Load and use the Chrome Control from JavaScript
  • Load the SharePoint Style Sheets from JavaScript
  • Inject JavaScript into the Host Web using a custom action
  • Apply the Minimal Download Strategy to their own files

Module 16: 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.

Lessons

  • JSLink introduction
  • Basic syntax
  • Using list item values in JSLink
  • How to use functions in JSLink
  • JSLink in features and code
  • Performance Impact

Lab 1: 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

After completing this module, students will be able to:

  • Write JSLink scripts to override the default SharePoint output for fields or a view
  • Use JSLink inside code and/or solutions

Module 17: 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

Lessons

  • What is Angular and why use it?
  • MVVM/MVC pattern
  • Data Binding
  • Dependency Injection
  • Modules and Scopes
  • Factories and Services
  • Single Page Applications: Routing and Partial Views

Lab 1: 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

After completing this module, students will be able to:

  • Load and use Angular.js
  • Create an Angular application

Prerequisites

  • Experience using Microsoft SharePoint
  • Experience developing Farm and/or Sandboxed solutions for SharePoint
  • Experience creating projects with Microsoft Visual Studio

 

Course Reviews

No reviews found for this course.

Be the first to write a review