SharePoint jQuery Script Management

SharePoint jQuery Script Management - Presentation Transcript

SharePoint jQuery Shared & Common Include Files 16-jun-2009 Kjell-Sverre Jerijærvi

jQuery Scripts

jQuery is a library for manipulating web pages

Add jQuery scripts to SharePoint web pages using the ”Content Editor Web Part” (CEWP)

Script classification:

Unique : the script is unique to the web page

Shared : the script is shared between multiple related web pages, typically for all view pages of a specific list

Common : the script is common for unrelated web pages, typically for view pages for more than one list

Unique, Shared, Common

Recommended practices for managing scripts according to classification

Unique : add the script as text directly on the page

Shared : add the script as a file included on the page

Common : add the script as a file included on the page

Keep shared and common scripts in separate include files – do not mix scripts of different classification

Keep shared list scripts in separate include files, one per list – do not mix scripts for different lists

Include Files

Store common include files in a global document library called ” MasterScriptLibrary ”

Store shared include files in a document library per site-collection called ” ScriptLibrary ”

Store custom CSS style sheets also in the script libraries

Assign ”Read” permissions on the script libraries to the group ”Authenticated Users”

Script Library Locations Farm Web Application Root Site-Collection Top-Level Site Subsite Subsite Managed Site-Collection ROOT /MasterScriptLibrary TOPSITE /ScriptLibrary TOPSITE /ScriptLibrary Assign ”Read” permissions on the script libraries to the group ”Authenticated Users”

CEWP Script Include

Add include files to web-pages using CEWP

The jQuery library itself (specific version):

<script src="http://<ROOT>/MasterScriptLibrary/jquery-1.3.2.min.js" type="text/javascript"></script>

Common include files:

<script src="http://<ROOT>/MasterScriptLibrary/ScrollingListFrozenHeader420px.js" type="text/javascript"></script>

Shared include files:

<script src="http://<TOPSITE>/ScriptLibrary/<SiteListName>AdjustColumnWidth.js" type="text/javascript"></script>

CSS include files:

<link href="http://<TOPSITE>/ScriptLibrary/datagrid.css" rel="Stylesheet"></link>

Use relative URLs, avoid absolute URLs at all cost

Order the scripts like this in CWEP:

Common include files

Shared include files

Unique script as plain CEWP source text

CEWP Script Order TOPSITE/ScriptLibrary ROOT/MasterScriptLibrary CEWP jQuery library v1.3.2 Scrolling list w/ frozen header SiteList A adjust column widths SiteList B change styles <script src= jQuery > <script src= common > <script src= shared > <script> page specific script </script>

Common List Scripts