jQuery with SharePoint solutions
Posted
by KunaalKapoor
on Geeks with Blogs
See other posts from Geeks with Blogs
or by KunaalKapoor
Published on Mon, 02 Jul 2012 13:23:09 GMT
Indexed on
2012/07/02
15:16 UTC
Read the original article
Hit count: 318
Filed under:
For me jQuery is the 'Plan-B' for everything.
And most of my projects include the use of jQuery for something or the other, so I decided to write a small note on what works best while using jQuery along with SharePoint.
I prefer to use the jQuery JavaScript library, which is far more robust, easier to use, and allows for plugins. Follow the steps below to add jQuery to your master page. For office 365, the prefered location to add jQuery files is the "Site Asserts" library.
Deployment Best Practices
They are only as good as the context it’s being referenced. In other words, take into account your world before applying it.
Script your deployment options. Folder in SPD. Use the file system. Make external references. The JQuery library is on the Microsoft Ajax Content Delivery Network. You may even choose to publish to and from the document library. (pros and cons to this approach)
Reference options when referencing the script.
ScriptLink will make sure it’s loaded at the top of the page and only loaded once. You need Visual Studio or SPD
Content Editor Web Part (CEWP). Drop it on the page and it’s there. Easy but dangerous
Custom Actions. Great for global deployments of JQuery. Loads it on every page. It also works in Sandbox installations.
Deployment Maintenance Dont’s
Don’t add scripts directly to your Master Page. That’s way too much effort because the pages are hard to maintain.
Don’t add scripts directly to the CEWP. Use a content link instead. That will allow for reuse. If you or someone deletes the CEWP you won’t lose code in the web part
Security. Any scripts run with the same privileges of the current user. In other words, you can’t get in trouble.
Development Best Practices
Don’t abuse the DOM. There are better options to load the DOM without hitting it 1,000 times.
User other performance boosters.
Try other libraries. Try some custom code
Avoid String conversion
Minify your files
Use CAML to reduce number of returns rows
Only update your JQuery library AFTER RIGOROUS REGRESSION TESTING
CRUD operations can come with some fun
SP Services wraps SharePoint’s web services for execution
The Bing SDK is pretty easy to use. You can add it to your page with a script, put it into a content editor web part and connect it from the address parameters in a list.
Steps:
1. Go to jquery.com and download the latest jQuery library to your desktop. You want to get the compressed production version, not the development version.
2. Open SharePoint Designer (SPD) and connect to the root level of your site's site collection.
In SPD, open the "Style Library" folder. Create a folder named "Scripts" inside of the Style Library. Drag the jQuery library JavaScript file from your desktop into the Scripts folder.
In the Scripts folder, create a new JavaScript file and name it (e.g. "actions.js").
3. If you are using visual studio add a folder for js, you can create a new folder at the root level or if you prefer more cleaner solutions like me, you can use the layouts folder which cleans out on deactivation/uninstall.
4. Within the <head> tag of the master page, add a script reference to the jQuery library just above the content place holder named "PlaceHolderAdditonalPageHead" (and above your custom CSS references, if applicable) as follows:
<script src="/Style%20Library/Scripts/{jquery library file}.js" type="text/javascript"></script>
Immediately after the jQuery library reference add a script reference to your custom scripts file as follows:
<script src="/Style%20Library/Scripts/actions.js" type="text/javascript"></script>
Inside your script tag, you can test if jQuery is already defined and if not, then add it to the page.
<script type='text/javascript'>
if (typeof jQuery == 'undefined')
document.write('<scr'+'ipt type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></sc'+'ript>');
</script>
For the inquisitive few... Read on if you'd like :)
Why jQuery on SharePoiny is Awesome
It’s all about that visual wow factor.
You can get past that, “But it looks like SharePoint” Take a long list view and put it into JQuery with pagination, etc and you are the hero. It’s also about new controls you get with JQuery that you couldn’t do before.
Why jQuery with SharePoint should be Awful
Although it’s fairly easy to get jQuery up and running. Copy/Paste can cause a problem. If you don’t understand what it’s doing in the Client Object Model and the Document Object Model then it will do things on your site that were completely unexpected. Many blogs will note workarounds they employed on their sites. Why it’s not working: Debugging “sucks”.
You need to develop small blocks of functionality, Test it by putting in some alerts and console.log. Set breakpoints and monitor the DOM via Firebug and some IE development tools
Performance - It happens all the time. But you should look at the tradeoffs. More time may give you more functionality.
Consistency - ”But it works fine on my computer. So test on many browsers. Take into account client resources
Harm the Farm - You need to code wisely and negatively test. Don’t be the cause of a DoS attack that’s really JQuery asking for a resource over and over and over again. So code wisely. Do negative testing. Monitor Server Resources.
They also did a demo where JQuery did an endless loop to pull data from a list. It’s a poor decision but also an easy mistake. They spiked their server resources within a couple seconds and had to shut down the call before it brought it down.
Conclusion
JQuery is now another tool in your tool kit. You don’t have to use it. Use it where it makes sense and where it helps you get your job done.
Don’t abuse it, you will pay for it later
It will add to page bloat so take that into account
It can slow your performance
© Geeks with Blogs or respective owner
