Customizing SharePoint with TypeScript and Knockout

Slides:



Advertisements
Similar presentations
Creating Page Layouts using SharePoint Designer or Visual Studio Becky Bertram MCSD, MCAD MCTS WSS Development MCTS MOSS Development
Advertisements

Creating Knockout User Experiences in SharePoint with JavaScript Making awesome with Knockout, jQuery and SharePoint REST.
SPSVB 2015 Create Tailored Search Results w/ Display Templates SHAREPOINT SATURDAY VIRGINIA BEACH– JANUARY 10, 2015 MIKE ORYSZAK BLOG:
Knockoutjs and JQuery The One-Two Punch for Richer MVC 4 Applications Connecticut.NET Developers Group November 13, 2012.
SharePoint 2010: BCS m Business Connectivity Services.
The new way to work together SharePoint Products Cloud Server Free.
JQuery : Rethink Web Development Van Gaever Tom
Creating Page Layouts using SharePoint Designer or Visual Studio Becky Bertram MVP SharePoint Server, MCSD, MCAD
Bob German Principal Architect A New on SharePoint Development Building Light-Weight Web Parts with AngularJS
SPSATL 2014 Create Tailored Search Results w/ Display Templates SHAREPOINT SATURDAY ATLANTA – JUNE 21, 2013 MIKE ORYSZAK BLOG: TWITTER:
Store, sync, and share your files
Sustainable SharePoint 2010 Customizations By Bill Keys.
JavaScript Framework for Rich Apps in Every Browser Maura Wilder Joan Wortman
SDC 2013 SPA Made Breezy Tiberiu Covaci Ward Bell, v.p. of technology, IdeaBlade.
Introduction to TypeScript Sergey Barskiy Architect Level: Introductory.
The Web Developer’s Toolbox Steve Fabian e:
Wijmo Troy Taylor. What is Wijmo? -Wijmo is a kit of over 40 UI widgets, optimized for client-side web development. -HTML5 -jQuery -CSS3 -SVG.
Online Conference June 17 th and 18 th SharePoint Online Administration with PowerShell.
JAVASCRIPT WITH A VIEW Jordan Knight Solution Architect Xamling SESSION CODE: WEB305 (c) 2011 Microsoft. All rights reserved.
Canopy walk through Single-Page Apps (SPAs) Benjamin Howarth Freelancer, Code Gecko Umbraco UK Festival, Fri 30 th Oct 2015 CODE GECKO.
1 What is JQuery. jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax* interactions.
UNDERSTANDING YOUR OPTIONS FOR CLIENT-SIDE DEVELOPMENT IN OFFICE 365 Mark Rackley
Leveraging Web Content Management in SharePoint 2013 Christina Wheeler.
Spice up Your Forms and Views Deep Dive into Client Side Rendering (CSR) Joe McShea Owner/Consultant IntelliPoint Solutions LLC.
Modern Development Technologies in SharePoint SHAREPOINT SATURDAY OMAHA APRIL, 2016.
Software services delivering SharePoint, Mobile, and Business Intelligence solutions Understanding and implementing the remote provision pattern in SharePoint.
DEV103 – Web Part Transformers – More than meets the eye By: D’arce Hess.
Training Deck Microsoft Corporation Store, sync, and share your work files.
SPEasyForms: The Free Forms Designer Solution for SharePoint Joe McShea Owner/Software Architect IntelliPoint Solutions LLC.
SPEasyForms: The Free Forms Designer Solution for SharePoint Joe McShea Owner/Software Architect IntelliPoint Solutions LLC.
Spice up Your Forms and Views with Client Side Rendering (CSR) Joe McShea Owner/Consultant IntelliPoint Solutions LLC 8/06/2016.
SharePoint & jQuery. About me Phill Duffy – Product Manager at Lightning Tools Ltd – Author of ‘Pro SharePoint with jQuery’ – MCTS Application Developer.
Mark Rackley – PAIT Group –
MVC 4.0, Knockout.js, Bootstrap and EF6.0 FAST, FLEXIBLE AND RESPONSIVE QUICK TO MARKET WEBSITES.
Spice up Your Forms and Views
Kendo UI ASP.NET MVC Wrappers
Spice up Your Forms and Views
Best Practices for Small-Scale Client-Side Development in SharePoint
Angular 4 + TypeScript Getting Started
What's new in the world of SharePoint development and deployment
Creating Lightning Fast Apps Using AngularJS
Customizing SharePoint with TypeScript and Knockout
Kendo UI ASP.NET MVC Wrappers
Anatomy of a Display Template
Line of Business Solutions in SharePoint Online
COP3530- Data Structures JSFiddle
Customizing SharePoint with Knockout and Typescript
8/2/2018 4:49 AM Understanding the SharePoint Framework and how it affects your JavaScript customizations Mark Rackley / Chief Strategy.
Creating and Deploying Your First SharePoint Framework Application
KnockoutJs online Training at GoLogica in Pune
KnockoutJS -Pradeep Shet 31st August 2014.
Customizing SharePoint with TypeScript and Knockout
Building Single Page Applications (SPAs) in SharePoint with JavaScript
SPFx – A modern development tool for SharePoint
SharePoint-Hosted Apps and JavaScript
AngularJS and SharePoint 2013: Lessons Learned from the Trenches
Microsoft Ignite NZ October 2016 SKYCITY, Auckland.
Creating and Deploying Your First SharePoint Framework Application
Spice up Your Forms and Views
Intro to Client Side Solutions in SharePoint 2013
Customizing SharePoint with TypeScript and Knockout
Rich single page applications with SharePoint
Please thank our sponsors!
Creating Lightning Fast Apps Using AngularJS
AngularJS and SharePoint I Chris Douglas Senior SharePoint Developer ECS Web:
The SharePoint framework
JavaScript and the DOM MIS 2402 Jeremy Shafer Department of MIS
Microsoft Connect /28/2019 2:20 AM
Creating Lightning Fast Apps Using AngularJS
JavaScript and the DOM MIS 2402 Maxwell Furman Department of MIS
Presentation transcript:

Customizing SharePoint with TypeScript and Knockout Joe McShea SharePoint Saturday Chicago Suburbs 5/20/2017

Sponsors

Who am I? Joe McShea IntelliPoint Solutions LLC Owner/Software Architect Over 20 years as a software developer/architect Focused on the Microsoft stack and SharePoint/Office 365 since 2007 Author of SPEasyForms, the free/open source for SharePoint 2010, 2013, 2016, and Online available for download on CodePlex/GitHub Contact joe@intellipointsol.com @Joe_McShea (twitter) http://speasyforms.com (blog)

Agenda Talk a little about Typescript Talk a little about Knockout Demo using them in SharePoint

What is Typescript? Strongly typed JavaScript Adds Classes, Interfaces, Modules Superset of JavaScript

Typescript is a Superset of JavaScript

Why Typescript? Easier transition for server-side developers Early detection of errors Better tool support Because Microsoft says so

Modules import * as ko from "knockout"; export const numberRegexp = /^[0-9]+$/; // exports from external modules export * from "./StringValidator"; export * from "./LettersOnlyValidator"; export * from "./ZipCodeValidator";

Classes and Interfaces

Arrow Functions

Don’t use var

Use let instead

What is Knockout? JavaScript library to simplify CRUD applications Eases the creation of rich and responsive web sites Provides 2 way databinding between the data and it’s presentation Based on the Model View ViewModel (MVVM) pattern

Why Knockout? Um…really? Most SharePoint Customizations are CRUD applications CRUD is mostly boiler plate HTML and JavaScript Knockout helps separate concerns and minimizes boiler plate code and markup

Demo…

References Typescript quick Start: http://www.typescriptlang.org/docs/tutorial.html Knockout documentation: http://knockoutjs.com/documentation/introduction.html Widget-Wrangler by Bob German and Julie Turner: https://github.com/Widget-Wrangler/ww Source code for tkoWebPart demo: https://github.com/mcsheaj/tkoWebPart Set up your SharePoint client-side web part development environment: https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment

References Continued Pure JavaScript Slider with Animations by Gabriele Romanato: https://codepen.io/gabrieleromanato/pen/pIfoD Drag and Drop File Upload jQuery Example, Ravishanker Kusuma: http://hayageek.com/drag-and-drop-file-upload-jquery/ Export any web part from a SharePoint page, Anatoly Mironov: https://chuvash.eu/2014/09/19/export-any-web-part-from-a-sharepoint-page/

Backup

So what can we bind to in HTML? POJO Observable Observable Array Event

POJO

POJO Result

Observable

Observable Result

Observable Array

Observable Array

Observable Array Result

Event

Event Result

Not Covered Computed Observables Custom Bindings

Making it reusable Get the web part id: Go to: <site>/_vti_bin/exportwp.aspx? pageurl=<pageurl>&guidstring=<webPartId> <site> = your site <pageurl> = the full path to the web part page <webPartId> = the id of the web part you want to export Save the resulting .webpart file, change title, description, etc, upload to the web part gallery