Post on 24-Feb-2016
description
1
Hottest SharePoint Buzz Ever … JPoint
Fernando Leitzelar, PMPSr. SharePoint Developer
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.
2www.mindSHIFT.com We make IT work for your business.®
SpeakerFernando Leitzelar, PMPSr. SharePoint DevelopermindSHIFT Technologies
3
• ECMAScript, JPoint, Silverlight and Object Model for SharePoint 2007 and 2010
SharePoint Client Side
4
User FriendlyLess reloadsBetter interface and improved response to events
More interactive functionalityJavaScript + XmlHttpRequest + .asmx, .svc, … -> AJAX
Creating from scratch is costly and potentially buggy where browser compatibility problems persist
What is it and Why?
5
OOTBCore.js, init.js, form.js,…ActiveX-control,.ocx and .dll
MoreASP.NET, AJAX,Silverlight blueprint,jQuery, jQuery UI, jPoint, jQuery.SPServicesExtJS, Prototype.js…
OOTBAjax everywhere,Silverlight Web Parts,ClientOM for .NET
ClientOM for ECMAScript (SP.js, SP.debug.js) <ScriptLink>/SP.SOD.execute Any other SharePoint JavaScript libraries
MOSS 2007 vs SharePoint 2010
6
FrontPage RPC / OWS
http://darrenjohnstone.netvar 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});
owsapi.js
Web ServiceXmlHttpRequest…jQuery.ajax()jPointjQuery.SPServicesSilverlight
http://jpoint.codeplex.comvar listItems = jP.getList('/','Title').getSPItemsWithQuery(CamlQuery,RowLimit);var itemObjects = listItems.getItemsFieldData();
Client Side 2007
Client Side 2010
7
Managed .NET Client with Client OM
Microsoft.SharePoint.Client*.dllSilverlight
Client Object ModelADO.NET Data Services (REST)SharePoint Web ServiceWorking with HTML DOMAdditional web services
ECMAScript and JPoint
8
• What is it?• How to use it• Why is it so popular?• Demo
9www.mindSHIFT.com We make IT work for your business.®
Introduction to JPoint
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
10www.mindSHIFT.com We make IT work for your business.®
• Integrated with Visual Studio 2010• IntelliSense available in VS 2008• Plug-ins: http://plugins.jquery.com
11www.mindSHIFT.com We make IT work for your business.®
JQuery – What is it?
12www.mindSHIFT.com We make IT work for your business.®
Evolution
13www.mindSHIFT.com We make IT work for your business.®
with Ajax…
14www.mindSHIFT.com We make IT work for your business.®
• Selectors
$(“#someId”)$(“:text”)$(“.someclass”)$(“#sometabletr:even”)
• Events
click, focusshow, hide OR slideDown, slideUp, fadeIn, fadeOutExample: $(“.someClass”).show(“slow”, someFunction)
JQuery Syntax
15www.mindSHIFT.com We make IT work for your business.®
<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'; }
Example – Show/Hide the old way
16www.mindSHIFT.com We make IT work for your business.®
$().ready(function(){$("a").click(function(){$("#more").toggle("slow");
return false; }); });
Example – Show/Hide with JPoint
17www.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
18www.mindSHIFT.com We make IT work for your business.®
$.get("update_actions.aspx", {st: "yes", f: $(this).attr("ID")} );
Example – Ajax with JPoint
• 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
19www.mindSHIFT.com We make IT work for your business.®
Why is it so popular?
ECMAScript – What is it ?
20
Standard for Jscript, JavaScript, ActionScript
http://www.ecmascript.org/Implemented in SharePoint 2010 OOTB
More functionality than JavaScriptBackbone of the Client Object Model
Reference _layouts/sp.js using <SharePoint:ScriptLink>
ECMAScript in 2010
21
FunctionsexecuteexecuteFuncExecuteOrDelayUntilScriptLoadednotifyScriptLoadedAndExecuteWaitingJobsnotifyEventAndExecuteWaitingJobs_spbodyonloadfunctionnames.push
JQuery in 2010Controls rendered by functions as opposed to HTMLMigration from MOSS 2007 NightmareShift in development paradigms
22
JQuery in 2010<script type=”text/ecmascript”> 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)'); </script>
23
24www.mindSHIFT.com We make IT work for your business.®
• Auto Complete - SP, ECMA and JQuery1
• SharePoint as a Document Interface2
• Document Search - SP, ECMA and JQuery
3
Today’s Demo
SharePoint, ECMA and JQuery
25
SharePoint, ECMA and JQuery<script type="text/ecmascript"> 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('<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
SharePoint, ECMA and JQueryfunction 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());} </script>
27
SharePoint Document Interface
28
SharePoint, ECMA and JQuery
29
<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>
SharePoint, ECMA and JQuery<script type="text/javascript"> 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("<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(); var listEnumerator = 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&AThank you!
Fernando Leitzelarfernando.leitzelar@mindshift.com
@FLeitzelar631-864-0264
www.mindSHIFT.com We make IT work for your business.®