SharePoint User Group: 01/14/10 Presented by: Will Lawrence and the jPoint Team

1. Using jQuery and jPoint for DevelopingComposite Applications in SharePoint SharePoint User Group: 01/14/10 Presented by: Will Lawrence and the jPoint Team Intro

2. Agenda

3. jQuery is Hot Topic for SharePoint • I saw it being mentioned 3 times at last 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

4. The value traditionallyseen from SharePoint What is required by the business need • Content needs to be marked up early, easily, and often to prevent garbage and lackluster participation • Business processintegration 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 Improve metadata input Integrate existing processes Smart customization Content Management Collaboration Search The value gap

5. Client Side Script Solutions Why? 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) • 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.

6. Video / Demo Time

7. jPoint

8. Origins jPoint: Unleashed 4/3/09 8/28/09 6/13/08 8/22/09

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

10. Quick Mental Image Multiple server farm for regional replication

11. jPoint: Unleashed The many great bloggers in the community Inspiration Download from Codeplex Thanks!

12. Old and New Models Custom Script Solution 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 Form Fields Web Services SharePoint User Options jPart Solution Borrowed Scripts jQuery jQuery Plugins jPoint SharePoint

13. jPoint: 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

14. jParts

15. jParts: Scripts as Web Parts User Options jPart Solution jQuery Plugins jPoint SharePoint

16. jParts: Recommended Steps Developer CREATES Site Collection Admin DEPLOYS Export Web Part from dev page. Upload into Web Part Gallery. • Download jQuery and jPoint to SharePoint (i.e. Document Library) • Place custom code into jPart Template and save as jPart.MyCode.js • Place CEWP / FWP on dev page. • Reference jQuery, jPoint & jPart.MyCode.js Power Users ADD Designer permissions, Edit Page in design mode. Add Web Part to page. Configure user options. *Composite App Tip: For multiple jParts on a page, use jPointLoader.js

17. jParts: . User Options

18. jParts: . User Options

19. User Options jPart Solution Plugins joint SharePoint User Options User Options jPart Solution Plugins jPart Solution joint SharePoint jQuery jQuery jQuery Plugins jPoint SharePoint

20. Live Demo Time

21. A sliding scale of solution sophisticationDifferent tools for different roles Visual Studio SharePoint Designer Office Browser Larger team development ALM Enterprise application integration Across the firewall integration Web services and components Manageability Declarative integration to external data Relatively sophisticated workflows Rich forms-based applications Web design Some VS-based (WF activities, web parts) BU reporting, tracking Access DBs User customized sites Ad-hoc solutions Browser-based SharePoint data definition Using galleries of web parts Highest sophistication Sophisticated enterprise applications Enable Declarativesolutions, some code Enable jPoint developers create jPart solutions that are web parts! No-code solutions Highest empowerment

22. Demo: Quick Background 1 Old Aviation Event Reporting Process Crash recorded by hand Faxed to HQ in Washington and “processed” Executives and special persons notified by voice Event reports and verbal notifications recorded in spreadsheet and filed 2 3 4

23. Demo: Quick Background 1 Improved Event Reporting Process Crash entered into SharePoint Washington HQ “processes” event from Dashboard Executives and special persons notified by voice Verbal notifications recorded online in a SP list 2 3 4 What functionality is in the Dashboard in Step 2? What happens in Step 4? Answers: Watch the demo

24. Design 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?

25. Visual Studio vs SharePoint Designer Tradeoffs

26. jPoint Boost SP Development

27. Demo Preview • Activities that are difficult …without jPoint • Manipulate New/Disp/Edit form fields and their custom counterparts, dataViewWebParts • Access SharePoint data from client side • Build composite applications quickly Features • 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

28. Demo Review • Activities made difficult without jPoint • Manipulate New/Disp/Edit form fields and their custom counterparts, dataViewWebParts • Access SharePoint data on the client • Build composite applications quickly Features • 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

29. Thank 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

30. jPointLoader

31. jPart Template