55191: Advanced SharePoint Development

Transcription

1 Let s Reach For Excellence! TAN DUC INFORMATION TECHNOLOGY SCHOOL JSC Address: 103 Pasteur, Dist.1, HCMC Tel: ; traincert@tdt-tanduc.com Website: : Advanced SharePoint Development Duration: 03 days Level: 200 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. Authorized Training Silver Learning Authorized Training Authorized Training

2 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 AT COURSE COMPLETION After completing 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 COURSE OUTLINE Module 1: JavaScript Introduction This module explains about the origins of JavaScript and introduces the student to what JavaScript is. What is JavaScript What is ECMAScript Using libraries to extend JavaScript functionality Debugging JavaScript with the browser debugger Understand where JavaScript is loaded and run User the browser debugger to debug JavaScript code [1]

3 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. Variables, Objects, Arrays and Functions JavaScript Scopes and Closures Function Parameters Function Constructors Prototypes 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 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. Strict Mode [2]

4 Accessor Properties New methods in ECMAScript 5 JavaScript and JSON Writing maintainable code Code verification and minimization 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. Callback Pattern Options hashing Self-invoking functions Class Pattern Module Pattern The self reference 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. JQuery core, libraries, plugins Why JQuery? [3]

5 Fundamental elements and concepts JQuery and other libraries 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. jquery selectors: Element, Class, ID, etc. Managing wrapped element sets Traversing the Document Object Model 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 crossbrowser issues and gives us a unified event model. The event programming model DOM Level 0 event model DOM Level 2 event model 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 [4]

6 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. JSOM overview and limitations Getting started with JSOM Performing Operations with JSOM Using SP.ListOperation 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 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. Scenario [5]

7 How it works Executing a cross-domain request 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. REST and OData fundamentals SharePoint 2013 REST API AJAX Programming with REST Solving cross domain issues with CORS 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. Why apps? SharePoint 2010 Application Challenges App principles Understand the SharePoint app model Understand when the app model fits a business need [6]

8 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. App web & host web App hosting options Building a SharePoint Hosted app App entry points Deployment 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 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 Azure AD Adding Apps OAuth for Apps ADAL Overview [7]

9 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. What is Breeze OData Web Services Breeze.js Integrating Breeze with SharePoint 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. Loading the Chrome Control Loading the SharePoint style sheets Injecting JavaScript into the Host Web Applying Minimal Download Strategy 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 [8]

10 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. JSLink introduction Basic syntax Using list item values in JSLink How to use functions in JSLink JSLink in features and code 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 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 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 [9]

11 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 Load and use Angular.js Create an Angular application Create Angular Controllers, Services, etc. Create a Single Page Application with Angular Setup Angular routing [10]