SharePoint jQuery Script Management
Upcoming SlideShare
Loading in...5

Like this? Share it with your network

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 16 6 5 5

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. SharePoint jQuery Shared & Common Include Files 16-jun-2009 Kjell-Sverre Jerijærvi
  • 2. 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
  • 3. 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
  • 4. 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”
  • 5. 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”
  • 6. CEWP Script Include
    • Add include files to web-pages using CEWP
      • The jQuery library itself (specific version):
        • <script src=&quot;http://<ROOT>/MasterScriptLibrary/jquery-1.3.2.min.js&quot; type=&quot;text/javascript&quot;></script>
      • Common include files:
        • <script src=&quot;http://<ROOT>/MasterScriptLibrary/ScrollingListFrozenHeader420px.js&quot; type=&quot;text/javascript&quot;></script>
      • Shared include files:
        • <script src=&quot;http://<TOPSITE>/ScriptLibrary/<SiteListName>AdjustColumnWidth.js&quot; type=&quot;text/javascript&quot;></script>
      • CSS include files:
        • <link href=&quot;http://<TOPSITE>/ScriptLibrary/datagrid.css&quot; rel=&quot;Stylesheet&quot;></link>
    • Use relative URLs, avoid absolute URLs at all cost
  • 7.
    • 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>
  • 8. Common List Scripts
    • A common script MUST NOT contain any hardcoded list specific data
    • Common scripts can reference JavaScript variables to avoid hardcoding
    • Use the list view web-page ContextInfo ”ctx” variable to inject list data into the script:
      • $(&quot;TABLE[ID^=' &quot; + ctx.listName + &quot; ']:first&quot;, &quot;#MSO_ContentTable&quot;);
  • 9. Shared List Scripts
    • Shared scripts contain list specific data
    • Shared scripts are typically used across all view web-pages to set e.g. column widths based on the text of list headers
      • $(&quot; 'Type of Work' ):first&quot;).css(&quot;width&quot;, &quot;200px&quot;);
  • 10. Resources
    • jQuery library latest versions:
    • jQuery for everyone:
    • My blog: