SharePoint Saturday DC: 12/05/09Presented by: Will Lawrence and the jPoint Team

jPoint:jPoint: A jQuery Based Library A jQuery Based Library for creating Web 2.0 Apps in SharePoint for creating Web 2.0 Apps in SharePoint

jPoint:jPoint: A jQuery Based Library A jQuery Based Library for creating Web 2.0 Apps in SharePoint for creating Web 2.0 Apps in SharePoint

Intro

AgendaAgenda

Old Aviation Event Reporting Process

1.Crash recorded by hand

2.Faxed to HQ in Washington and “processed”

3.Executives and special persons notified by voice

4.Event reports and verbal notifications recorded in spreadsheet and filed

Demo: Quick BackgroundDemo: Quick Background

Demo: Quick BackgroundDemo: Quick Background

Improved Event Reporting Process

1.Crash entered into SharePoint

2.Washington HQ “processes” event from Dashboard

3.Executives and special persons notified by voice

4.Verbal notifications recorded online in a SP list

What functionality is in the Dashboard in Step 2?

What happens in Step 4?

Answers: Watch the demo

Design DilemmaDesign Dilemma

• HQ client wants new event reporting process implemented quickly

• HQ client wants fancy features

• Design– A lot of details have been left out, but it

essentially comes down to one question SharePoint Designer or Visual Studio?

Visual Studio vs SharePoint Designer Tradeoffs

Visual Studio vs SharePoint Designer Tradeoffs

0

20

40

60

80

100

120

Time

% R

eq

uir

em

en

ts C

om

ple

te

Legend

SharePoint Designer

Visual Studio

jPoint Boost SP DevelopmentjPoint Boost SP Development

0

20

40

60

80

100

120

Time

% R

eq

uir

em

en

ts C

om

ple

te

Legend

jPoint

SharePoint Designer

Visual Studio

Activities that are difficult

…without jPoint

– Manipulate New/Disp/Edit form fields and their custom counterparts, dataViewWebParts

– Access SharePoint data from client side

– Build Web 2.0 and AJAX features quickly

Demo PreviewDemo PreviewFeatures

– Drag and Drop– Form field expandos– Date/Time/Timezone jQuery plugin in form– Auto save– Live lists as queues– Flexigrid jQuery plugin connected to SP data– Live collaboration

Video / Demo TimeVideo / Demo Time

Activities made difficult without jPoint

– Manipulate New/Disp/Edit form fields and their custom counterparts, dataViewWebParts

– Access SharePoint data on the client

– Build Web 2.0 and AJAX features quickly

Demo ReviewDemo ReviewFeatures

– Drag and Drop– Form field expandos– Date/Time/Timezone jQuery plugin in form– Auto save– Live lists as queues– Flexigrid jQuery plugin connected to SP data– Live collaboration

Client Side Script SolutionsClient Side Script Solutions

Why?

• To fill the value gap, increase ROI, and provide a visually stimulating, rich UX.

• Rapid prototyping and agile development lead to successful and sustainable solutions.

• Mashups and composite applications bring more value to the user.

What?• JavaScript

– jQuery– jQuery UI and plugins– jPoint

• API / SharePoint data layer• Web part deployment• jParts

– “jQuery plugins” for SP– User modifiable options

• Cloud Services– Charts (Google API)– Maps (Google, Bing)

• Content needs to be marked up early, easily, and often to prevent garbage and lackluster participation

• Business process integration into SharePoint needed to familiarize users with tools before successful business process improvement.

• Value gap should be filled for better ROI (it seems obvious, but is sometimes a hard fight)

• Need to show WIIFM (What’s In It For Me?) to gain user adoption

• UI Customizations and stimulating UX help to comfort and empower users

The value traditionallyseen from SharePoint

What is required by the business need

The value gap

Improve metadata inputIntegrate existing processes

Smart customization

Content ManagementCollaboration

Search

jPointjPoint

jQuery is Hot Topic for SharePointjQuery is Hot Topic for SharePoint

– I saw it being mentioned 3 times at this summer’s Regional SharePoint Conference.

– I saw it being mentioned 6 or more times and jQuery was used in live demos in at least 3 presentations at the SharePoint Conference 2009 in Vegas. Below are my live blog posts from the demos using jQuery.

• SharePoint Designer 2010 – Building Composite Apps: From SPC09 Las Vegas 

• Enterprise Mashups with SharePoint Designer 2010, Bing map services, and Restful web services: From SPC09 Las Vegas

• Working with the new Client Object Model: From SPC09 Las Vegas

jPoint: UnleashedjPoint: Unleashed

Origins

6/13/08 4/3/09 8/22/09 8/28/09

Reasons and Motivation behind jPoint Project

Reasons and Motivation behind jPoint Project

• Client side code stored in content DB is easier to maintain than server side code for multiple front-end web servers in multiple server farms (due to austere regional replication)

• Need for cross-browser compatibility

• 3rd party paid web part solutions– Bundled packages too

expensive– Licensing headaches– I do not like being charged

for a web part that I can re-create in less than 45 minutes

• Need for comprehensive JavaScript library

Quick Mental ImageQuick Mental ImageMultiple server farm for regional replication

jPoint: UnleashedjPoint: Unleashed

Thanks!

Inspiration

Download from Download from

CodeplexCodeplex

The many great bloggers in the

community

Old and New ModelsOld and New Models

New! Model, developers:– Do not need to be SharePoint and

JavaScript Jedi Masters– Write re-usable code that is cross-browser

compatible– Rely on (or help) community to update

jPoint open source code– Use jPoint API that works with 2007 and

SharePoint 2010

Old Model, developers:

– Need to know underlying SharePoint details

– Hard code scripts that work for one page, one browser

– Use borrowed code from multiple sites that is hard to maintain

SharePoint

jPointjPointPlu

gin

sPlu

gin

sjPart SolutionjPart Solution

jQu

ery

jQu

ery

User OptionsUser Options

SharePoint

Borr

ow

ed

Scr

ipts

Borr

ow

ed

Scr

ipts

Form FieldsForm Fields Web ServicesWeb Services

Custom Script Solution

Custom Script Solution

jQu

ery

jQu

ery

jPoint: ComponentsjPoint: Components

• jPointLoader.js– Dynamically loads

jQuery and jPoint– Parameter passing to

override default paths

• Example:– <script

src=“jPointLoader.js?jQueryPath=/js/jQuery/”></script>

• jPoint.js– Contains main jPoint

class.– jP is to jPoint as $ is to

jQuery

jPointLoaderjPointLoader

jPartsjParts

jParts: Scripts as Web PartsjParts: Scripts as Web Parts

jPart TemplatejPart Template

Live Demo TimeLive Demo Time

A sliding scale of solution sophisticationDifferent tools for different roles

No-code solutions

Declarativesolutions, some code

Sophisticated enterprise applications

Visual Studio

SharePoint Designer

Office

Browser

Larger team developmentALM

Enterprise application integrationAcross the firewall integrationWeb services and components

Manageability

Declarative integration to external dataRelatively sophisticated workflows

Rich forms-based applicationsWeb design

Some VS-based (WF activities, web parts)

BU reporting, tracking Access DBs

User customized sitesAd-hoc solutions

Browser-based SharePoint data definition

Using galleries of web parts

Enable

Enable

Highest sophistication

Highest empowerment

Thank youThank you

• Remember to: – Share jPoint. It’s open source.

– Checkout http://jPoint.codeplex.com and supporting site http://sharejPoint.com.

• Contact me at :– will.lawrence@sharejPoint.com

– Twitter: @willhlaw

• Looking for:– Sponsors to support sharejPoint organization

– Developers to constantly improve the project