This document summarizes a presentation about using TypeScript, Knockout, and nested grids to build data-bound grids without update panels in SharePoint. The presentation covers an overview of TypeScript, MV* frameworks with a focus on why Knockout was chosen, a code walkthrough of how Knockout works with models, view models and views, and lessons learned. It also describes the original project needing nested parent-child data display and modifications made to add inline editing capabilities.

1. APRIL 2, 2016

2. Knockout, TypeScript, and Nested Grids, Oh My!
Data-bound grids without Update Panels

3. © 2015 Applied Information Sciences, Inc.
Who is this guy?
 Software Engineer at Applied Information Sciences
 Contributing Author: Microsoft SharePoint 2013
Inside Out
 Year 10 of 15-Life with SharePoint
 @SPSamL
 Blog.samlarko.com
 Blog.Appliedis.com

4. © 2015 Applied Information Sciences, Inc.
Agenda
 Is TypeScript really useful?
 What are MV* Frameworks?
 Why Knockout, not Angular/Durandal/Aurelia?
 Code Walkthrough
> How it works
> Models
> ViewModels
> Views
> Extras (extensions, etc)
 Gotchas/Lessons learned/Facepalm moments

5. © 2015 Applied Information Sciences, Inc.
TypeScript
 Superset of JavaScript
 Strongly-typed variables
 Visual Studio Intellisense
 OOP
 Still just JavaScript
 ES Feature Implementations:
> Most ES5
> Many ES6
> Some ES7

6. MV* Frameworks
 MVC
> Controller determines Model
> Model passed to View
> View translates Model for
presentation
> ASP.NET MVC, Angular, Aurelia
 MVVM
> Model and View are same as MVC
> VM provide data-binding between
Model and View, handles UI
actions
> Does not need to reference View
> Silverlight, Knockout, UWP apps

7. © 2015 Applied Information Sciences, Inc.
Momma said Knock[you]out
 JS Library
 Features
> 2-way Data-binding
> HTML Templating
 Angular/etc are frameworks with full app features
> Routing, dependency injection, scopes, services
 Knockout in SharePoint
> Already have navigation/routing
> SharePoint JSOM or REST for services

8. © 2015 Applied Information Sciences, Inc.
Knockout Observables
Observable
Observable Array
Computed Observable
KO Utilities

9. © 2015 Applied Information Sciences, Inc.
Knockout Markup
Events
Data
Containerless binding
Attributes

10. © 2015 Applied Information Sciences, Inc.
Knockout Extensibility

11. © 2015 Applied Information Sciences, Inc.
Nested Grids – Original Project
 Project had parent-child data that needed to be displayed in single page
> Search, filter, sort, paging
> Add & edit modals
 Content Types determined relationships
 No inline editing

12. © 2015 Applied Information Sciences, Inc.
Nested Grid Demo
 Added inline editing
> Allows multiple edits simultaneously
 Knockout HTML templates

14. © 2015 Applied Information Sciences, Inc.
Lessons Learned/Gotchas

15. Questions

16. Resources
 Scot Hillier post on Promises & JSOM -
http://www.shillier.com/archive/2013/03/04/using-promises-with-the-
javascript-client-object-model-in-sharepoint-2013.aspx
 TypeScript - http://www.typescriptlang.com
 KnockoutJS - http://learn.knockoutjs.com/
 DefinitelyTyped TS Definitions - http://definitelytyped.org/
 Simple KO Grid example - http://jsfiddle.net/brettwgreen/zfxmac7z/
 Rob Niemeyer - http://www.knockmeout.net/

17. Thank you to our Sponsors!

18. STAY FOR THE RAFFLE,
JOIN US FOR SHAREPINT!
Deol Sports Bar & Grill
6851 Chase Hill Boulevard
San Antonio, TX 78249