This document discusses using TypeScript, Knockout, and nested grids to build data-bound grids in SharePoint without update panels. It provides an agenda that covers whether TypeScript is useful, what MV* frameworks are, why Knockout was chosen over other frameworks, a code walkthrough, and lessons learned. It then describes a nested grids demo project using Knockout templates and HTML, and concludes by discussing questions and additional resources.

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

2. © 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

3. © 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

4. © 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

5. © 2015 Applied Information Sciences, Inc.
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

6. © 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

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

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

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

10. © 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

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

12. © 2015 Applied Information Sciences, Inc.

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

14. © 2015 Applied Information Sciences, Inc.
Questions

15. © 2015 Applied Information Sciences, Inc.
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/

16. © 2015 Applied Information Sciences, Inc.
Housekeeping…
 Download Lanyrd Mobile to get to the schedule easiest
> Available on both the Google Play Store and iOS App Store
 You must be present to win at the wrap-up…
 Remember to stop by to say hi to our sponsors
 Wifi: msevent66bq

17. © 2015 Applied Information Sciences, Inc.
Thanks to our Sponsors!!!

18. © 2015 Applied Information Sciences, Inc.
Join us at #SharePint at World of Beer of Reston in the
Towncenter just across the bridge
Why? To network with fellow SharePoint professionals
What? SharePint!!!
When? 4:45 PM
Where?
World of Beer Reston
1888 Explorer Street
Reston, VA 20190