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

No notes for slide

SharePoint jQuery Script Management

  1. 1. SharePoint jQuery Shared & Common Include Files 16-jun-2009 Kjell-Sverre Jerijærvi
  2. 2. jQuery Scripts <ul><li>jQuery is a library for manipulating web pages </li></ul><ul><li>Add jQuery scripts to SharePoint web pages using the ”Content Editor Web Part” (CEWP) </li></ul><ul><li>Script classification: </li></ul><ul><ul><li>Unique : the script is unique to the web page </li></ul></ul><ul><ul><li>Shared : the script is shared between multiple related web pages, typically for all view pages of a specific list </li></ul></ul><ul><ul><li>Common : the script is common for unrelated web pages, typically for view pages for more than one list </li></ul></ul>
  3. 3. Unique, Shared, Common <ul><li>Recommended practices for managing scripts according to classification </li></ul><ul><ul><li>Unique : add the script as text directly on the page </li></ul></ul><ul><ul><li>Shared : add the script as a file included on the page </li></ul></ul><ul><ul><li>Common : add the script as a file included on the page </li></ul></ul><ul><li>Keep shared and common scripts in separate include files – do not mix scripts of different classification </li></ul><ul><li>Keep shared list scripts in separate include files, one per list – do not mix scripts for different lists </li></ul>
  4. 4. Include Files <ul><li>Store common include files in a global document library called ” MasterScriptLibrary ” </li></ul><ul><li>Store shared include files in a document library per site-collection called ” ScriptLibrary ” </li></ul><ul><li>Store custom CSS style sheets also in the script libraries </li></ul><ul><li>Assign ”Read” permissions on the script libraries to the group ”Authenticated Users” </li></ul>
  5. 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. 6. CEWP Script Include <ul><li>Add include files to web-pages using CEWP </li></ul><ul><ul><li>The jQuery library itself (specific version): </li></ul></ul><ul><ul><ul><li><script src=&quot;http://<ROOT>/MasterScriptLibrary/jquery-1.3.2.min.js&quot; type=&quot;text/javascript&quot;></script> </li></ul></ul></ul><ul><ul><li>Common include files: </li></ul></ul><ul><ul><ul><li><script src=&quot;http://<ROOT>/MasterScriptLibrary/ScrollingListFrozenHeader420px.js&quot; type=&quot;text/javascript&quot;></script> </li></ul></ul></ul><ul><ul><li>Shared include files: </li></ul></ul><ul><ul><ul><li><script src=&quot;http://<TOPSITE>/ScriptLibrary/<SiteListName>AdjustColumnWidth.js&quot; type=&quot;text/javascript&quot;></script> </li></ul></ul></ul><ul><ul><li>CSS include files: </li></ul></ul><ul><ul><ul><li><link href=&quot;http://<TOPSITE>/ScriptLibrary/datagrid.css&quot; rel=&quot;Stylesheet&quot;></link> </li></ul></ul></ul><ul><li>Use relative URLs, avoid absolute URLs at all cost </li></ul>
  7. 7. <ul><li>Order the scripts like this in CWEP: </li></ul><ul><ul><li>Common include files </li></ul></ul><ul><ul><li>Shared include files </li></ul></ul><ul><ul><li>Unique script as plain CEWP source text </li></ul></ul>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. 8. Common List Scripts <ul><li>A common script MUST NOT contain any hardcoded list specific data </li></ul><ul><li>Common scripts can reference JavaScript variables to avoid hardcoding </li></ul><ul><li>Use the list view web-page ContextInfo ”ctx” variable to inject list data into the script: </li></ul><ul><ul><li>$(&quot;TABLE[ID^=' &quot; + ctx.listName + &quot; ']:first&quot;, &quot;#MSO_ContentTable&quot;); </li></ul></ul>
  9. 9. Shared List Scripts <ul><li>Shared scripts contain list specific data </li></ul><ul><li>Shared scripts are typically used across all view web-pages to set e.g. column widths based on the text of list headers </li></ul><ul><ul><li>$(&quot; 'Type of Work' ):first&quot;).css(&quot;width&quot;, &quot;200px&quot;); </li></ul></ul>
  10. 10. Resources <ul><li>jQuery library latest versions: </li></ul><ul><li>jQuery for everyone: </li></ul><ul><li>My blog: </li></ul>