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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
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: