Office Live provides users with a decent page designer to create a website. There is often the need to customize the web pages with more rich content, and you may be limited to what the designer can do. Office Live uses SharePoint and ASPX (.NET) for the creation of the websites, but we can only upload markup pages with no code behind. Nevertheless, this constraint can be overcome by manipulating the UI from the client end. For those cases, we can use a bit of programming ability, and with the use of a JavaScript framework, we can make any plain website look and behave a lot better.
This is where jQuery comes in to help us. jQuery is a JavaScript framework which can be used to manipulate the DOM on the client, make AJAX calls to other pages and/or websites (keep in mind the cross domain issues). To use this framework, we first need to figure out where to get the file and how to download it to the page.
You can visit http://docs.jquery.com/Downloading_jQuery and get a link to a CDN (Content Delivery Network). In this case, you could use the Microsoft CDN. Make sure to copy the link. In the case that you want to save a copy of the file in your website, you can get the latest version of jQuery from jquery.com. Visit the website and look for "Grab the Latest Version" header. Select the production checkbox, click on the download button and save to your computer. This should save the minimized (no spaces, no comments, lighter in size) version of the File. Once you have the copy on your workstation, you can login to your Office Live administration website and upload the file to your document gallery.
We are now ready to add jQuery to our website, and we can do this with the help of a module. Login to the Administration site and select website design. On the page editor, follow these steps:
- Select the page that needs to be modified
- Select module
- Select custom footer (NOT the HTML modules because it uses an
IFrame and timer to load the HTML)
On the dialog, delete everything and add the following:
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html" />
<xsl:template match="/Footer">
<script type="text/javascript"
src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
</xsl:template>
</xsl:stylesheet>
If you decided to use your document gallery to host the file, you should replace the Microsoft URL (bold letters) with this:
<script type="text/javascript"
src="http://www.codeproject.com/documents/jquery-1.4.2.min.js"></script>
Press OK and save the page. You can now load the page and do a view source. You will see that the reference to jQuery is now present on the page. Now that framework is available to your page, we now need to add the customization script. The framework does not do anything on its own. There is the need for a custom script which will be used to manipulate the web page. This is part of a different blog which I will be providing soon.
