• Like
  • Save
Bringing Zest to SharePoint Sites Using Out-of-the-Box Technology
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Bringing Zest to SharePoint Sites Using Out-of-the-Box Technology



Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
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
  • You can use one of the alternate built-in master pages or create your own Master Page and/or Theme.
  • You can use one of the alternate built-in master pages or create your own Master Page and/or Theme.
  • You can use one of the alternate built-in master pages or create your own Master Page and/or Theme.
  • Remove the following three lines of code:<asp:ContentContentPlaceHolderId="PlaceHolderPageImage" runat="server"></asp:Content> <asp:ContentContentPlaceHolderId="PlaceHolderLeftNavBar" runat="server"></asp:Content><asp:ContentContentPlaceHolderId="PlaceHolderNavSpacer" runat="server"></asp:Content>References: http://www.beyondweblogs.com/post/Quick-Launch-Navigation-missing-from-SharePoint-Web-part-page.aspxhttp://weblogs.asp.net/sharadkumar/archive/2009/06/19/sharepoint-2007-how-to-enable-left-navigation-quick-launch-for-all-web-part-pages-in-a-farm.aspx
  • Remove the following three lines of code:<asp:ContentContentPlaceHolderId="PlaceHolderPageImage" runat="server"></asp:Content> <asp:ContentContentPlaceHolderId="PlaceHolderLeftNavBar" runat="server"></asp:Content><asp:ContentContentPlaceHolderId="PlaceHolderNavSpacer" runat="server"></asp:Content>References:http://www.beyondweblogs.com/post/Quick-Launch-Navigation-missing-from-SharePoint-Web-part-page.aspxhttp://weblogs.asp.net/sharadkumar/archive/2009/06/19/sharepoint-2007-how-to-enable-left-navigation-quick-launch-for-all-web-part-pages-in-a-farm.aspx
  • Source material: http://msdn.microsoft.com/en-us/library/ms466994.aspx
  • Source material: http://msdn.microsoft.com/en-us/library/ms466994.aspxhttp://www.heathersolomon.com/blog/archive/2007/05/15/SharePoint-Tip--How-to-Activate-the-Drop-Down-Menu.aspx
  • Reference: http://kb2.adobe.com/cps/317/317300.html
  • Show CEWP in action
  • Copy Code Below and paste into Content Editor Web Part. Add CEWP to bottom of page, doesn’t work if added to the top of the page. It has a few restrictions... it needs to be added to each instance or view of the list or library, it will apply to all of the list or library items, and it doesn't seem to work for the Links web part in Summary view (view with the links as bullets).<script type="Text/JavaScript" language="JavaScript">try{ //Get all page linksvar links = document.getElementsByTagName("A"); //Iterate all page links for(vari=0; i<links.length; i++) {var link = links(i); //Coerse to string by concantenating an emptystringvaronValues = link.onclick + link.onfocus + ""; //Change the target of ListItem links //ListItem links contain one of these literals: // Document Library = DispDocItemEx // Links List = OnLink // All Other Lists List = GoToLink (overridden below) if(onValues.indexOf("DispDocItemEx") >= 0 || onValues.indexOf("GoToLink") >= 0 || onValues.indexOf("OnLink") >= 0 ) {link.getAttributeNode("target").value = "_blank"; } }}catch(e){alert(e.Message);}//Override SharePoint's GoToLink function//Create a custom GoToLink functionvar _origGoToLink = GoToLink;GoToLink = function(elm){ if (elm.href == null) return;varch = elm.href.indexOf("?") >= 0 ? "&" : "?";varsrcUrl = GetSource(); if (srcUrl != null && srcUrl != "")srcUrl = ch + "Source=" + srcUrl;vartargetUrl = elm.href + srcUrl; //Use window.open rather than window.locationwindow.open(STSPageUrlValidation(targetUrl));}</script>Reference:http://mindsharpblogs.com/todd/contact.aspx
  • Reference: http://weblogs.wpix.com/news/local/morningnews/blogs/baby0710.jpg
  • Source: http://www.cnn.com/
  • AccuWeather: http://netweather.accuweather.com/adcbin/netweather_v2/signup-page2.asp?partner=netweatherResource: http://www.endusersharepoint.com/2010/03/30/project-for-a-rainy-day-create-a-weather-magnet-for-a-sharepoint-dashboard/
  • Source: http://www.google.com/ig/directory?synd=openBirthday: http://www.google.com/ig/directory?synd=open&cat=all&url=http%3A%2F%2Fwww.labpixies.com%2Fcampaigns%2Fdates%2Fdates.xmlJoke of the Day: http://www.google.com/ig/directory?synd=open&cat=all&url=http%3A%2F%2Fgooglegadgetworld.com%2FJokes%2FPoliticaljokes%2Fbestpoliticaljokes.xmlDaily Tropical Picture: http://www.google.com/ig/directory?synd=open&cat=all&url=http%3A%2F%2Fmidots.com%2Fgadgets%2Fxmldocs%2FmidotsImgViewBeautifulPhotosOfIslands_11.xml
  • Source:WidgetBox: http://www.widgetbox.com/galleryhome/Slideshow: http://www.widgetbox.com/widget/dralzheimerMini-Calendar: http://www.widgetbox.com/widget/calendar-japfPolls: http://www.widgetbox.com/widget/poll-pro?startWithPro=1
  • Source: jCarousel: http://sorgalla.com/projects/jcarousel/examples/static_auto.htmlSource: Rotating Tabs: http://stilbuero.de/jquery/tabs_3/rotate.html
  • Source: http://moblog.bradleyit.com/2009/07/hideremove-workspace-from-sharepoint.htmlAdd this after the .aspx of a form’surl: ?Toolpaneview=2
  • Source: http://store.bamboosolutions.com/sharepoint-column-level-security.aspx
  • Source: http://sharepoint.microsoft.com/blogs/GetThePoint/Lists/Posts/ViewPost.aspx?ID=316
  • Source: http://www.wssdemo.com/Blog/Lists/Posts/Post.aspx?ID=496


  • 1. Bringing Zest to SharePoint Sites Using Out-of-the-box Technology
    Joel Ward
    Edward Wells
    Bethany Kaplan
  • 2. Introduction
    Bringing Zest to SharePoint Sites Using Out-of-the-Box Technology
  • 3. Who we are
    Joel Ward
    SharePoint Developer/Architect
    Edward Wells
    SharePoint Advisor/Developer
    Bethany Kaplan
    SharePoint Functional SME
  • 4. Why we are here
    Worked with SharePoint in various government and commercial environments
    Share some ways to overcome your environmental restrictions
    SharePoint does not always require in depth programming or server access
    Give some ideas to get the juices flowing
    This will not be an exhaustive set of solutions by any means – but instead we hope it will empower you to think out of the box to jazz up and add functionality to your SharePoint sites.
  • 5. Session Outline
    Quick Hits
    Change the “SharePoint look” - Master Page
    Re-Enable Quick Launch
    PDF Page Anchor Navigation
    Content Editor Web Part (CEWP)
    Open List Item in New Window
    Tiered Scenarios
    Page Pizzazz with Functionality
    Form and Column Control
    Field Options to Ensure Consistent Data Input
    Metrics & Key Performance Indicators
    Final Thoughts & Questions
  • 6. Quick Hits
    Bringing Zest to SharePoint Sites Using Out-of-the-Box Technology
  • 7. Changing the “SharePoint Look”
    Many clients/users don’t like the “SharePoint look”,…you know, that typical blue background…but how can that be changed?
  • 8. Changing the “SharePoint Look” – Themes
  • 9. Changing the “SharePoint Look” – Master Page
  • 10. Re-enable Quick Launch
    When you create a standard web part page, the Quick Launch is not present
    Ways to overcome the missing navigation
    Head in sand: Ignore it
    Without SharePoint Designer: Edit by renaming file, edit two lines
    Using SharePoint Designer: Edit the page to re-enable the Quick Launch
    More Navigation Goodness: Modify navigation control attributes
  • 11. Re-Enable Quick Launch: Without SharePoint Designer
    Rename .ASPX file to .TXT
    Open and comment out or remove the following three lines of code::
    <asp:ContentContentPlaceHolderId="PlaceHolderPageImage" runat="server"></asp:Content>
    <asp:ContentContentPlaceHolderId="PlaceHolderLeftNavBar" runat="server"></asp:Content>
    <asp:ContentContentPlaceHolderId="PlaceHolderNavSpacer" runat="server"></asp:Content>
    Rename .TXT back to .ASPX
  • 12. Re-Enable Quick Launch: Using SharePoint Designer
    Comment out or remove the following three lines of code:
    <asp:ContentContentPlaceHolderId="PlaceHolderPageImage" runat="server"></asp:Content>
    <asp:ContentContentPlaceHolderId="PlaceHolderLeftNavBar" runat="server"></asp:Content>
    <asp:ContentContentPlaceHolderId="PlaceHolderNavSpacer" runat="server"></asp:Content>
    The same techniques can be used to modify the navigation properties as we used to re-enable the quick launch
    Open master page as text file, or preferably open in SharePoint Designer (make a copy first!)
    Enhance the navigation
    Make menus dynamic
    Make titles wrap
    Add multiple levels to menus
    Use custom code to add fly-ins and other advanced content
  • 14. Modifying Navigation Control Attributes
    ContentPlaceHolder ID = “PlaceHolderLeftNavBar”
    AspMenu control ID = “QuickLaunchMenu”
    <asp:AspMenu id="QuickLaunchMenu“
    DataSourceId="QuickLaunchSiteMap" runat="server“
    Orientation="Vertical" StaticDisplayLevels="1" ItemWrap="true“
    MaximumDynamicDisplayLevels="1" StaticSubMenuIndent="0“
    SkipLinkText="" >
  • 15. PDF Page Anchor Navigation
    SharePoint sites contain hosted content
    In an ideal world everything would be a webpage, right?
    In the real world browser hosted content often comes in PDF form
    User guides, policy manuals and books are often PDF form
    PDFs can consist of dozens or thousands of pages
    Links are targeted references to specific material.
    Opening a 500 page document at the beginning of page one does not give me the policy I need in the middle of page 304
    Enter PDF page anchors!
    So quick, easy that anyone can make them
  • 16. PDF Page Anchor Navigation
    What if you want a link in SharePoint to open a PDF to a specific page within the PDF (a manual for instance)?
    Solution: Add the following the end of the link’s URL: #page=[page number]
    Example: www.edrocks.com/documents/mypdf.pdf#page=9
    What if you want a link in SharePoint to open a PDF to a specific destination, such as a Glossary, without the link being tied to a page number (in case the document and page numbers get updated)?
    Solution: Set the destination within the PDF file, then create a link that points to this destination by adding the following to the end of the links URL: #[destination name]
    Example: www.edrocks.com/documents/mypdf.pdf#section
  • 17. Our Friend, the Content Editor Web Part
    The Content Editor Web Part is more versatile than you may think
    Can hold rich text, but can also hold HTML, JavaScript and CSS
    Can link to a code file in a document library or elsewhere using a Content Link
    Most HTML and JavaScript is allowed, though the <form> tag is not
  • 18. Open List Item in New Window
  • 19. Tiered Scenarios
    Bringing Zest to SharePoint Sites Using Out-of-the-Box Technology
  • 20. The Tier System
    Tier 1
    No code
    Web browser configurations
    Tier 2
    Content Editor Web Part
    Basic SharePoint Designer
    Power Users
    Tier 3
    Advanced SharePoint Designer
    Server side programming
    Programmer and IT help required
    Tier 4
    Enterprise applications
    Standard and 3rd party Web Parts
    Cascading Style Sheets
  • 21. Scenario #1: Page Pizzazz with Functionality
    Tier 1: Basic Out-of-the-Box Changes
    Tier 2: Widgets and Gadgets
    Tier 2/3: Using jQuery
    Tier 3/4: Widgets and Web Parts that run off local data
  • 22. Page Pizzazz with Functionality
    Requirement: The site is boring and needs more dynamic content to draw users in
  • 23. Tier 1: Basic Out-of-the-Box Changes
    Jazz up with
    Announcements: Fonts, Colors, Photos
    RSS Feeds
  • 24. Announcements
  • 25. RSS Feeds: News, Stocks,….
  • 26. Pictures
  • 27. Tier 2: Widgets and Gadgets
    Google Gadgets
    And many more…
  • 28. Weather
  • 29. Google Gadgets
    Joke of the Day
    Birthday Viewer/Countdown
  • 30. Widgetbox
    Site Polls
  • 31. Tier 2/3: Using jQuery
  • 32. Tier 3/4: Widgets and Web Parts that run off local data
    Widgets that run off local data
    Data View Web Parts
    Content Query Web Parts
    Custom coded widgets
    Custom Web Parts
    Third party Web Parts
    The possibilities are endless!
  • 33. Scenario #2: Form and Column Control
    Tier 1: Description – “Admin Only”
    Tier 2: Script to Hide Fields
    Tier 3: Column-level security (Web Part)
  • 34. Tier 1: Form Control through Description – “Admin Only”
    Very Simple
    Most popular solution
  • 35. Tier 2: Script to Hide FieldsWhat you see is what you fill
    • Hides fields, doesn’t block them
    • 36. Doesn't work if true security is needed
    • 37. Newform.aspx vs. Editform.aspx
    CEWP to the rescue!
    Simple JavaScript
    Power user can implement
    <script type="text/javascript">vartrs = document.getElementsByTagName("TR");for (var r in trs) {var row = (trs[r].innerText || trs[r].textContent)+""; if (row.match(/^Row Title 1/) || row.match(/^Row Title 2/)){ trs[r].style.display = "none"; }}</script>
  • 38. Tier 3: Column-level security
    Control access at the column level
    None/Read/Write access configurable
    When the issue is security, not validity or usability
    Bamboo Solutions: Bamboo Column Level Security
  • 39. Scenario #3: Field Options to Ensure Consistent Data Input
    Tier 1: The Choice Column
    Tier 1: The Lookup List
    Tier 2/3: The Auto-Complete Function
    Tier Next: 2010 preview
  • 40. Tier 1: The Choice Column -A Solution for the Everyman
    • Limited Options
    • 41. No Central Management
  • Tier 1: The Lookup ListA Solution for the Power User
    Expanded Options
    Centrally Managed
    Multiple lists and columns can lookup from one list
    Options list manager can have different permissions than source list owner
  • 42. Tier 2/3: The Auto-Complete Function – IT Help Needed
    Functionality only limited by imagination
    Works in Restrictive Environments
    Visually impressive, WOW factor
    Complex, Requires a Programmer
    Maintenance Issues May Occur
    Difficult to troubleshoot
    Difficult to migrate or alter
  • 43. Tier 2/3: The Auto-complete Function – How It Works
  • 44. Tier 2: Coming – jQueryfor SP
    So what used to be Tier 3 is becoming available for Tier 2 Power User audience
    End User SharePoint (EUSP) is one of the premiere resources
    jQuery Library for SharePoint Web Services on CodePlex
    Also see:
  • 45. Tier Next: 2010 previewLookups of the Future!
    Unique columns
    Enhanced lookup columns
    Enforced lookup relationships
    Un-enforced lookup relationships
    Viewing items in list relationships
  • 46. Tier Next: SharePoint 2010 Validation
    Single column input validation
    Cross column input validation
    • Excellent for usability
    • 47. Scrubs results at the point of input
    Ian Morrish: SharePoint 2010 Column Validation
  • 48. Metrics & Key Performance Indicators
    Tier 1: Enterprise MOSS KPIs (if you’re so lucky)
    Tier 1: List Views (for WSS and MOSS Standard)
    Tier 2: DataViews or JavaScript in SPD
    Tier 3: SQL Server Reporting Services (SSRS), Performance Point, Custom Web Parts
    Tier 3/4: Other Enterprise BI solutions
  • 49. Final Thoughts & Questions
    Bringing Zest to SharePoint Sites Using Out-of-the-Box Technology
  • 50. Final Thoughts
    You have more options than straight out-of-the-box look, feel and functionality, even as a Power User
    Quick, free and easy alterations can really jazz up your site and are found by quick internet searches
    There are multiple ways of achieving similar outcomes
    Know when you need to involve IT
  • 51. Session Suggestions
    How to Use jQuery to Enhance the User Experience
    Just missed it at 9am
    Marc Anderson
    No Code Enhancements to the SharePoint Interface
    10:30am in the Forum
    Mark Miller (End User SharePoint)
    Mapping Mashups with SharePoint Designer
    2:30pm in the Forum
    Tom Resing
  • 52. Contact & Questions
    Blog: joelsef.blogspot.com
    Twitter: @joelsef
    Email: joel@wardworks.com
    Twitter: @edkwells
    Email: edkwells@gmail.com
    Twitter: @bfaith20