Embed Size (px)
DESCRIPTION
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
Citation preview
Easy Tabs, Slideshows, Dashboards, etc.:Client Side Scripts for SharePoint
Christophe HumbertSan Diego SharePoint User GroupMarch 1st, 2011
Objective of the Presentation
Get a grasp of how client side scripting can enhance the user experience
Be aware of the risks that come with such solutions
Agenda
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
About Me
Name Christophe Humbert
Title SharePoint “functional” consultant
Mission Make the most of the OOTB features
Field Gear
Calculated ColumnsContent Editor Web PartData View Web Part (SharePoint Designer)Workflows (SharePoint Designer)
Country eFrance, eU.S.A., eChina
Latest News
Started “User Managed Solutions LLC” in 2011(San Diego, 92127)
Before we look at the demos… 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
DemosThe Easy Tabs
Standard
Styled tabs
Accordion
DemosCross-Site Snapshot
Snapshot
Original list
DemosColor Coded Calendar
Tutorial
Live demo
DemosImage Rotator, Slideshow
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]
DemosVisual Indicators
Various visual indicators
Countdown
Traditional ApproachPage built on the server side, rendered in the browser
Server BrowserUser enters
URL
Retrieve Page information
Retrieve content from
databaseBuild HTML
Render HTML page
User action
AJAXServer Browser
User enters URL
Retrieve Page information
Retrieve content from
databaseBuild and send
HTML Render HTML Page
User action
Request additional content
Retrieve and send content
Build HTML
Web services
RSSowssvrhtmlREST
Format: html, xml,
JSON
AsynchronousJavaScriptAndXML
ProgressiveEnhancement
Server BrowserUser enters
URL
Retrieve Page information
Retrieve content from
databaseBuild and send
HTMLRender HTML
Page
User action
Modify and render HTML
Example: SharePoint Calendars 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
AJAX - Examples
Image Rotator
Slideshow
Cross-site snapshot
Scripts in SharePoint Pages
Page template
Web Part
Top navigation
QuickLaunch
Web Part Web Part
Web Part
Scripts can be added to the page template, or via a Web Part (usually a Content Editor Web Part)
Progressive EnhancementApplied to SharePoint
Users’ needs
OOTB Web Parts
Progressive EnhancementApplied to SharePoint
Users’ needs
OOTB Web Parts
Custom Web Part
Progressive EnhancementApplied to SharePoint
Users’ needs
OOTB Web Parts
Custom Web Part
Progressiveenhancement
Progressive EnhancementExamples
Easy Tabs
Color coded calendar
PivotTable
Progressive EnhancementBenefits
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
Pitfalls
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
Step by StepThe Easy Tabs
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
Conclusion
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
References
SharePoint User Toolkit http://sp2010.pathtosharepoint.com/shar
epoint-user-toolkit/
SharePoint User Managed Solutions (SUMS) LinkedIn open group (everybody has
read access)
Other Useful Links
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”
The Content Editor Web Part
Allows users to embed custom html in a SharePoint pageHTML includes <script> and <link> tags
Best practice: store the script in a central library and link to it
jQuery
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.)
Enablers
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)
