Hottest SharePoint Buzz Ever … JPoint Fernando Leitzelar, PMP Sr. SharePoint Developer

1. Hottest SharePoint Buzz Ever … JPointFernando Leitzelar, PMPSr. SharePoint Developer 1

2. Speaker Fernando Leitzelar, PMP Sr. SharePoint Developer mindSHIFT Technologies Fernando Leitzelar is a senior SharePoint architect and consultant with mindSHIFT Technologies, Inc., where he regularly interfaces with clients and development teams to design SharePoint-based solutions. Fernando also delivers SharePoint developer, administrator and end-user training. He has been working with SharePoint 2010 since its release, having worked extensively on designing and architecting sophisticated MOSS 2007 and 2003 applications. He maintains expertise in MOSS 2007/2010, JPoint, SharePoint Designer, ASP.NET, C#.NET, and SQL 2005/2008 reporting and business intelligence tools.About mindSHIFT: mindSHIFT Technologies is a leading Managed Services Provider (MSP) offering managed IT services, software-as-a-service (SaaS), VoIP, compliance and professional services to organizations around the world. 2 www.mindSHIFT.com We make IT work for your business.®

3. SharePoint Client Side • ECMAScript, JPoint, Silverlight and Object Model forSharePoint 2007 and 2010 3

4. What is it and Why? • User Friendly • Less reloads • Better interface and improved response to events • More interactive functionality • JavaScript + XmlHttpRequest+ .asmx, .svc, … -> AJAX • Creating from scratch is costly and potentially buggy where browser compatibility problems persist 4

5. MOSS 2007 vs SharePoint 2010 OOTB Core.js, init.js, form.js,… ActiveX-control,.ocxand.dll More ASP.NET, AJAX, Silverlight blueprint, jQuery, jQuery UI, jPoint, jQuery.SPServices ExtJS, Prototype.js… 5 OOTB Ajaxeverywhere, Silverlight Web Parts, ClientOMfor.NET • ClientOM forECMAScript (SP.js, SP.debug.js) • <ScriptLink>/SP.SOD.execute • Any other SharePoint JavaScript libraries

6. Client Side 2007 FrontPage RPC / OWS Web Service http://darrenjohnstone.net var lists = new SPAPI_Lists("http://server") ; var listcollection = lists.getListCollection(); if(listcollection.status == “200”){ $(listcollection.responseXML).find("List").each(function() { //here we have each list }); http://jpoint.codeplex.com var listItems = jP.getList('/','Title').getSPItemsWithQuery(CamlQuery,RowLimit); var itemObjects = listItems.getItemsFieldData(); • owsapi.js 6 • XmlHttpRequest… • jQuery.ajax() • jPoint • jQuery.SPServices • Silverlight

7. Client Side 2010 • Managed .NET Client with Client OM • Microsoft.SharePoint.Client*.dll • Silverlight • Client Object Model • ADO.NET Data Services (REST) • SharePoint Web Service • Working with HTML DOM • Additional web services • ECMAScript and JPoint 7

8. 8

9. Introduction to JPoint • What is it? • How to use it • Why is it so popular? • Demo 9 www.mindSHIFT.com We make IT work for your business.®

10. JPoint – What is it? • JQuery with SharePoint • Easy Javascript / ECMAScript • Downloaded at http://docs.jquery.com/downloading_jquery and http://jpoint.codeplex.com/ • Faster than the DOM • Cross Browser Supported 10 www.mindSHIFT.com We make IT work for your business.®

11. JQuery – What is it? • Integrated with Visual Studio 2010 • IntelliSense available in VS 2008 • Plug-ins: http://plugins.jquery.com 11 www.mindSHIFT.com We make IT work for your business.®

12. Evolution 12 www.mindSHIFT.com We make IT work for your business.®

13. with Ajax… 13 www.mindSHIFT.com We make IT work for your business.®

14. JQuery Syntax • Selectors • $(“#someId”) • $(“:text”) • $(“.someclass”) • $(“#sometabletr:even”) • Events • click, focus • show, hide OR slideDown, slideUp, fadeIn, fadeOut • Example: • $(“.someClass”).show(“slow”, someFunction) 14 www.mindSHIFT.com We make IT work for your business.®

15. Example – Show/Hide the old way <a href="#" onclick="toggle_visibility('foo');">Click here to toggle visibility of #foo</a> function toggle_visibility(id) { var e = document.getElementById(id); if(e.style.display == 'block') e.style.display = 'none'; else e.style.display = 'block'; } 15 www.mindSHIFT.com We make IT work for your business.®

16. Example – Show/Hide with JPoint $().ready(function(){ $("a").click(function(){ $("#more").toggle("slow"); return false; }); }); 16 www.mindSHIFT.com We make IT work for your business.®

17. Example – Ajax the old way function GetXmlHttpObject(handler) { varobjXmlHttp = null; //Holds the local xmlHTTP object instance //Depending on the browser, try to create the xmlHttp object if (is_ie){ varstrObjName = (is_ie5) ? 'Microsoft.XMLHTTP' : 'Msxml2.XMLHTTP'; try{ objXmlHttp = new ActiveXObject(strObjName); objXmlHttp.onreadystatechange = handler; } catch(e){ //Object creation errored alert('Verify that activescripting and activeX controls are enabled'); return; } } else{ // Mozilla | Netscape | Safari objXmlHttp = new XMLHttpRequest(); objXmlHttp.onload = handler; objXmlHttp.onerror = handler; } //Return the instantiated object return objXmlHttp; } 17 www.mindSHIFT.com We make IT work for your business.®

18. Example – Ajax with JPoint $.get("update_actions.aspx", {st: "yes", f: $(this).attr("ID")} ); 18 www.mindSHIFT.com We make IT work for your business.®

19. Why is it so popular? • Increases dynamic content display • Add interface enhancements without access to the Server • Lightweight – 14kb (Minified and Gzipped) • Cross-browser support (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+) • CSS-like syntax – easy for developers/non-developers to understand • Active developer community • Extensible - plugins 19 www.mindSHIFT.com We make IT work for your business.®

20. ECMAScript – What is it ? • Standard for Jscript, JavaScript, ActionScript • http://www.ecmascript.org/ • Implemented in SharePoint 2010 OOTB • More functionality than JavaScript • Backbone of the Client Object Model • Reference _layouts/sp.js using <SharePoint:ScriptLink> 20

21. ECMAScript in 2010 • Functions • execute • executeFunc • ExecuteOrDelayUntilScriptLoaded • notifyScriptLoadedAndExecuteWaitingJobs • notifyEventAndExecuteWaitingJobs • _spbodyonloadfunctionnames.push 21

22. JQuery in 2010 • Controls rendered by functions as opposed to HTML • Migration from MOSS 2007 Nightmare • Shift in development paradigms 22

23. JQuery in 2010 <script type=”text/ecmascript”> function loadScript(scriptSrc, callbackFunction) { varheadSection = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.type = 'text/javascript'; script.src = scriptSrc; script.onload = callbackFunction; script.onreadystatechange = function() { if (this.readyState == 'complete') { callbackFunction(); } } headSection.appendChild(script); } function runScript() { $(document).ready(function() { // Your code here }); }  _spBodyOnLoadFunctionNames.push('loadScript(\'http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js\', runScript)'); </script> 23

24. Today’s Demo 24 www.mindSHIFT.com We make IT work for your business.®

25. SharePoint, ECMA and JQuery 25

26. SharePoint, ECMA and JQuery <script type="text/ecmascript"> var clients; $(document).ready(function() { varClientName = $('input:[title=ClientName]'); $(ClientName).keyup(GetClient); }); function GetClient() { varClientName = $('input:[title=ClientName]'); if($(ClientName).val().length > 2) SuggestClients(); } function SuggestClients() { varClientName = $('input:[title=ClientName]'); varclientContext = new SP.ClientContext.get_current(); var web = clientContext.get_web(); varClientList = web.get_lists().getByTitle('Clients'); varcamlQuery = new SP.CamlQuery(); camlQuery.set_viewXml('<View><Query><Where><BeginsWith><FieldRef Name=\'ClientName\'/>' + '<Value Type=\'Text\'>' + $(ClientName).val() + '</Value></BeginsWith></Where></Query><RowLimit>10</RowLimit></View>'); clients = ClientList.getItems(camlQuery); clientContext.load(clients); clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed)); } 26

27. SharePoint, ECMA and JQuery function onQuerySucceeded(sender, args) { varClientName = $('input:[title=ClientName]'); varmyArray = new Array(); varlistEnumerator = clients.getEnumerator(); while (listEnumerator.moveNext()) { myArray.push(listEnumerator.get_current().get_item("ClientName")); } $(ClientName).autocomplete(myArray); } function onQueryFailed(sender, args) { alert('request failed: ' + args.get_message() + '\n' + args.get_stackTrace()); } </script> 27

28. SharePoint Document Interface 28

29. SharePoint, ECMA and JQuery <fieldset id="fldDemo3"> <legend></legend> <div id="demo3Row" class="demoRow"> <div class="demoControls"> <label for="txtFilenameContains">Filename contains:</label> <input type="text" id="txtFilenameContains" /> </div> <div class="demoResults"> <span id="demo3Result" /> </div> <div class="clearer" /> </div> </fieldset> 29

30. SharePoint, ECMA and JQuery <script type="text/javascript"> varselectedDocs; $('#txtFilenameContains').keyup(function (event) { filterDocs(); }); function filterDocs() { varctx = new SP.ClientContext.get_current(); vardocLib = ctx.get_web().get_lists().getByTitle('Shared Documents'); var query = new SP.CamlQuery(); query.set_viewXml("<View><Query><Where><Contains><FieldRef Name='FileLeafRef'/><Value Type='Text'>" + $('#txtFilenameContains').val() + "</Value></Contains></Where></Query></View>"); selectedDocs = docLib.getItems(query); ctx.load(selectedDocs); ctx.executeQueryAsync(getDocsWithQuerySuccess, getDocsWithQueryFailure); } function getDocsWithQuerySuccess(sender, args) { $('#demo3Result').empty(); varlistEnumerator = selectedDocs.getEnumerator(); while (listEnumerator.moveNext()) { $('#demo3Result').append(listEnumerator.get_current().get_item("FileLeafRef") + '<br />'); } } function getDocsWithQueryFailure(sender, args) { alert('Failed to get list items. \nError: ' + args.get_message() + '\nStackTrace: ' + args.get_stackTrace()); } </script> 30

31. Q&A Thank you! Fernando Leitzelar fernando.leitzelar@mindshift.com @FLeitzelar 631-864-0264 31 www.mindSHIFT.com We make IT work for your business.®