Office 365 – Using jQuery with SharePoint Online
If you’re like me, you like to get the job done. Sure, sure, it’s fun to dig into the code to see exactly how stuff is done, but that is not really an option when you have a deadline. That is why I choose to use jQuery when I need to liven up a web page or do some web programming magic.
So, how do we use all this jQuery goodness in SharePoint Online? That is what I hope to show you in today’s article where we’ll write a fairly simple SharePoint WebPart and add some jQuery logic to it.
Referencing jQuery from SharePoint
Before we can use jQuery in our SharePoint web part we need to find a way to reference the library. There are a few options available to us, of which one is to simply add a reference to the script via a Content Delivery Network (CDN). In the example below we’re referencing the jQuery library via Google’s CDN:
Using a content delivery network like Google’s is a great way to speed up your website as the chances are the user visiting your website has already visited a website that also references a library in the Google CDN and it is already in the users’ cache. To see a list of libraries available via the Google CDN, have a look at the Google Libraries API – Developer’s Guide.
Another option and the one we’ll be using for this example is to create a SharePoint document list to hold all your scripts. Create a new document library in SharePoint by selecting New Document Library from the Site Actions menu.
Name the library Scripts and click Create.
The nice thing about jQuery is that it has a whole host of community developed plug-ins, one of which is Hovercard. We’ll use this plugin to show more details about items in a SharePoint list called Books. Download Hovercard and also add it to the Scripts SharePoint library.
Creating the SharePoint WebPart
With the jQuery library and Hovercard plugin file uploaded, let’s create a new Empty SharePoint Project in Visual Studio 2010. Today we will not use the “ADX SharePoint Ribbon” project template because our Ribbon Designer for SharePoint and Office 365 would add a new SharePoint feature already containing ribbon while we need a new empty project.
Select a local SharePoint site for debugging and make sure to select Deploy as a sandboxed solution.
Next, add a Visual Web Part (Sandboxed) item to your project. If you don’t see the Web Part (Sandboxed) item, you need to install the Visual Studio 2010 SharePoint Power Tools.
We won’t add any visual controls to our web part, but we’ll do everything in mark-up. The entire code listing for the Visual Web Part is as follows:
The LoadList function retrieves all items from the Books SharePoint list and the ListRetrieved function loops through all the list items and appends the values, using jQuery, to the books Div.
Finally, we loop through each html element that has a class name containing the word book and add a Hovercard to it with the elements’ title attribute as the Hovercards’ detailsHTML.
Packaging and deploying to Office 365 SharePoint Online
Once everything is tested you can package the SharePoint solution by selecting Package from the Visual Studio Build menu. This will create a .wsp file in your projects’ bin folder. Check your Output window for the full path to the file if you’re not sure.
Next, log into your Office 365 SharePoint Online account, and click on the Site Actions > Site Settings menu item.
Next, click on the Solutions link under the Galleries heading.
Click on the Upload Solution button on the Solution tab:
Select and upload the .wsp file and click OK. When prompted activate your solution by clicking on the Activate button.
Navigate to a SharePoint page, and insert the jQuery web part we’ve just uploaded.
Once you’re finished editing the page, and the page loads, it will display a list of all the items in the SharePoint Books list. When you hover the mouse cursor over a book title it will display the books’ synopsis:
Thank you for reading. Until next time, keep coding!