This document provides an overview of using TypeScript, Knockout, and model-view-viewmodel (MVVM) frameworks to create editable grids in SharePoint list forms. It introduces TypeScript as a strongly typed superset of JavaScript, Knockout as a library for two-way data binding, and how MVVM frameworks like Knockout separate the model and view. The document then demonstrates editable grid code using these technologies and provides resources for further information.

1. SPTypeOutGrid
•Knockout + TypeScript + SharePoint 2010 = Cool Grids in List
Forms

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

3. Agenda
• Super-fast overview of:
• TypeScript
• Knockout
• MV* frameworks
• Editable Grid code!

4. TypeScript
• Superset of JavaScript
• Strongly-typed variables
• Visual Studio Intellisense
• OOP
• Still just JavaScript

5. Momma said Knock[you]out
• JS Library
• 2-way Data-binding
• MVVM

6. MV* Frameworks
• MVC
• Controller determines Model
• Model passed to View
• View translates Model for
presentation
• ASP.NET MVC
• 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

8. Questions

9. 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/