Your SlideShare is downloading. ×
SharePoint jQuery Script Management
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

SharePoint jQuery Script Management


Published on

Published in: Technology

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

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: