Download presentation
Presentation is loading. Please wait.
1
1 Hottest SharePoint Buzz Ever … JPoint Fernando Leitzelar, PMP Sr. SharePoint Developer
2
About mindSHIFT: 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. ® Speaker Fernando Leitzelar, PMP Sr. SharePoint Developer mindSHIFT TechnologiesSpeaker Fernando Leitzelar, PMP Sr. SharePoint Developer mindSHIFT Technologies
3
3 ECMAScript, JPoint, Silverlight and Object Model for SharePoint 2007 and 2010 SharePoint Client Side
4
4 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 What is it and Why?
5
5 OOTB Core.js, init.js, form.js,… ActiveX-control,.ocx and.dll More ASP.NET, AJAX, Silverlight blueprint, jQuery, jQuery UI, jPoint, jQuery.SPServices ExtJS, Prototype.js… OOTB Ajax everywhere, Silverlight Web Parts, ClientOM for.NET ClientOM for ECMAScript (SP.js, SP.debug.js) /SP.SOD.execute Any other SharePoint JavaScript libraries MOSS 2007 vs SharePoint 2010
6
6 FrontPage RPC / OWS http://darrenjohnstone.net var lists = new SPAPI_Lists("http://server") ; var listcollection = lists.getListCollection(); if(listcollection.status == “200”){ $(listcollection.responseXML).fin d("List").each(function() { //here we have each list }); owsapi.js Web Service XmlHttpRequest… jQuery.ajax() jPoint jQuery.SPServices Silverlight http://jpoint.codeplex.com var listItems = jP.getList('/','Title').getSPItemsW ithQuery(CamlQuery,RowLimit); var itemObjects = listItems.getItemsFieldData(); Client Side 2007
7
Client Side 2010 7 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
8
8
9
What is it? How to use it Why is it so popular? Demo 9 www.mindSHIFT.com We make IT work for your business. ® Introduction to JPoint
10
JPoint – What is it? JQuery with SharePoint Easy Javascript / ECMAScript Downloaded at http://docs.jquery.com/downloading_jquery and http://jpoint.codeplex.com/ http://docs.jquery.com/downloading_jquery http://jpoint.codeplex.com/ Faster than the DOM Cross Browser Supported 10 www.mindSHIFT.com We make IT work for your business. ®
11
Integrated with Visual Studio 2010 IntelliSense available in VS 2008 Plug-ins: http://plugins.jquery.comhttp://plugins.jquery.com 11 www.mindSHIFT.com We make IT work for your business. ® JQuery – What is it?
12
12 www.mindSHIFT.com We make IT work for your business. ® Evolution
13
13 www.mindSHIFT.com We make IT work for your business. ® with Ajax…
14
14 www.mindSHIFT.com We make IT work for your business. ® Selectors $(“#someId”) $(“:text”) $(“.someclass”) $(“#sometabletr:even”) Events click, focus show, hide OR slideDown, slideUp, fadeIn, fadeOut Example: $(“.someClass”).show(“slow”, someFunction) JQuery Syntax
15
15 www.mindSHIFT.com We make IT work for your business. ® Click here to toggle visibility of #foo function toggle_visibility(id) { var e = document.getElementById(id); if(e.style.display == 'block') e.style.display = 'none'; else e.style.display = 'block'; } Example – Show/Hide the old way
16
16 www.mindSHIFT.com We make IT work for your business. ® $().ready(function(){ $("a").click(function(){ $("#more").toggle("slow"); return false; }); Example – Show/Hide with JPoint
17
17 www.mindSHIFT.com We make IT work for your business. ® function GetXmlHttpObject(handler) { var objXmlHttp = null; //Holds the local xmlHTTP object instance //Depending on the browser, try to create the xmlHttp object if (is_ie){ var strObjName = (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; } Example – Ajax the old way
18
18 www.mindSHIFT.com We make IT work for your business. ® $.get("update_actions.aspx", {st: "yes", f: $(this).attr("ID")} ); Example – Ajax with JPoint
19
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. ® Why is it so popular?
20
ECMAScript – What is it ? 20 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
21
ECMAScript in 2010 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 function loadScript(scriptSrc, callbackFunction) { var headSection = 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)'); 23
24
24 www.mindSHIFT.com We make IT work for your business. ® Auto Complete - SP, ECMA and JQueryAuto Complete - SP, ECMA and JQuery 1 SharePoint as a Document InterfaceSharePoint as a Document Interface 2 Document Search - SP, ECMA and JQueryDocument Search - SP, ECMA and JQuery 3 Today’s Demo
25
SharePoint, ECMA and JQuery 25
26
SharePoint, ECMA and JQuery var clients; $(document).ready(function() { var ClientName = $('input:[title=ClientName]'); $(ClientName).keyup(GetClient); }); function GetClient() { var ClientName = $('input:[title=ClientName]'); if($(ClientName).val().length > 2) SuggestClients(); } function SuggestClients() { var ClientName = $('input:[title=ClientName]'); var clientContext = new SP.ClientContext.get_current(); var web = clientContext.get_web(); var ClientList = web.get_lists().getByTitle('Clients'); var camlQuery = new SP.CamlQuery(); camlQuery.set_viewXml(' ' + ' ' + $(ClientName).val() + ' 10 '); 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) { var ClientName = $('input:[title=ClientName]'); var myArray = new Array(); var listEnumerator = 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()); } 27
28
SharePoint Document Interface 28
29
SharePoint, ECMA and JQuery 29 Filename contains:
30
SharePoint, ECMA and JQuery var selectedDocs; $('#txtFilenameContains').keyup(function (event) { filterDocs(); }); function filterDocs() { var ctx = new SP.ClientContext.get_current(); var docLib = ctx.get_web().get_lists().getByTitle('Shared Documents'); var query = new SP.CamlQuery(); query.set_viewXml(" " + $('#txtFilenameContains').val() + " "); selectedDocs = docLib.getItems(query); ctx.load(selectedDocs); ctx.executeQueryAsync(getDocsWithQuerySuccess, getDocsWithQueryFailure); } function getDocsWithQuerySuccess(sender, args) { $('#demo3Result').empty(); var listEnumerator = selectedDocs.getEnumerator(); while (listEnumerator.moveNext()) { $('#demo3Result').append(listEnumerator.get_current().get_item("FileLeafRef") + ' '); } function getDocsWithQueryFailure(sender, args) { alert('Failed to get list items. \nError: ' + args.get_message() + '\nStackTrace: ' + args.get_stackTrace()); } 30
31
31 Q&A Thank you! Fernando Leitzelar fernando.leitzelar@mindshift.com @FLeitzelar 631-864-0264 www.mindSHIFT.com We make IT work for your business. ®
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.