The document provides an agenda and overview for a SharePoint Saturday session on using SharePoint and jQuery. The session will cover the history of SharePoint and jQuery, an overview of jQuery, best practices for when to use jQuery and how to deploy and develop with it. It will also discuss using jQuery to interact with SharePoint forms and lists, and demonstrate some third party jQuery libraries.
Things you should know about jQuery JavaScript library. A JavaScript library designed to hide painful cross-browser compatibility issues while presenting a solid, usable, API.
jQuery is a JavaScript library which allows you to develop solutions with less code, in less time. You can build interactive prototypes for your prospective clients, or take an existing solution and add new dynamic behaviour with little effort.
We will see how jQuery can be used to quickly and concisely apply JavaScript behaviour to your web app. It will cover selectors, Ajax, DOM manipulation and more. The aim: to produce lean unobtrusive JavaScript with jQuery.
Things you should know about jQuery JavaScript library. A JavaScript library designed to hide painful cross-browser compatibility issues while presenting a solid, usable, API.
jQuery is a JavaScript library which allows you to develop solutions with less code, in less time. You can build interactive prototypes for your prospective clients, or take an existing solution and add new dynamic behaviour with little effort.
We will see how jQuery can be used to quickly and concisely apply JavaScript behaviour to your web app. It will cover selectors, Ajax, DOM manipulation and more. The aim: to produce lean unobtrusive JavaScript with jQuery.
SharePointfest Denver - A jQuery Primer for SharePointMarc D Anderson
These slides are from my session at SharePointFest Denver on 25 June 2012.
If you've been meaning to learn jQuery but haven't found the time, come to this introductory session where we'll cover all of the important basics of jQuery in a SharePoint context. By the end of the workshop, you'll be ready to start adding jQuery customizations to your SharePoint pages.
We'll cover Selectors, Traversing, Manipulation, Events and Effects as I cover in my article series at SharePoint Magazine.
This presentation covers some jQuery basics, as well as some general concepts you should understand about jQuery. You will find other tips and tricks sprinkled throughout before the live coding session starts.
The code from the live coding session is available here: https://github.com/dcneiner/jQuery-Bling and covers far more advanced topics than the slide portion of this presentation.
Nothing Hard Baked: Designing the Inclusive Webcolinbdclark
We've all experienced the frustration and exclusion of using an application that is awkwardly designed or poorly suited to our preferred device. In this talk, I redefine accessibility as a usability problem, exploring some of the limitations we've inherited from traditional, desktop-centric approaches to accessibility and user interface design. I also show a few of the techniques used in Fluid Infusion to support open web user interfaces that can more readily adapt to the needs of both developers and end-users alike.
User Interface Development with jQuerycolinbdclark
A half-day workshop covering all aspects of user interface development with jQuery. Starts with a JavaScript refresher, followed by coverage of each major feature of jQuery. Real world code samples are included throughout.
Presented by Colin Clark and Justin Obara at the 2010 Jasig Conference in San Diego.
SharePoint Tech Fest Houston 2015 - Creating a Great User Experience in Share...Marc D Anderson
uilding solutions in SharePoint isn’t simply about getting the functionality right based on the business requirements. Developers must think about the entire user experience (UX), which goes far beyond the technical aspects of the solution. It’s no longer good enough to meet the specifications. We must exceed them in terms of usability. This takes many developers out of their comfort zones and into the messy world of end users.
In this interactive session, we’ll discuss questions like:
* How should the user feel when they use this piece of functionality?
* Will they perceive that this functionality saves them work or creates new work?
* How will the functionality compare to what they see on the consumer Web?
* How can we use technologies which haven’t historically been considered mainstream SharePoint developer tools (like jQuery and CSS) to make SharePoint feel more like the sites people love?
We’ll look at good and bad examples from SharePoint itself as well as specific customizations.
If you've been meaning to learn jQuery but haven't found the time, come to this introductory session where we'll cover all of the important basics of jQuery in a SharePoint context. By the end of the workshop, you'll be ready to start adding jQuery customizations to your SharePoint pages. We'll cover Selectors, Traversing, Manipulation, Events and Effects as I cover in my article series at SharePoint Magazine.
SharePointfest Denver - A jQuery Primer for SharePointMarc D Anderson
These slides are from my session at SharePointFest Denver on 25 June 2012.
If you've been meaning to learn jQuery but haven't found the time, come to this introductory session where we'll cover all of the important basics of jQuery in a SharePoint context. By the end of the workshop, you'll be ready to start adding jQuery customizations to your SharePoint pages.
We'll cover Selectors, Traversing, Manipulation, Events and Effects as I cover in my article series at SharePoint Magazine.
This presentation covers some jQuery basics, as well as some general concepts you should understand about jQuery. You will find other tips and tricks sprinkled throughout before the live coding session starts.
The code from the live coding session is available here: https://github.com/dcneiner/jQuery-Bling and covers far more advanced topics than the slide portion of this presentation.
Nothing Hard Baked: Designing the Inclusive Webcolinbdclark
We've all experienced the frustration and exclusion of using an application that is awkwardly designed or poorly suited to our preferred device. In this talk, I redefine accessibility as a usability problem, exploring some of the limitations we've inherited from traditional, desktop-centric approaches to accessibility and user interface design. I also show a few of the techniques used in Fluid Infusion to support open web user interfaces that can more readily adapt to the needs of both developers and end-users alike.
User Interface Development with jQuerycolinbdclark
A half-day workshop covering all aspects of user interface development with jQuery. Starts with a JavaScript refresher, followed by coverage of each major feature of jQuery. Real world code samples are included throughout.
Presented by Colin Clark and Justin Obara at the 2010 Jasig Conference in San Diego.
SharePoint Tech Fest Houston 2015 - Creating a Great User Experience in Share...Marc D Anderson
uilding solutions in SharePoint isn’t simply about getting the functionality right based on the business requirements. Developers must think about the entire user experience (UX), which goes far beyond the technical aspects of the solution. It’s no longer good enough to meet the specifications. We must exceed them in terms of usability. This takes many developers out of their comfort zones and into the messy world of end users.
In this interactive session, we’ll discuss questions like:
* How should the user feel when they use this piece of functionality?
* Will they perceive that this functionality saves them work or creates new work?
* How will the functionality compare to what they see on the consumer Web?
* How can we use technologies which haven’t historically been considered mainstream SharePoint developer tools (like jQuery and CSS) to make SharePoint feel more like the sites people love?
We’ll look at good and bad examples from SharePoint itself as well as specific customizations.
If you've been meaning to learn jQuery but haven't found the time, come to this introductory session where we'll cover all of the important basics of jQuery in a SharePoint context. By the end of the workshop, you'll be ready to start adding jQuery customizations to your SharePoint pages. We'll cover Selectors, Traversing, Manipulation, Events and Effects as I cover in my article series at SharePoint Magazine.
Oslo SP User Group - Content Types - Love Them or Lose ItMarc D Anderson
Presented at the Norwegian SharePoint Community Meetup - Oslo on 1 Feb 2017
https://www.meetup.com/NSC-Oslo/events/235938706/
For years, one of the most fundamentally powerful capabilities in SharePoint has been Content Types. Content Types should underlie all good information architectures, along with customized metadata (Site Columns) and managed metadata which embodies the taxonomy for *your* organization. Yet far too often SharePoint users simply upload Documents into Document Libraries and wonder why no magic happens.
SharePoint Evolutions 2015 - Moving from SOAP to RESTMarc D Anderson
If you’ve been developing client side applications or functionality using SPServices and the SOAP Web Services, sooner or later you’ll want to move to REST instead. This session takes the patterns shown in my article series on ITUnity and my blog and makes it real with real-world examples. There are some things you can do now to prepare for this eventuality, whether it’s part of an upgrade to SharePoint 2013 or simply because you’ve got “legacy” code that uses SOAP instead of REST. We’ll go through the decision points, specific code examples, and better practices.
Unity Connect Haarlem 2016 - The Lay of the Land of Client-Side Development c...Marc D Anderson
Are you dazzled by all the noises you hear about client-side development? Do the grunts and gulps leave you a little confused? In this introductory session, we’ll talk about the types of things you can do with client-side development, how SharePoint can be used as a service (SPaaS?) and what the popular tool sets are. Even between writing the abstract and doing the session, things may well have changed. Whether you’re a server-side developer who wants to catch up with the new trends, a power user wanting to flex your muscles in new ways, or an end user who would like to speak more intelligently with IT, this session will provide useful foundational information.
avaScript, REST, CSOM, Office 365 APIs: Like it or not, client-side development is the future of SharePoint development. At the forefront of this wave is the powerful JavaScript library jQuery. Utilizing jQuery in SharePoint, developers can take their applications to the next level in less time. What's more, you can utilize jQuery in SharePoint 2007, 2010, 2013, and in Office 365 often without making changes to your code. In this class, you gain a new appreciate for jQuery and learn:
"What's possible," including visual enhancements and practical business intelligence
Tips and Tricks for deploying and maintaining scripts
How to get quick wins with little effort using third-party jQuery libraries
How to interact with SharePoint forms and lists using JavaScript and jQuery
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)Doris Chen
Get frustrated by cross-browser incompatibility? Hate to develop application using JavaScript? jQuery is a powerful JavaScript library that can enhance your websites regardless of your background. jQuery is fast, lean, simple and hugely expandable, enabling you to build compelling web applications quickly and easily. In this session, we will start with a quick introduction of jQuery, illustrate what’s so good about jQuery, and demonstrate step by step how to develop jQuery Ajax application efficiently with database, web services, OData, NetFlix and ASP.NET MVC. Microsoft is now shipping, supporting, and contributing to jQuery, with ASP.NET and Visual Studio. New features which will be available in the next release of jQuery such as globalization, templating and data-linking will be introduced in the session as well.
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012crokitta
APEX& jQuery Mobile
Binnenkort zal Oracle versie de lang aangekondigde upgrade naar release 4.2 van Oracle Application Express beschikbaar maken. Een van de meest besproken nieuwe features die voor dit nieuwe release zijn aangekondigd is de integratie van het jQuery Mobile framework. Met de integratie van dit framework zal het mogelijk worden om met APEX applicaties te ontwikkelen, die geschikt zijn voor mobiele toestellen.
Wat is en hoe werkt jQuery Mobile en wat betekend dit voor het ontwikkelen in APEX. Dat zijn de onderwerpen die de presentatie aan bod komen. En waarom wachten tot het release van 4.2. Het is namelijk nu al mogelijk om jQuery Mobile in APEX te integreren en gebruiken. Hoe, wordt in een demo getoond. Deze sessie is waarschijnlijk de enige waarin u gevraagd zal worden om uw mobile telefoon aan te laten staan.
JavaScript front end performance optimizationsChris Love
No one wants a slow loading, slow reacting application. As page weight has increased so has the dependency on JavaScript to drive rich user experiences. Today many pages load over 2MBs of JavaScript, but is this healthy? Do your scripts and dependencies perform well? In this session we will review common JavaScript performance bottlenecks, how to detect them and how to eliminate them.
This session will review common bad coding syntax, architecture and how to replace them with better alternatives. You will also be exposed to caching, code organization, build and deployment best practices that produce the best user experiences. Finally, you will see how to use the navigation timing and performance timing APIs to fine tune your applications to produce a fast, lean application your customers will love.
A Power User's intro to jQuery awesomeness in SharePointMark Rackley
Okay, we get it. You’re not a developer, but there so many cool things you can do with jQuery and JavaScript in SharePoint!
Maybe you found that script on that blog that you copy and pasted and just can’t get to work. It looks so easy though.
Why should developers have all the fun?
In this session, learn how you, a Power User can take advantage of some of the awesomeness that is client side scripting in SharePoint. You’ll learn:
- How to use some plug and play scripts on the internet to create tabbed web parts, customize SharePoint forms and more
- Do’s and don’ts that will help you figure out why that script isn’t working on your site
A Power User's Intro to jQuery Awesomeness in SharePointMark Rackley
The slide deck for my session walking Power Users through adding scripts to pages in SharePoint with demos showing what's possible to do without having to write any JavaScript. Includes links to blog posts with step by step video instructions.
#SPSTC Maximizing the SharePoint User Experience with Free 3rd Party jQuery L...Mark Rackley
SharePoint Saturday Twin Cities session on using third party jQuery libraries in SharePoint:
jQueryUI
DataTables.net
FullCalendar
Bluff Charts
StratusForms
The SharePoint & jQuery Guide - Updated 1/14/14Mark Rackley
Latest version of my SharePoint & jQuery slides from SharePoint Saturday St. Louis.
This session introduces people to using jQuery in SharePoint, how to get started, and some best practices.
Wrapping your head around the SharePoint Beast (For the rest of us)
SharePoint and jQuery Essentials
1. SharePoint & jQuery Essentials
SharePoint Saturday St. Louis
January 12th, 2013
Mark Rackley
mark.rackley@summit7systems.com
2. Housekeeping
• Please remember to submit your session
evaluation for each session you attend
• Follow SharePoint Saturday St. Louis on
Twitter @spsstl and hashtag #spsstl
2 | SharePoint Saturday St. Louis 2012
3. Thanks to Our Sponsors!
3 | SharePoint Saturday St. Louis 2012
4. About Mark Rackley
• Solutions Architect & Developer at Summit 7 Systems
• 17+ years software architecture and development experience
• Blogger, Writer, Speaker
• mark.rackley@summit7systems.com
• @mrackley
• http://sharepointhillbilly.com
5. Agenda
• SharePoint & jQuery’s history
• jQuery Overview
• When to use jQuery / When not to
• Deployment & Maintenance
• Development Basics
• Using Third Party Libraries
The SharePoint & jQuery Guide
http://bit.ly/jQueryAndSP
6. SharePoint & jQuery’s Courtship
• What is jQuery?
– JavaScript utility library supported by Microsoft
– Allows you to interact with a page AFTER it is
rendered using the DOM
• What’s the history?
– Snubbed in SharePoint 2007
– Tolerated in SharePoint 2010
– Embraced in SharePoint 2013
– It’s the future
7. jQuery Overview
• What skills do you need?
– JavaScript
– CSS, XML, JSON
– A development background
• It IS code
• Uses development constructs
• If you can’t write code, your ability to do magic will be limited to what
you can copy/paste
– CAML, CAML, CAML… Sorry…
– Ability to think outside the box
• Use all the pieces together
10. SharePoint & jQuery? Why?
• Can replace the need for Visual Studio for
some web parts
• Can replace the need for basic workflows
• No points (shhhh… don’t tell the admins)
• Can get around list view threshold
11. jQuery makes your SharePoint
applications USABLE and allows you to
get your work done NOW
12. jQuery Overview
• Busting jQuery Mtyhs
– It’s not secure
• BUSTED
– It uses SharePoint’s security
– Scripts execute with privileges of current user
– It doesn’t perform well
• BUSTED
– Reduce page loads
– Delay data queries
– You can’t elevate privileges
• CONFIRMED
– Thank God
13. jQuery Overview
• Why I hate jQuery (some days)
– Too many options
– Debugging
– It can perform horribly
– Inconsistent results
– Changes in the jQuery library
– It CAN harm your farm!
14. When should you use jQuery
• Tightly controlled environments
• Visuals or Usability are high priorities
• Tight timeframes
• Simple page and form modifications
– Dynamic drop downs
– Hiding page elements
– Reading / populating fields
• Why would you NOT use jQuery?
15. When should you question the use of
jQuery?
• Need pull a lot of data over the wire to work with
• Iterating over many rows of list data
• Extended business logic or proprietary business
logic
• Privileges need to be elevated
• Need to support many different browsers
16. Deployment
• Deployment Options
– Document Library
• Easily modify scripts
• Keep track of changes with Metadata
• Recover from screw ups with Versioning
– File System
• Deployed with a WSP (don’t think of manually copying)
• Not an option for Office 365 or hosted SharePoint 2010
– Content Delivery Network (CDN)
18. Reference Options
<script type="text/javascript" src="/SiteAssets/jquery.min.js"></script>
• ScriptLink
• MasterPages, Delegate Controls, Web Parts, Controls, Custom Pages
• Ensures Script is not loaded multiple times
• Renders in the correct place in the markup
• Need Visual Studio or SPD
• More upfront work
• Content Editor Web Part (CEWP)
• Quick & Easy
• Don’t have to deploy anything
• Adds CEWP overhead
19. Reference Options
• Custom Action
• Loads Script for entire Site Collection
• Works in sandbox
<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<CustomAction
ScriptSrc="~sitecollection/SiteAssets/jquery.min.js"
Location="ScriptLink"
Sequence="100"
>
</CustomAction>
</Elements>
20. Development
• Development Tools
– IDE
• Visual Studio
• Notepad++
• SharePoint Designer
– Debugging
• IE Developer Tools / Chrome Debugger / Firebug
• Fiddler
• Alerts… lots and lots of alerts
• Avoid Console.log (or use it wisely)
21. jQuery Overview - JavaScript
“Objects”
var car = { var car = {};
color: “red”, car.color = “red”;
make: “Jeep”, car.make = “Jeep”;
model: “wrangler” car.model=“wranger”;
}
var car = {};
car*“color”+ = “red”;
car*“make”+ = “Jeep”;
car*“model”+ =“wranger”;
22. jQuery Overview – Common Usage
Method Description
$(document).ready(function($){}) Where code execution begins after page is loaded
$(“#ElementID”) Returns element with given id
$(“element.class”)
<input Returns all elements of a particular class
$(“div.myClass”)
name="ctl00$m$g_a12c0b73_06fa_4552_a5af_b5d5fce55384$ctl00$ctl05$ctl03$ctl00$ctl00
$ctl04$ctl00$ctl00$TextField" type="text" maxlength="255" attribute value $(“input*Title=‘First
$(“Type*attrib=‘value’+”) Gets element of specific type and
Name’+”)
id="ctl00_m_g_a12c0b73_06fa_4552_a5af_b5d5fce55384_ctl00_ctl05_ctl03_ctl00_ctl00_ctl0
.show(), .hide(), .toggle() Shows, hides, toggles
4_ctl00_ctl00_TextField" title="E-mail Address" class=“ms-long ms-spellcheck-true" />
.html() Gets the raw html for an element with tags
$(“input[title=‘E-mail Address’+”); Contents of an element with HTML tags stripped out
.text() //returns element
$(“input”).each(function(),
$(this).attr(“title”); // gets the value of the title attribute for all inputs
});
23. jQuery Overview – Common Methods
Method Description
.split() lookUpFieldValue = “1;#Mark Rackley”;
Var myArray = numbers.split(“;#”);
myArray*1+ == “Mark Rackley”
.replace() var myString = “This string has spaces”;
var newString = myString.replace(/ /g,””);
newString == “Thisstringhasspaces”;
.contains() Check to see if a DOM element is within another DOM element
.find() Get the child elements of current element, filtered by a selector
Chaining:
$("#WebPartWPDnn").find("nobr b:contains('Sum = ')").html().split(" = ")[1].replace(",","");
24. Interacting with SharePoint Forms
Getting/Setting SharePoint Form Fields
• Text Boxes
– $(“input*title=’My Text Field’+”).val()
• Selects
– $(“select*title=’My Choice’+”).val(mySelectValue);
• Checkboxes
– $("input[title='My Check box']").removeAttr('checked');
– $("input[title='My Check box']").attr('checked','checked');
The SharePoint & jQuery Guide http://bit.ly/jQueryAndSP
25. Interacting With
SharePoint List Data
When to Choose SPServices vs. the Client Object Model
http://www.sharepointhillbilly.com/Lists/Posts/Post.aspx?ID=15
26. CSOM vs. SPServices
Functionality CSOM SPServices
SharePoint 2007 No Yes
SharePoint 2010/2013 Yes Yes
Anonymous Access No Yes
Cross Site / Cross Domain Access No Yes
27. How About Some Best Practices?
• Use the Element’s ID when possible
• Reduce DOM searches
• Re-use code / Good coding practices
• Minimize files
• Use animations to hide slow performance
• Delay loading of Selects until you need the data
28. Using Third Party Libraries
• Tips for selection and integration
– Look for supported / documented libraries
– Test in target browsers before implementing
– Duplicate file structure
– Test “vanilla” in SharePoint first
29. Using Third Party Libraries
• Some of my favorites
– Content Slider -
http://www.awkwardgroup.com/sandbox/awkward-showcase-
a-jquery-plugin/
– Formatted Tables - http://www.datatables.net/
– Modal Window -
http://www.ericmmartin.com/projects/simplemodal/
– SPServices - http://spservices.codeplex.com/
– Calendar - http://arshaw.com/fullcalendar/
32. ”Fast Food” Development
• You don’t have to be a SharePoint Guru
• It’s Cheap
• It’s Quick
• It’s Easy
• It gets the job done
33. ”Fast Food” Development
• Don’t abuse it, You’ll pay for it later
• Limited choices
• There are healthier options
• Adds page bloat
• Can slow your performance
34. Questions?
Don’t drink the
haterade…
Mark Rackley
mark.rackley@summit7systems.com
www.twitter.com/mrackley
www.sharepointhillbilly.com