Christophe HumbertSan Diego SharePoint User GroupMarch 1st, 2011
   Get a grasp of how client side scripting can    enhance the user experience   Be aware of the risks that come with su...
   Demos   Rendering Web Pages:     The traditional approach: server/browser     Client side scripting:      ▪ AJAX   ...
Name         Christophe HumbertTitle        SharePoint “functional” consultantMission      Make the most of the OOTB featu...
   The solutions presented here apply to all    flavors of SharePoint 2007 and 2010   They can be installed via the stan...
   Standard   Styled tabs   Accordion
   Snapshot   Original list
   Tutorial   Live demo
   Image Rotator   Slideshow     Slideshows or sliders are obviously a popular trend     right now in the web design wo...
   Various visual indicators   Countdown
   Matrix view
Server            Browser                   User enters URL Retrieve Page  informationRetrieve content from database  Buil...
Server             Browser                                        User enters URL                    Retrieve PageAsynchro...
Server             Browser                    User enters URL Retrieve Page  informationRetrieve content from databaseBuil...
   SharePoint 2007:     events are added on the server side     Full page refresh for new date   SharePoint 2010:    ...
   Image Rotator   Slideshow   Cross-site snapshot
Page template                        Top navigation                        Web Part         Web Part            Quick     ...
Users’ needsOOTB Web Parts
Custom Web Part                   Users’ needsOOTB Web Parts
Custom Web Part                           Users’ needsOOTB Web Parts                 Progressive                 enhancement
   Easy Tabs   Color coded calendar   PivotTable
   High flexibility     Example: color coded calendar   Lighter to test and install   Easy to remove – back to the OOT...
   Risk: users gone wild     Solution: educate the users   Method or hack (example: HTML Calculated    Column)   Doesn...
   Get the script   Upload the script to the Site Assets library     Tagging   Add a Content Editor Web Part   Link t...
   Client side scripting is a powerful addition to    your SharePoint toolbox   See it as a complement to server side   ...
   SharePoint User Toolkit     http://sp2010.pathtosharepoint.com/sharepoint-     user-toolkit/   SharePoint User Manag...
   Sites regularly updated with fresh, up-to-date    content:   jQuery Library for SharePoint Web Services –    Marc And...
   Allows users to embed custom html in a    SharePoint page    HTML includes <script> and <link> tags   Best practice: ...
   jQuery is a popular JavaScript library     Built on JavaScript     Strengths:      ▪ Offers AJAX in a packaged, user...
   Recognition of AJAX as a standard way to    interact with the browser   Development of JavaScript libraries that    a...
Upcoming SlideShare
Loading in …5
×

Easy tabs, Slideshows, Dashboards, etc - Client Side Scripts for SharePoint

20,232 views

Published on

My presentation from March 2011 at the San Diego SharePoint User Group. Some of the tools presented here can be downloaded from the SharePoint User Toolkit

http://usermanagedsolutions.com/SharePoint-User-Toolkit/default.aspx

A live demo of the matrix view is available here (click on a state):

http://usermanagedsolutions.com/Demos/Pages/StatesMap.aspx?IsDlg=1&mobile=0

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
20,232
On SlideShare
0
From Embeds
0
Number of Embeds
11,712
Actions
Shares
0
Downloads
33
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Easy tabs, Slideshows, Dashboards, etc - Client Side Scripts for SharePoint

  1. Christophe HumbertSan Diego SharePoint User GroupMarch 1st, 2011
  2.  Get a grasp of how client side scripting can enhance the user experience Be aware of the risks that come with such solutions
  3.  Demos Rendering Web Pages:  The traditional approach: server/browser  Client side scripting: ▪ AJAX ▪ Progressive enhancement The demos explained Advantages/shortcomings Step by step: Easy Tabs installation
  4. Name Christophe HumbertTitle SharePoint “functional” consultantMission Make the most of the OOTB featuresField Gear Calculated Columns Content Editor Web Part Data View Web Part (SharePoint Designer) Workflows (SharePoint Designer)Country eFrance, eU.S.A., eChinaLatest News Started “User Managed Solutions LLC” in 2011 (San Diego, 92127)
  5.  The solutions presented here apply to all flavors of SharePoint 2007 and 2010 They can be installed via the standard SharePoint UI They rely on custom code, and are not available out of the box. However, many of them:  Are packaged, and can easily be installed by end users or power users  Are available for free
  6.  Standard Styled tabs Accordion
  7.  Snapshot Original list
  8.  Tutorial Live demo
  9.  Image Rotator Slideshow  Slideshows or sliders are obviously a popular trend right now in the web design world – and for good reason. It’s an effective way to highlight something important and create some visual interest. [Source]
  10.  Various visual indicators Countdown
  11.  Matrix view
  12. Server Browser User enters URL Retrieve Page informationRetrieve content from database Build HTML Render HTML page User action
  13. Server Browser User enters URL Retrieve PageAsynchronous informationJavaScript Retrieve contentAnd from databaseXML Build and send HTML Render HTML Page Web services Request additional RSS content owssvr html Retrieve and send REST content Build HTML User action Format: html, xml, JSON
  14. Server Browser User enters URL Retrieve Page informationRetrieve content from databaseBuild and send HTML Render HTML Page Modify and render HTML User action
  15.  SharePoint 2007:  events are added on the server side  Full page refresh for new date SharePoint 2010:  events are added on the client side (progressive enhancement)  Partial page refresh for new date (AJAX) Works well for rich display, or for content updates
  16.  Image Rotator Slideshow Cross-site snapshot
  17. Page template Top navigation Web Part Web Part Quick Launch Web Part Web Part Scripts can be added to the page template, or via a Web Part (usually a Content Editor Web Part)
  18. Users’ needsOOTB Web Parts
  19. Custom Web Part Users’ needsOOTB Web Parts
  20. Custom Web Part Users’ needsOOTB Web Parts Progressive enhancement
  21.  Easy Tabs Color coded calendar PivotTable
  22.  High flexibility  Example: color coded calendar Lighter to test and install Easy to remove – back to the OOTB behavior Client side interaction works offline Leverages resources outside the SharePoint world  Benefits from the active JavaScript community (e.g. jQuery plugins) Great way to empower the users and encourage user adoption
  23.  Risk: users gone wild  Solution: educate the users Method or hack (example: HTML Calculated Column) Doesn’t solve everything (permissions, access other domains) Issues with older browsers, or if the user turns off client side scripting Dependent on the original, OOTB Web Parts If the original HTML content is modified, the script needs to be executed again
  24.  Get the script Upload the script to the Site Assets library  Tagging Add a Content Editor Web Part Link the CEWP to the script [optional] Export the CEWP, upload it to the Web Part gallery
  25.  Client side scripting is a powerful addition to your SharePoint toolbox See it as a complement to server side options, rather than a competitor It is code that requires attention and maintenance, don’t be fooled by its apparent ease of use
  26.  SharePoint User Toolkit  http://sp2010.pathtosharepoint.com/sharepoint- user-toolkit/ SharePoint User Managed Solutions (SUMS)  LinkedIn open group (everybody has read access)
  27.  Sites regularly updated with fresh, up-to-date content: jQuery Library for SharePoint Web Services – Marc Anderson, SharePoint MVP SharePoint JavaScripts – Alexander Bautz Path to SharePoint Search the Web for “SharePoint JavaScript” or “SharePoint jQuery”
  28.  Allows users to embed custom html in a SharePoint page HTML includes <script> and <link> tags Best practice: store the script in a central library and link to it
  29.  jQuery is a popular JavaScript library  Built on JavaScript  Strengths: ▪ Offers AJAX in a packaged, user friendly interface ▪ Addresses cross-browser inconsistencies ▪ Has prebuilt animation functions (fade, etc.)
  30.  Recognition of AJAX as a standard way to interact with the browser Development of JavaScript libraries that address cross-browser issues New generation of browsers with JavaScript engines that boost performance New standards that increase the features of client side scripting (e.g. canvas element)

×