B i t s O f S h a r e P o i n t C o n s u l t i n g L L C > T o p i c P o i n t > Document Library  

Navigation
T o p i c P o i n t - A centralized place for topics with an Overview, related posts from BlogPoint, specific examples from ExamplePoint, and related internet resources.

 T o p i c P o i n t (select)

BasicTopic: NavigationTop

 Overview - Basic

 
Navigation of a website is so critical and is one of the main parts that either makes or breaks a good website.  I will be listing out some solutions and best practices in this matter.
 
Quick Launch:
 
Add to web part pages:
Why is it absent when you create a web part page.  I do not know why Microsoft did not include it in a web part page, but they did not.  In my Blog below I have several solutions for both WSS 3.0 and MOSS.  I have also added links to where I found solutions online.
 
Hide for web part pages:
Now for those pages that have the quick launch bar you can easily hide it if you want.  Add a CEWP and add this code an it will be hidden.
 
<style>
.ms-quicklaunch
{
display:none;
}
.ms-navframe
{
display: none;
}
</style>
 
Customize:
Sometimes it may be nice to have more available on the quick launch bar, but not have it all showing and taking up so much space.  Here is an elegant solution.

 B l o g P o i n t - Related Posts - Basic

expand SharePoint Book - Global Navigation Solution 20102/26/2012
expand SharePoint 2007 - Wiki View Solution8/17/2011

I am not thrilled with the OOB wiki that SharePoint provides.  So I created a Wiki solution that can be put on any page within the site that provides a better view of the wiki with a nice navigation menu to the left.

Here is a screen shot of the solution.

wikiview.png

Here is a link to the Wiki Web Part that you can add to any page on the site that has the wiki.

Download the Web Part Here.

After you add this you will need to change several things:

  1. The link to ​jQuery is to Google, you may want to change that to a local copy.
  2. The link to SPServices needs to be changed to a location on your SP site.
  3. Next you will need to change the "wikiListName" to the name of your wiki.
    • Code: var wikiListName = 'Wiki';
    • Change what is in quotes to the name of your wiki.
  4. Last you will need to change the "startPageName" to the page you want to display first.  You will only need to put the name of the file, no need for extentions.
    • Code: var startPageName = 'Home';
    • Change what is in quotes to the name of the file you want to show first.

It should be work once this is all completed.

View a working example here.

Hope this helps.

Here is the 2010 version.

Below is the code:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://www.bitsofsharepoint2010.com/SiteAssets/jquery.SPServices-0.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 var wikiListName = 'Wiki View';
    var startPageName = 'Home';
 var thisSite =$().SPServices.SPGetCurrentSite();
 var wikiSite =  thisSite + '/' + wikiListName + '/' + startPageName + '.aspx';
 var root = location.protocol + '//' + location.host;
 var startSite = wikiSite.replace(root, '').replace(' ', '%20');
 
 $().SPServices({
operation: "GetListItems",
async: false,
listName: wikiListName,
completefunc: function (xData, Status) {
   $(xData.responseXML).find("[nodeName='z:row']").each(function() {
    //alert(xData.responseXML.xml);
    var fileName = $(this).attr("ows_LinkFilename").replace('.aspx', '');
    var URL = $(this).attr("ows_FileRef").split('#');
    var infoURL = URL[1].replace(/\s+/g, '%20');
    var listHtml = '<a href="#" info="/' + infoURL + '" class="wikiLinks">' + fileName + '</a><br/>';
    $("#wikiList").append(listHtml);
   });
  }
 });
 $('#wikiContent').load(startSite + ' .ms-wikicontent', function() {
  
  modifiedInfo(startSite);
  
  addWikiPage();
  wikiURL();
  
  wikiClick();
 });
 
 
 $('.wikiLinks').click(function(){
  
  var siteURL = $(this).attr('info');
  
  //alert(siteURL);
  
  $('#wikiContent').load(siteURL + ' .ms-wikicontent', function() {
   
   modifiedInfo(siteURL);
   
   addWikiPage();
   
   wikiURL();
   wikiClick();
  });
 });
 
 
 function wikiClick() {
  
  $('.ms-wikilink').click(function(){
   
   var mssiteURL = $(this).attr('info');
   
   //alert(mssiteURL);
   
   $('#wikiContent').load(mssiteURL + ' .ms-wikicontent', function() {
    
    modifiedInfo(mssiteURL);
    
    addWikiPage();
    
    wikiURL();
    
    wikiClick();
   });
  });
 }
 
 function wikiURL() { 
  $('.ms-wikilink').each(function(){
   var hrefSite = $(this).attr('href');
   $(this).attr('info', hrefSite);
   $(this).attr('href', '#');
  });
 }

 function modifiedInfo(pageURLM) {
  $('.infoWiki').remove();
  $().SPServices({
   operation: "GetListItems",
   async: false,
   listName: wikiListName,
   completefunc: function (xData, Status) {
    $(xData.responseXML).find("[nodeName='z:row']").each(function() {
     //alert(xData.responseXML.xml);
                                        var pageID = $(this).attr("ows_ID");
     var URLM = $(this).attr("ows_FileRef").split('#');
                                        var wikiEditPage =  thisSite + '/' + wikiListName + '/Forms/EditForm.aspx?ID=' + pageID;
     var infoURLM = "/" + URLM[1].replace(/\s+/g, '%20');
     var fileNameA = $(this).attr("ows_LinkFilename").replace('.aspx', '');
     var infoModified = $(this).attr("ows_Modified");
     var infoEditor = $(this).attr("ows_Editor").split('#');
     var listHtmlB = '<a class="edit-wiki-page infoWiki" href="' + wikiEditPage  + '">Edit this Content</a>';
     var listHtmlA = '<div class="infoWiki">Last Modified ' + infoModified + ' by ' + infoEditor[1] + '</div><br/>';
     
     if ( pageURLM == infoURLM) {
      
      $("#wikiModificated").append(listHtmlA);
      $("#wikiEditContent").append(listHtmlB);
     }
    });
    
   }
  });
 }
 
 function addWikiPage() {
  $().SPServices({
   operation: "GetList",
   listName: wikiListName,
   async: false,
   completefunc: function (xData, Status) {
    //alert(xData.responseXML.xml);
    id = $(xData.responseXML).find("List").attr("ID");
    var urlEdit = thisSite + '/_layouts/CreateWebPage.aspx?List=' + id + '&RootFolder=';
    //alert(urlEdit);
    //alert(id);
    $('#wikiPagAdd').append('<a href="' + urlEdit + '" class="edit-wiki-page infoWiki">Add a Page</a>')
    
    
    
   }
  });
 }
 
 

 
});
</script>
<script type="text/javascript">

function open(siteURL) {
 var options = {
  url: siteURL,
  title: "Add New Wiki Page",
  allowMaximize: true,
  showClose: true,
  dialogReturnValueCallback: silentCallback};
 SP.UI.ModalDialog.showModalDialog(options);}
function silentCallback(dialogResult, returnValue) {
}
function refreshCallback(dialogResult, returnValue) {
 SP.UI.Notify.addNotification('Operation Successful!');
 SP.UI.ModalDialog.RefreshPage(SP.UI.DialogResult.OK);
}
</script>
<table style="width: 100%">
<tr><td valign="top" class="leftWiki"><br/><div id="wikiList" class="nav-wiki-page"></div></td>
<td valign="top"><br/><div id="wikiPagAdd"></div><div id="wikiEditContent"></div><div id="wikiContent"></div><div id="wikiModificated"></div></td>
</tr>
</table>
<style>
.leftWiki {
}
.infoWiki {
 font-weight: bold;
}
.edit-wiki-page {
 display: block;
 font-size: 11px;
 border:2px solid #eeeeee;
 background-color:#ffffff;
 color:#666666;
 float: right;
 text-align: center;
 padding:8px 12px;
 width:115px;
 font-weight: normal;
}
.nav-wiki-page {
 display: block;
 font-size: 11px;
 border:2px solid #eeeeee;
 background-color:#ffffff;
 color:#666666;
 text-align: left;
 padding:8px 12px;
 font-weight: bold;
 white-space:nowrap;
}
</style>

expand SharePoint - Global Navigation 2010 Solution In Progress9/23/2010
expand SharePoint – A Global Navigation Solution Across Site Collections – Permissions7/1/2010

I have deployed this solution with several clients and in doing so I have added some functionality.  One of those areas is Permissions.  If you have not read my previous posts on this topic please check them out:

Permission can be added to version 1.0 or 2.0 and there is no different in how it is implemented.  Actually it is very simple since we will use out of the box features to accomplish this.  We will have the ability to apply permissions to a Tab and/or to a pull down item.

To apply permissions so that a tab or pull down item is only viewable to a specific audience we will use SharePoint’s feature of specify permissions at the item level.  Now this is know in the SharePoint community as not a best practice, but I believe in this case it an exception to the rule that works well for its purpose.  I preach to my clients not break permissions and not to break them at the item level, so when I tell them that we have to do this for this solution they say to me, but you told us not to do that.  There are exceptions to every rule and here is one.

Implementing this solution is simple.  For each tab or pull down item you will change the Manage Permissions settings to Edit Permission.  At this point you can now add and delete groups that should have access to this item.  (Caution:  Do not delete the group that gives you permission to edit the item.  If you do then you will have to ask the Admin to add you back to edit the item.  I know form experience.)

Here is a step by on how to do this.

Step 1

Select the item to apply permissions to and select Manage Permissions.

image

Step 2

Next you will then break the inheritance of permissions by selecting Actions and then Edit Permissions.

image

Step 3

You will get a warning that you are breaking permissions.  You will select Yes to this warning.

image

Step 4

Next you will select New so that you can add the groups or people that need to have access.

image

Step 5

Add the groups or people that should have access and set the user permission to read only.  Next

image

That is it and now the tab or pull down will only show up if the person has permissions to view it.

Depending on how SharePoint permissions are setup in your environment this this can be easy or be complicated.  What do I mean by this?  Well an environment that uses Active Directory groups will have a much easier time with this then an environment that directly adds users to the three standard permissions groups for a site.  Since this solution does not pull permissions based on the location of the link in the pull down, you have to maintain permissions on your site as well as here.  IF you do this through AD groups then it is much easier as you add the same AD groups to the item and you will only need to update the AD group to change who can see the item.

Hope this helps.

expand SharePoint - A Global Navigation Solution across Site Collections – Version 2.0 Solution5/15/2010
expand SharePoint – A Global Navigation Solution Across Site Collections – Version 2.0 Primer and Deployment5/12/2010

This article is going to recount my experience of adding my global navigation to my current site and highlight my next version of the global navigation solution that is a template and should make it much easier to implement, deploy and use.  If you have not read my first article SharePoint – A Global Navigation Solution Across Site Collections, please read that first.

This article will be broken up into two sections:

  1. What were the results and process like to deploy this solution across sites.
  2. What new features have been added in version 2.0

Implementation Process and Results

Let’s first take a look at the results.  My site is a WSS 3.0 version so top navigation pull downs are not an out of the box feature, just tabs are standard.  You will also notice that we indicate which tab has a pull down by the standard triangle icon menudark[1] .  The items are highlighted all based on SharePoint standard CSS so that when you change themes the tabs and pull downs follow.  I also added the feature that allows you to have a description pop up when you hover over a link.  All of these features are standard in MOSS.

Here is what the before and after view looks like.

 BEFORE

image

AFTER

image

Now deploying this solution involved using SharePoint designer to edit the Master pages of each site I wanted the navigation to be added to.  I then would add three lines of code.  Here is one lesson that I found quickly that affect the ease of implementation.  jQuery is a wonderful service that when implemented correctly works wonders, but when implemented incorrectly causes problems.  Nothing that can’t be fixed, but just involves extra steps.  Now I am guilty of causing these problems and it was interesting to see when I had implemented jQuery correcting, implementation of the global navigation was very easy, but when I implemented jQuery incorrectly it caused me to have extra steps.

What is a incorrect implementation of jQuery you may ask, well it is when you hard code a request for jQuery in a CEWP solution that causes problems.  Remember I am editing the Master Page and adding jQuery at this level.  All pages using this Master Page will load with jQuery and then all CEWP that use and have jQuery hard coded will have conflicts.  So what does that look like?  Here is hard coding the jQuery in a CEWP that will cause problems:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

Why does this cause problems?  Well when you have multiple instances of this code on the same page you will get in a conflict especially if they are different versions being called.

Now the correct way for any CEWP solution should be the way the Paul Grenier provides in his solutions.  It first checks to see if jQuery has been loaded and if it has it will not load another version.   Here is an example of his code.

<script type="text/javascript">
if(typeof jQuery=="undefined"){
    var jQPath="http://code.jquery.com/";
    document.write("<script src='",jQPath,"jquery-latest.js' type='text/javascript'><\/script>");
}
</script>

So how did I fix the sites that had this problem where the CEWP solutions had hard coded jQuery references.  Well I had to go into each CEWP that had it the wrong way and delete the reference to jQuery.  This was fine to do as I was loading jQuery in the Master Page so it will be available to the CEWP that was calling for it.

I will be going through my solutions that use jQuery to make sure that I am using Paul Grenier’s method so that my solutions do not cause this problem in the future.

Deploying this solution once implemented involved editing Master Pages on site collections where the global navigation was to be used.  In cases where the global navigation was deployed, but did not show up was a simple fix of editing the CEWP that had a reference to jQuery.

In my next article I will go into depth about implementing my global navigation newest version 2.0.

Version 2.0 Global Navigation Features

In implementing and deploying this on my site I have had time to reflect on what features were missing from MOSS and my current 1.0 version and looked at how to add these to mirror a similar experience.  As a result version 2.0 will have the following features added:

  • Pull Down icon menudark[1] will only appear on those that you indicate have a pull down.  So now you can have a standard tab or a tab with pull down where the menudark[1] will show indicating there is more to view.
    • image
  • By adding comments in the notes section of the links, they will then become popups when you hover over a link.
    • image
  • New version only requires one list for the tabs and one list for all the pull downs.

I will also be coming out with a template version that will allow you to load this without having to create the lists and libraries needed.  You will only need to change the code in one place on the topnavigation.j file and add the three lines of code to the Master Page.  Below is an image of the template:

image

Next article on this matter should have the new version and the template.

expand Tab Page for SharePoint Version 2.05/7/2010
expand SharePoint - A Global Navigation Solution across Site Collections5/3/2010

Ever want to have an easier way to have a global navigation that spans across site collections?  SharePoint provides a solution for global navigation within a site collection and it works well.  But when you architect SharePoint to have multiple web apps and site collections you do not have any easy solution to create a global navigation system to span those repositories.  You would have to recreate your global navigation on each site collection.  And any changes to the global navigation would mean that you would have to go to each site collection to make the change…ouch!!!  There has got to be a better solution.

Thanks to Marc Anderson and Michael Greene who have created solutions that inspired me to explore solving this problem.  Marc Anderson created SPServices, which is a jQuery library for SharePoint Web Services.  I am beginning to understand the power of his solution.  Then Michael Greene created a solution, Application Wide Quick Launch Control, where you can change or append the Quick Launch on SharePoint sites.  Michael’s solution used Marc’s SPServices and jQuery.

Based on what these two have done, I then looked into how we could apply this to the Top Navigation found in SharePoint.

 

My goal was to do the following:

  1. Be able to add a tab at the beginning or end of the Top Navigation bar.
  2. Create a pull down to maximize space.
    • Ever see a top nav bar with too many tabs, ouch.
  3. Pull down items are pulled from a standard SP Links list.
    • Imagine being able to add an item to a list and it is then apart of the top navigation across site collections, yes!
    • WSS does not give us the ability to have a pull down, lets change that.
  4. Ability to order and group pull down items.
    • Organization is critical to ease of use.
  5. Grouping Headers can be links or not.
  6. Navigation tab and pull down changes with site theme.
  7. Tabs can be links or not.

What is the end product going to look like, well, something like this.  Where we have added a tab called “Services” with a pull down that is grouped.  This is a WSS site, where this is not possible out of the box.

 

And we are pulling this from a list.  Take a look at the TopNav links list below.  You can see the grouping and ordering is working as well.

 

Now lets walk through what we have to do to get the above results.

Components needed:

  1. SharePoint Resource Site
  2. SPServices by Marc Anderson
  3. jQuery
  4. SharePoint Designer to edit Master Pages
  5. SharePoint Links List
  6. Solution Code

1) SharePoint Resource Site

I recommend that if you do not already have a site collection devoted to scripts and lists that will be accessible by all, that you create one.  This site collection will allow you to have document library where you can house your scripts like jQuery and SPServices.  It will also allow you to create lists as needed for example the one we will create to manage the pull down items in our tab.

So there should be a site collection where we house the below files and list and that has permissions set to all authenticated members as read only. For purposes of this article I will call this site collection Resources. I wrote an article along these lines and here it is: http://www.bitsofsharepoint.com/BlogPoint/Lists/Posts/Post.aspx?ID=29

2) SPServices by Marc Anderson

We need to download the SPServices file that Marc Anderson has put together.  You can find it here: http://spservices.codeplex.com/ This file will be used by the script for this solution, so this will need to be added to the document library where you keep scripts.  In my case it would go into the document library in my Resources site collection.

Recommendation is to change the name of the file name so that it does not have a version number and should look like this, “jquery.SPServices-latest.min.js”.  This will allow you to update in the future to Marc’s latest version without having to go back to each master page and change to the new version name.

3) jQuery

There are two ways to work with a jQuery file.  You have a choice of downloading the latest version and putting it in scripts document library or you can point to Google's version which will always be the latest version.  This is a choice that you will make.   You can download jQuery from here: http://jquery.com/

I would then add this script to me document library in my Resources site collection.

4) SharePoint Designer to edit Master Pages

You will need to have access to SharePoint Designer and be able to edit the Master Pages on the sites you want the global navigation tab to show up on.  When you edit a master page you will want to add the following code between the <header></header> tags as diagramed below. 

 

Here is the code you will need to add to each master page.  Make sure that the URL’s point to where you have the files housed.  They do need to be absolute URL’s, as you will be adding this code across site collections, web apps and even servers.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://yoursite/SiteCollection/LibraryName/jquery.SPServices-latest.min.js"></script>
<script type="text/javascript" src="http://yoursite/SiteCollection/LibraryName/topnavigation.js"></script>

For example if I put “jquery-latest.js”, “jquery.SPServices-latest.min.js”, and “topnavigation.js” in my Resoures site collection in the document library called ScriptsLibrary, then it would look like this:

<script type="text/javascript" src="http://www.bitsofsharepoint.com/Resources/ScriptsLibrary/jquery-latest.js"></script>
<script type="text/javascript" src="http://www.bitsofsharepoint.com/Resources/ScriptsLibrary/jquery.SPServices-latest.min.js"></script>
<script type="text/javascript" src="http://www.bitsofsharepoint.com/Resources/ScriptsLibrary/topnavigation.js"></script>

5) SharePoint Links List

Now to create the ease of updating and managing the content in the pull down for the tab, we will need to have a list where the solution can pull the links from.  But we also need to create some organization and groupings. So will will create a links list and add some additional columns.

In my Resources site collection I will create a list called TopNav, you are free to name it what you like.  This TopNav list will be a Links list.  Once created we need to add a couple of other columns:

  • Group – This column will be used to group the links together.  So all “Help” links will be together and all “Features” links will be together. 
    • This is a text field or it can be a choice field if you know all the groups.  
  • LinkType – This column will be used to identify what type of link it is.
    • This is a Choice column. 
    • We have three choice types and each will cause the pull down to display the link in different way:
      • Link – This will display the item as a link within the group.
      • Header – This will display the item as a header without a link.
      • Header Link – This will display the item as a header with a link.
        • (Header and Header Link look them same, but act differently)

Next you will want to change the default All Links view to the following:

  • Sort – Change the following:
    • All users to order items in this view, set to “No”.
    • Sort by “LinkType” in “ascending order”.
    • And Sort by “URL” in “ascending order”.
  • Group By – Change the following:
    • Group by to “Group” in “ascending order”.
    • Show grouping as “Expanded”.

This new view will be the way the items show in the pull down for the global navigation.  So you can play with the view here to sort and group it as you wish.

Here is an example of what it should look like once you have several links listed.

 

Almost there……yeah.

6) Solution Code

Ok, now for the code that will make this all work together.  There is a file called topnavigation.js that we will need to be created and edited to make it work in your environment. 

In my case it would go into the document library in my Resources site collection.

To make this script work you will need to provide several pieces of data which are listed out below.

  1. [tabSide] - Specify either 'append' or 'prepend'. This will indicated if the new tab will go before or after the default tabs.
    • Tab front Example: 'prepend'
    • Tab End Example: 'append'
  2. [titleTabName] - Specify a name for the tab, this will be displayed in the tab.
    • Tab Name Example: 'Intranet'
  3. [urlTab] - Specify a link only if you want the tab to be clickable, otherwise leave blank with two quotes, ''.
  4. [listName] - Specify the name of the list for the pull down.
    • List Name Example: 'Links'
  5. [listSiteUrl] - Specify the url of the site where the list is located. URL needs to be of the site location NOT of the list location.

All above variables will then be constructed as follows, make sure that each field has a ' at the beginning and end of each.

You can have multiple extendTabs like so:

    extendedTabs('append','Projects','','Projects','http://www.bitsofsharepoint.com/ConsultingPoint/ClientPoint/snc/');
    extendedTabs('append','Team Sites II','http://www.google.com','Team Sites','http://www.bitsofsharepoint.com/ConsultingPoint/ClientPoint/snc/');
    extendedTabs('prepend','Intranet II','http://www.bitsofsharepoint.com/ConsultingPoint/ClientPoint/snc/default.aspx','Links','http://www.bitsofsharepoint.com/ConsultingPoint/ClientPoint/snc/');

    There will be three tabs added, with one added the to the front and two added to the back.

    Placement of your extendedTabs will dictate the order the tabs are displayed.

    Here is the code to add to the topnavigation.js file or you can download the topnavigation.js file from here: http://www.bitsofsharepoint.com/ExamplePoint/CodeExamples/topnavigation.js

    $(document).ready(function(){
    /*
    Extended Tabs by Peter Allen
    Version 1.0 5/3/2010
    Purpose: Add a tabs to the beginning (prepend) or end (append) of the default SharePoint Top Navigation tabs.
    Script Setup: To make this script work you will need to provide several pieces of data which are listed out below.

    [tabSide] - Specify either 'append' or 'prepend'. This will indicated if the new tab will go before or after the default tabs.
                    Tab front Example: 'prepend'
                    Tab End Example: 'append'
    [titleTabName] - Specify a name for the tab, this be displayed in the tab.
                    Tab Name Example: 'Intranet'
    [urlTab] - Specify a link only if you want the tab to be clickable, otherwise leave blank with with two quotes, ''.
                    Link Example: 'http://www.google.com'
                    No Link Example: ''
    [listName] - Specify the name of the list for the pull down.
                    List Name Example: 'Links'
    [listSiteUrl] - Specify the url of the site where the list is located. URL needs to be of the site location NOT of the list location.
                    Incorrect Example: 'http://www.intranet.com/SiteName/List/ListName/'
                    Correct Example: 'http://www.intranet.com/SiteName/'

    All above variables will then be constructed as follows, make sure that each field has a ' at the begining and end of each.

    Construct:
        extendedTabs('[tabSide]','[titleTabName]','[urlTab]','[listName]','[listSiteURL]')
    Example:
        extendedTabs('append','Projects','http://www.sites.com/Projects/','Projects','http://www.site.com/Resources/');
    This example adds a tab called Projects at the end, tab links to the Project site, the list for the pull down is called Projects and the list resides in the Resources site.

    You can have multiple extendTabs like so:

        extendedTabs('append','Projects','','Projects','http://www.bitsofsharepoint.com/ConsultingPoint/ClientPoint/snc/');
        extendedTabs('append','Team Sites II','http://www.google.com','Team Sites','http://www.bitsofsharepoint.com/ConsultingPoint/ClientPoint/snc/');
        extendedTabs('prepend','Intranet II','http://www.bitsofsharepoint.com/ConsultingPoint/ClientPoint/snc/default.aspx','Links','http://www.bitsofsharepoint.com/ConsultingPoint/ClientPoint/snc/');

    Placement of your extendedTabs will dictate the order the tabs are displayed.

    */

    //    Place your extendedTabs below:

        extendedTabs('append','Projects','http://www.site.com/site/default.aspx','Projects','http://www.site.com/site/');
       

        var i = 1;
        function extendedTabs(tabSide,titleTabName,urlTab,listName,listSiteURL) {

            var titleTabID = 'zz1_TopNavigationMenun' + titleTabName.replace(/[-' ']/g,'');
            var showTabPD = titleTabID + 'Show';
            var showTabAppend = titleTabID + 'Append';

            if (urlTab != '') {
                var urlTabShow = 'href=' + urlTab;
            } else {
                var urlTabShow = '';
            }

                var tableRow = '<td id="' + titleTabID + '" onkeyup="Menu_Key(event)" onmouseout="Menu_Unhover(this)" onmouseover="Menu_HoverRoot(this)"><table  width="100%" cellspacing="0" cellpadding="0" border="0" class="ms-topnav zz1_TopNavigationMenu_4"><tbody><tr id="mouse"><td style="white-space: nowrap;"><a ' + urlTabShow + ' style="border-style: none; font-size: 1em;" class="zz1_TopNavigationMenu_1 ms-topnav zz1_TopNavigationMenu_3">'    + titleTabName + '</a><td valign="top" style="width:0pt;" ><img style="border-style:none; vertical-align:top;" alt="" src="/_layouts/images/menudark.gif"></td></tr></tbody></table><div style="position:absolute;height: 0px;z-index:1;"><div id="' + showTabPD + '" class="zz1_TopNavigationMenu_8" style="display:none;position:relative;top:0px; clip: rect(auto, auto, auto, auto);z-index:1;"><table cellspacing="0" cellpadding="0" border="0" style="top: 0px;" id="' + showTabAppend + '"></table></div></div></td>';
            if (tabSide == 'prepend') {
                $('table#zz1_TopNavigationMenu').children().children().prepend(tableRow);
            } else {
                $('table#zz1_TopNavigationMenu').children().children().append(tableRow);

            }

            $().SPServices({

                operation: "GetListItems",

                webURL: listSiteURL,

                listName: listName,

                completefunc: function (xData, Status) {

                    $(xData.responseXML).find("[nodeName='z:row']").each(function() {

                        var URLdataTN1 = $(this).attr("ows_URL").split(',');

                        var linksTN1 = $(this).attr("ows_LinkType");

                        if (linksTN1 == 'Header') {

                            $('#' + showTabAppend).append('<tr id="zz1_TopNavigationMenun' + i + '" onkeyup="Menu_Key(event)" onmouseout="Menu_Unhover(this)" onmouseover="Menu_HoverDynamic(this)"><td><table cellspacing="0" cellpadding="0" border="0" width="100%" class="ms-topNavFlyOuts zz1_TopNavigationMenu_7 ms-topNavFlyOutsHover"><tbody><tr><td style="white-space: nowrap; width: 100%;"><a style="border-style: none; font-size: 1em;" class="zz1_TopNavigationMenu_1 ms-topNavFlyOuts zz1_TopNavigationMenu_6 ms-topNavFlyOutsHover"><strong>' + URLdataTN1[1] + '</strong></a></td></tr></tbody></table></td></tr>');
                            i++;

                        } else if (linksTN1 == 'Header Link') {

                            $('#' + showTabAppend).append('<tr id="zz1_TopNavigationMenun' + i + '" onkeyup="Menu_Key(event)" onmouseout="Menu_Unhover(this)" onmouseover="Menu_HoverDynamic(this)"><td><table cellspacing="0" cellpadding="0" border="0" width="100%" class="ms-topNavFlyOuts zz1_TopNavigationMenu_7 ms-topNavFlyOutsHover"><tbody><tr><td style="white-space: nowrap; width: 100%;"><a style="border-style: none; font-size: 1em;" href="' + URLdataTN1[0] + '" class="zz1_TopNavigationMenu_1 ms-topNavFlyOuts zz1_TopNavigationMenu_6 ms-topNavFlyOutsHover"><strong>' + URLdataTN1[1] + '</strong></a></td></tr></tbody></table></td></tr>');

                            i++;

                        } else {

                            $('#' + showTabAppend).append('<tr id="zz1_TopNavigationMenun' + i + '" onkeyup="Menu_Key(event)" onmouseout="Menu_Unhover(this)" onmouseover="Menu_HoverDynamic(this)"><td><table cellspacing="0" cellpadding="0" border="0" width="100%" class="ms-topNavFlyOuts zz1_TopNavigationMenu_7"><tbody><tr><td style="white-space: nowrap; width: 100%;"><a style="border-style: none; font-size: 1em;" href="' + URLdataTN1[0] + '" class="zz1_TopNavigationMenu_1 ms-topNavFlyOuts zz1_TopNavigationMenu_6">' + URLdataTN1[1] + '</a></td></tr></tbody></table></td></tr>');
                            i++;

                        }

                    });

                }

            });

            $('#' + titleTabID).mouseover(function(){

                $('#' + showTabPD).show();

            });
            $('#' + titleTabID).mouseleave(function(){

                $('#' + showTabPD).hide();

            });

        }

    });

    OK, now lets pull this all together.

    1. Document Library where the following is housed:
      • jquery-latest.js
      • jquery.SPServices-latest.min.js
      • topnavigation.js”
    2. A links list created called TopNav
      1. Added columns:
        1. Group
        2. LinkType
      2. Changed All Links View
    3. Modified topnavigation.js file as outlined.
      1. Add a extendedTab call.
    4. Edited masters pages with SharePoint Designer to add the three lines of code.

    You should now be seeing something like this.

     

     

    Here is a working example: http://www.bitsofsharepoint.com/ExamplePoint/Navigation/default.aspx

    Hope this helps.

    expand Search Lists and Document Libraries by Metadata4/28/2010
    expand SharePoint Information Architecture with MindManager by MindJet4/15/2010

    Mind mapping works so well for creating high level and detailed designs of your SharePoint Information Architecture or taxonomy.  I have been using MindManager for the last 5 years and found it to be a wonderful tool to communicate information in a clear graphical view.  A SharePoint Information Architecture or taxonomy cries out for this kind of view. 

    I spoke at the Sacramento SharePoint Users Group on the subject of using MindManager from MindJet to help outline and communicate a SharePoint site design and taxonomy.  In working with various clients I have developed a template that I use to outline an Information Architecture design to meet their requirements. 

    When I develop these designs with clients I focus on two types of maps.  First I focus on a high level map then I proceed to a more detailed map that gets into the actual settings.  When developing these maps I will focus on several key aspects:

    • Access or Permissions or Authentication: This is one of the critical areas that can dictate a lot about the site design.
      • Key aspect: Don’t break permission in your design.  As your site grows broken permission will cause great hardship to maintain and with user experience.
    • Content: Understanding the following will help you to organize your site design.
      • Use of the content Projects, quick collaboration, department collaboration, repeatable development, reporting, records management, etc.
      • Trusted or in development:  Many implementations mix trusted and in development content with each other making finding the right information very difficult and frustrating for end users.
    • Purpose:  Internal use or will clients need access, department specific or cross department needs, etc.
    • Volume: How much content and how much traffic is expected.  This will help determine if a separate Web App is required.
    • Data Criticality: How critical is that data being up 99.9% of the time.  This can also determine if a separate Web App is required.

    This information will really help to shape how the Information Architecture and taxonomy should be laid out.  Here is an example of a high level site design.  I find it to be one of the best ways to have a meaningful discussion about how content will be used in the organization.  

    Company Site Structure

    Example: ABC Site Structure – PDF Format

    Once this is created and agreed upon we can then proceed to the detailed design, which gets into the nuts and bolts of implementing the overall plan. 

    I have designed a template that makes it easy to drag an drop sites, libraries, lists, site columns and site content types in to build out your site design.  I have even included Web Apps so that you can also identify the Web Apps that need to be created and the site collections that will reside in them.

    ABC Site Structure

    Example: Company Site Structure – PDF Format

    Here is a closer look at the details found within a Web App and Site Collection.  Each item that has a + will expand to show the details or settings for each one.

    ABC Site Structure

    With the MindManager software I am able to take complex maps and drill down to just the content that I need to look at.  For example I can filter the map to just show document libraries.  This will then allow me to only show the document libraries throughout the site and the settings associated with those libraries.  So if the policy changed to versioning copies going from 10 to 5 I can easily change it by filtering it down to document libraries and then the setting for each document library.

    Based on my workings with clients I have come up with a template that I use to build out the detail diagram for implement SharePoint site design and taxonomy.  Currently they are broken down to four major areas.

    • Web App and Sites – You can add a web app along with a site or you can copy the site and add it to an existing web app.
    • List and Libraries – Select a Document Library or a List to add to your site collection or sub site.
    • Content Types – Select to a Content Type to add to a site collection or site.  I recommend in the list and libraries to just reference a content type and not document it at the list level.
    • Columns – Select a column to add a column at the site collection level or the list or library level.

    SharePoint Site Structure Parts II

    When you expand the above you can see that you get a lot granularity with designing your SharePoint deployment.  When this is all completed you can easily had this off to someone else to implement and they will know exactly what to do for each and every site and list.

    SharePoint Site Structure Parts

    Example: SharePoint Site Structure Parts – PDF Format

    Template: SharePoint Site Structure Parts Template – MindManager Map Format

    Other benefits of the MindManager is that not everyone has to have the software to be able to review and discuss the detailed maps.  MindManager has an expansive export capability.  When you get into complex maps, as this one, you will use one of the many export methods to collaborate with.  I can tell you Export as Mindjet Player is the best export for complex maps and gives all involved an easy way to explore the map.  The Export as Mindjet Player produces a PDF that anyone with a viewer can see and interact with.  Yes, that is correct, you can expand and collapse just like you were in MindManager.  Here is an example that you can interact with. Example: ABC Site Structure

    In conclusion, this tool, MindManager by MindJet, allows you to create very complex Information Architected sites and taxonomy maps for SharePoint deployment that make it much easier to understand what is be designed and much easier to document and implement.

    Here is all of the documentation:

    1. SharePoint Site Structure Parts Template – MindManager Map Format
    2. SharePoint Site Structure Parts – PDF Format
    3. Company Site Structure Example – PDF Format
    4. ABC Site Structure Example – PDF Format
    5. MindManager by MindJet - Software

    Hope this helps,

    Peter

    expand SharePoint Themes – More than Pretty Colors – Information Architecture4/12/2010
    expand Site Owners – Display and Manage3/22/2010

    One of the challenges I have with SharePoint is knowing who the site owner is for any given site or sub-site.  Ownership is a critical component of any deployment.  But ownership should be clearly communicated and maintained. 

    When I work on a deployment one area that I work on with the organization is to identify who the site owners are.  Once this is identified we need to communicate this on the site.  But if we rely on each owner to identify this on their site we will have different implementations of this, inconsistency for the end-user to follow and a decentralized setup.  Also, there would be no easy way to see who all the site owners are and it would be a lot of work to go to each site to take note.  Also, I always recommend that site owners create a club (this sounds so much more fun and less formal then a committee) that can meet on a monthly basis to talk best practices and share experiences and solutions. 

    Since SharePoint does not have any easy way to identify the site owner and provide a central location to track all this, I have come up with a solution.  Below you will find my solution to the problem.

    The solution involves a content editor web part (CEWP), a centralized list with a couple of views and a document library.  The CEWP will be placed in every site collection and sub site.  The CEWP will point to a script that will show the correct site owner based on the site URL.  The list will house a list of all owners and the sites they own.  The document library will house the script used.

    Here is an overview of how it will work.  By having the CEWP pulling both the script and list from a central place, you get the benefit of being able to change the ownership from a central place and if you want to customize the script you can do this too and it will be populated to all sites.

    image

    The result will look like this.  You can then outline who the site owner is and even adding listing like helpdesk, designer or admin.  These all can be added at any time.

    image

    The final result would look something like this:

    image

    Here is a link to the details on how to add this to your SharePoint deployment.

    http://www.bitsofsharepoint.com/ExamplePoint/Site/SiteOwner.aspx

    Hope this helps,

    Peter

    expand SharePoint: ToolTip 2.0 (Posted on EndUserSharePoint.com)3/21/2010
    expand jQuery – List and Document Library Filter Version 2.212/29/2009
    Thee is an updated version to the List Filter solution that fixes a bug that some were having with regards displaying of the interface.  For some reason a version of SharePoint 2007 would erase the style information at the beginning of the solution.  If the style info is place anywhere at the middle or end then it is will not be erased. 
     
    This is a minor update which fixes this issue.
     
     
    Hope this helps.
     
    Peter
    expand SharePoint CEWP Solution Interface – Part II12/22/2009
    expand SharePoint CEWP Solution Interface – Introduction12/9/2009
    I have a new series coming out on a new approach for Content Editor Web Part (CEWP) solution developers that addresses the issue where implementations require the end user to modify code to make it work.  You know change variables to make the solution work.
     
    Most end users do not know code, it is a foreign language to them.  They just want a solution that is easy to implement.  I have been working on a concept of how us who create these CEWP solutions can make the solution a code free experience for the end user.
     
    To read more about my solution please go to EndUserSharePoint to read the first of a series of articles.
     
    expand jQuery – List and Document Library Filter Version 2.1 - Released11/13/2009
    expand jQuery – List and Document Library Filter Version 2.0 – Part 211/11/2009
    Just posted an update to the List and Library Document Library Filter solution.  Checkout the article at endusersharepoint.com: http://www.endusersharepoint.com/2009/11/11/jquery-–-list-and-document-library-filter-version-2-0-part-2/
     

    Here is what has been improved in version 2.0:

    • Speed Improvements – Improved the speed to display the results by 4x for large lists.
    • Grouped Lists – Added a solution to better able grouped list filtering.
    • Add Comments – You can easily add comments to the filter box for the end-user.
    • Filter Box Position – You can now easily position the filter box to the left, center or right on the page.
    • New Options Interface – The new options interface makes it so that any of the above customizations can be done code free.
     
     
    Hope this helps,
     
    Peter 
    expand What's next? List Filter, Search and CEWP Options Interface11/10/2009
    expand jQuery - List and Document Library Filtering Solution10/20/2009
    Search has not been easy with SharePoint 2007 and especially with WSS 3.0.  For example many times I just want to search the list or document library I am on.  What I want is ability to see what items match what I looking for specifically with the list that is showing right now.  I would like to search, and not have to refresh the page or have to go to another location to do the search.
     
    But this is really not searching as we are not necessarily looking at all the items in a list, just the items that are showing.  This is really filtering.  My initial post called it Searching, but it is really filtering.
     
    I have been developing another site with SharePoint WSS 3.0 and needed to have such a solution.  The site www.mobilesitezone.net (this is designed for smartphones) is very customized SharePoint site, I then adapted the search/filtering created for it to work with any SharePoint List or Document Library.
     
    What was created was a jQuery filtering solution that only looked at the list on the page and filtered the results based on the search criteria.  It will filter all the fields that are shown on the site and then show you the rows that have any matches.
     
    Here is an example where this a large list of over 400 items and then a search is made for "google" which then displays just the results.
     
    List
     
    Results
     
    I have put together an example page where you can test this out and get the Web Part or Code for CEWP to add this to your site.
     
     
    UPDATE 10/21/09 8:30 AM PST:  Changed this from search solution to a filter solution.  This better represents that actions taking place.
     
    UPDATE 10/20/09 4:30 PM PST:  Added functionality so that enter will submit search.
     
    Hope you enjoy,
     
    Peter
    1 - 20 Next

     E x a m p l e P o i n t - Related Examples - Basic

    Status/Progress Bar
    <div>This example shows how a progress bar can be created from several fields in a list using javascript and calculated column,</div> 
    Documents Grouped by
    <div>This example shows how using columns/metadata provides a more meaning fully way to viewing documents.</div> 
    Meeting Minutes - Blog
    <div>Here is a different way to keep meeting minutes by using a Blog.  Click for instructions on how to setup a Meeting Minutes Blog.</div> 
    Calendar - With mouseover Preview Pane
    <div>This example shows how using JQuery code from Paul Grenier, http://www.endusersharepoint.com/?p=1223, you can create a preview pain to see all the details without having to click on the calendar item</div> 
    Print Clean Pages and Lists
    <div>Here are tricks to prinitng a clean page or to be able to print a list from a page.</div> 
    Meeting Minutes - Blog - Advance
    <div>Here is a different way to keep meeting minutes by using a Blog.  Click for instructions on how to setup a Meeting Minutes Blog. This example provide solutions that use JQuery and Designer.</div> 
    Tool Tip for Quick Launch and other Link Lists
    <div>This example shows how you can add a tool tip to the Quick Launch links or to any links.</div> 
    List - View a List on any other site
    <div>Here is a great way with JQuery to view a list on any other site.  OOB this cannot be done with SharePoint, but now you can with this script.</div> 
    Pop-up for Lists - Basic
    <div>This is a great JQuery solution that adds a pop-up for any list when you mouse over the title of the item.</div> 
    List - Collapse/Expand Text Field
    <div>Here is a great JQuery solution that will take any text field and collapse it so that it will not take up the whole view.  Then click to expand and read the text.  Wonderful!</div> 
    Pop-up List/Document Library/Calendar - Customize - Advance
    <div>Here I outline how you can customize Paul Grenier&#39;s LoadTip script.</div> 
    Images - SharePoint /_layout/images/ Full List
    <div>Here is a list of all the images found in SharePoint /_layout/images/ directory.</div> 
    Wiki Customization
    <div>Here is a way to customize your Wiki to have a look and feel on each Wiki page.</div> 
    Tab Page
    <div>Add a page with tab functionality that has a web part associated to each one.</div> 
    List and Document Library Filter
    <div>Here is a simple solution to add filtering for any list or document library.  Filter what is showing to find just the info you need.</div> 
    CEWP Solution Interface
    <div>This solution is for coders creating CEWP solutions.  This provides an easy interface for end users to input variables.</div> 
    Site Owner
    <div>Create a central place to manage who the site owners are and be able to diplay them on each site.</div> 
    List and Document Library Search
    <div>This solution provides a way to search a list by metadata and show any items that contain the search parameters.</div> 
    Navigation - Global Navigation Across Site Collections v 1.0
    <div>Here is a global navigation solution across site collections.</div> 
    Navigation - Global Navigation Across Site Collections v 2.0
    <div> <br> <br>Here is a global navigation solution across site collections. <br> <br> <br> <br></div> 
    Wiki View Solution
    <div class=ExternalClass9230D79D7E7C406EBCC849EE3F318483> <div>This solution provides a new way to view and access your wiki.</div></div> 

    Examples Topic: Document LibraryTop
    Status/Progress Bar
    <div>This example shows how a progress bar can be created from several fields in a list using javascript and calculated column,</div> 
    Documents Grouped by
    <div>This example shows how using columns/metadata provides a more meaning fully way to viewing documents.</div> 
    Meeting Minutes - Blog
    <div>Here is a different way to keep meeting minutes by using a Blog.  Click for instructions on how to setup a Meeting Minutes Blog.</div> 
    Calendar - With mouseover Preview Pane
    <div>This example shows how using JQuery code from Paul Grenier, http://www.endusersharepoint.com/?p=1223, you can create a preview pain to see all the details without having to click on the calendar item</div> 
    Print Clean Pages and Lists
    <div>Here are tricks to prinitng a clean page or to be able to print a list from a page.</div> 
    Meeting Minutes - Blog - Advance
    <div>Here is a different way to keep meeting minutes by using a Blog.  Click for instructions on how to setup a Meeting Minutes Blog. This example provide solutions that use JQuery and Designer.</div> 
    Tool Tip for Quick Launch and other Link Lists
    <div>This example shows how you can add a tool tip to the Quick Launch links or to any links.</div> 
    List - View a List on any other site
    <div>Here is a great way with JQuery to view a list on any other site.  OOB this cannot be done with SharePoint, but now you can with this script.</div> 
    Pop-up for Lists - Basic
    <div>This is a great JQuery solution that adds a pop-up for any list when you mouse over the title of the item.</div> 
    List - Collapse/Expand Text Field
    <div>Here is a great JQuery solution that will take any text field and collapse it so that it will not take up the whole view.  Then click to expand and read the text.  Wonderful!</div> 
    Pop-up List/Document Library/Calendar - Customize - Advance
    <div>Here I outline how you can customize Paul Grenier&#39;s LoadTip script.</div> 
    Images - SharePoint /_layout/images/ Full List
    <div>Here is a list of all the images found in SharePoint /_layout/images/ directory.</div> 
    Wiki Customization
    <div>Here is a way to customize your Wiki to have a look and feel on each Wiki page.</div> 
    Tab Page
    <div>Add a page with tab functionality that has a web part associated to each one.</div> 
    List and Document Library Filter
    <div>Here is a simple solution to add filtering for any list or document library.  Filter what is showing to find just the info you need.</div> 
    CEWP Solution Interface
    <div>This solution is for coders creating CEWP solutions.  This provides an easy interface for end users to input variables.</div> 
    Site Owner
    <div>Create a central place to manage who the site owners are and be able to diplay them on each site.</div> 
    List and Document Library Search
    <div>This solution provides a way to search a list by metadata and show any items that contain the search parameters.</div> 
    Navigation - Global Navigation Across Site Collections v 1.0
    <div>Here is a global navigation solution across site collections.</div> 
    Navigation - Global Navigation Across Site Collections v 2.0
    <div> <br> <br>Here is a global navigation solution across site collections. <br> <br> <br> <br></div> 
    Wiki View Solution
    <div class=ExternalClass9230D79D7E7C406EBCC849EE3F318483> <div>This solution provides a new way to view and access your wiki.</div></div> 

    Blog Posts Topic: Document LibraryTop
    expand SharePoint Book - Global Navigation Solution 20102/26/2012
    expand SharePoint 2007 - Wiki View Solution8/17/2011

    I am not thrilled with the OOB wiki that SharePoint provides.  So I created a Wiki solution that can be put on any page within the site that provides a better view of the wiki with a nice navigation menu to the left.

    Here is a screen shot of the solution.

    wikiview.png

    Here is a link to the Wiki Web Part that you can add to any page on the site that has the wiki.

    Download the Web Part Here.

    After you add this you will need to change several things:

    1. The link to ​jQuery is to Google, you may want to change that to a local copy.
    2. The link to SPServices needs to be changed to a location on your SP site.
    3. Next you will need to change the "wikiListName" to the name of your wiki.
      • Code: var wikiListName = 'Wiki';
      • Change what is in quotes to the name of your wiki.
    4. Last you will need to change the "startPageName" to the page you want to display first.  You will only need to put the name of the file, no need for extentions.
      • Code: var startPageName = 'Home';
      • Change what is in quotes to the name of the file you want to show first.

    It should be work once this is all completed.

    View a working example here.

    Hope this helps.

    Here is the 2010 version.

    Below is the code:

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="http://www.bitsofsharepoint2010.com/SiteAssets/jquery.SPServices-0.6.2.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
     var wikiListName = 'Wiki View';
        var startPageName = 'Home';
     var thisSite =$().SPServices.SPGetCurrentSite();
     var wikiSite =  thisSite + '/' + wikiListName + '/' + startPageName + '.aspx';
     var root = location.protocol + '//' + location.host;
     var startSite = wikiSite.replace(root, '').replace(' ', '%20');
     
     $().SPServices({
    operation: "GetListItems",
    async: false,
    listName: wikiListName,
    completefunc: function (xData, Status) {
       $(xData.responseXML).find("[nodeName='z:row']").each(function() {
        //alert(xData.responseXML.xml);
        var fileName = $(this).attr("ows_LinkFilename").replace('.aspx', '');
        var URL = $(this).attr("ows_FileRef").split('#');
        var infoURL = URL[1].replace(/\s+/g, '%20');
        var listHtml = '<a href="#" info="/' + infoURL + '" class="wikiLinks">' + fileName + '</a><br/>';
        $("#wikiList").append(listHtml);
       });
      }
     });
     $('#wikiContent').load(startSite + ' .ms-wikicontent', function() {
      
      modifiedInfo(startSite);
      
      addWikiPage();
      wikiURL();
      
      wikiClick();
     });
     
     
     $('.wikiLinks').click(function(){
      
      var siteURL = $(this).attr('info');
      
      //alert(siteURL);
      
      $('#wikiContent').load(siteURL + ' .ms-wikicontent', function() {
       
       modifiedInfo(siteURL);
       
       addWikiPage();
       
       wikiURL();
       wikiClick();
      });
     });
     
     
     function wikiClick() {
      
      $('.ms-wikilink').click(function(){
       
       var mssiteURL = $(this).attr('info');
       
       //alert(mssiteURL);
       
       $('#wikiContent').load(mssiteURL + ' .ms-wikicontent', function() {
        
        modifiedInfo(mssiteURL);
        
        addWikiPage();
        
        wikiURL();
        
        wikiClick();
       });
      });
     }
     
     function wikiURL() { 
      $('.ms-wikilink').each(function(){
       var hrefSite = $(this).attr('href');
       $(this).attr('info', hrefSite);
       $(this).attr('href', '#');
      });
     }

     function modifiedInfo(pageURLM) {
      $('.infoWiki').remove();
      $().SPServices({
       operation: "GetListItems",
       async: false,
       listName: wikiListName,
       completefunc: function (xData, Status) {
        $(xData.responseXML).find("[nodeName='z:row']").each(function() {
         //alert(xData.responseXML.xml);
                                            var pageID = $(this).attr("ows_ID");
         var URLM = $(this).attr("ows_FileRef").split('#');
                                            var wikiEditPage =  thisSite + '/' + wikiListName + '/Forms/EditForm.aspx?ID=' + pageID;
         var infoURLM = "/" + URLM[1].replace(/\s+/g, '%20');
         var fileNameA = $(this).attr("ows_LinkFilename").replace('.aspx', '');
         var infoModified = $(this).attr("ows_Modified");
         var infoEditor = $(this).attr("ows_Editor").split('#');
         var listHtmlB = '<a class="edit-wiki-page infoWiki" href="' + wikiEditPage  + '">Edit this Content</a>';
         var listHtmlA = '<div class="infoWiki">Last Modified ' + infoModified + ' by ' + infoEditor[1] + '</div><br/>';
         
         if ( pageURLM == infoURLM) {
          
          $("#wikiModificated").append(listHtmlA);
          $("#wikiEditContent").append(listHtmlB);
         }
        });
        
       }
      });
     }
     
     function addWikiPage() {
      $().SPServices({
       operation: "GetList",
       listName: wikiListName,
       async: false,
       completefunc: function (xData, Status) {
        //alert(xData.responseXML.xml);
        id = $(xData.responseXML).find("List").attr("ID");
        var urlEdit = thisSite + '/_layouts/CreateWebPage.aspx?List=' + id + '&RootFolder=';
        //alert(urlEdit);
        //alert(id);
        $('#wikiPagAdd').append('<a href="' + urlEdit + '" class="edit-wiki-page infoWiki">Add a Page</a>')
        
        
        
       }
      });
     }
     
     

     
    });
    </script>
    <script type="text/javascript">

    function open(siteURL) {
     var options = {
      url: siteURL,
      title: "Add New Wiki Page",
      allowMaximize: true,
      showClose: true,
      dialogReturnValueCallback: silentCallback};
     SP.UI.ModalDialog.showModalDialog(options);}
    function silentCallback(dialogResult, returnValue) {
    }
    function refreshCallback(dialogResult, returnValue) {
     SP.UI.Notify.addNotification('Operation Successful!');
     SP.UI.ModalDialog.RefreshPage(SP.UI.DialogResult.OK);
    }
    </script>
    <table style="width: 100%">
    <tr><td valign="top" class="leftWiki"><br/><div id="wikiList" class="nav-wiki-page"></div></td>
    <td valign="top"><br/><div id="wikiPagAdd"></div><div id="wikiEditContent"></div><div id="wikiContent"></div><div id="wikiModificated"></div></td>
    </tr>
    </table>
    <style>
    .leftWiki {
    }
    .infoWiki {
     font-weight: bold;
    }
    .edit-wiki-page {
     display: block;
     font-size: 11px;
     border:2px solid #eeeeee;
     background-color:#ffffff;
     color:#666666;
     float: right;
     text-align: center;
     padding:8px 12px;
     width:115px;
     font-weight: normal;
    }
    .nav-wiki-page {
     display: block;
     font-size: 11px;
     border:2px solid #eeeeee;
     background-color:#ffffff;
     color:#666666;
     text-align: left;
     padding:8px 12px;
     font-weight: bold;
     white-space:nowrap;
    }
    </style>

    expand SharePoint - Global Navigation 2010 Solution In Progress9/23/2010
    expand SharePoint – A Global Navigation Solution Across Site Collections – Permissions7/1/2010

    I have deployed this solution with several clients and in doing so I have added some functionality.  One of those areas is Permissions.  If you have not read my previous posts on this topic please check them out:

    Permission can be added to version 1.0 or 2.0 and there is no different in how it is implemented.  Actually it is very simple since we will use out of the box features to accomplish this.  We will have the ability to apply permissions to a Tab and/or to a pull down item.

    To apply permissions so that a tab or pull down item is only viewable to a specific audience we will use SharePoint’s feature of specify permissions at the item level.  Now this is know in the SharePoint community as not a best practice, but I believe in this case it an exception to the rule that works well for its purpose.  I preach to my clients not break permissions and not to break them at the item level, so when I tell them that we have to do this for this solution they say to me, but you told us not to do that.  There are exceptions to every rule and here is one.

    Implementing this solution is simple.  For each tab or pull down item you will change the Manage Permissions settings to Edit Permission.  At this point you can now add and delete groups that should have access to this item.  (Caution:  Do not delete the group that gives you permission to edit the item.  If you do then you will have to ask the Admin to add you back to edit the item.  I know form experience.)

    Here is a step by on how to do this.

    Step 1

    Select the item to apply permissions to and select Manage Permissions.

    image

    Step 2

    Next you will then break the inheritance of permissions by selecting Actions and then Edit Permissions.

    image

    Step 3

    You will get a warning that you are breaking permissions.  You will select Yes to this warning.

    image

    Step 4

    Next you will select New so that you can add the groups or people that need to have access.

    image

    Step 5

    Add the groups or people that should have access and set the user permission to read only.  Next

    image

    That is it and now the tab or pull down will only show up if the person has permissions to view it.

    Depending on how SharePoint permissions are setup in your environment this this can be easy or be complicated.  What do I mean by this?  Well an environment that uses Active Directory groups will have a much easier time with this then an environment that directly adds users to the three standard permissions groups for a site.  Since this solution does not pull permissions based on the location of the link in the pull down, you have to maintain permissions on your site as well as here.  IF you do this through AD groups then it is much easier as you add the same AD groups to the item and you will only need to update the AD group to change who can see the item.

    Hope this helps.

    expand SharePoint - A Global Navigation Solution across Site Collections – Version 2.0 Solution5/15/2010
    expand SharePoint – A Global Navigation Solution Across Site Collections – Version 2.0 Primer and Deployment5/12/2010

    This article is going to recount my experience of adding my global navigation to my current site and highlight my next version of the global navigation solution that is a template and should make it much easier to implement, deploy and use.  If you have not read my first article SharePoint – A Global Navigation Solution Across Site Collections, please read that first.

    This article will be broken up into two sections:

    1. What were the results and process like to deploy this solution across sites.
    2. What new features have been added in version 2.0

    Implementation Process and Results

    Let’s first take a look at the results.  My site is a WSS 3.0 version so top navigation pull downs are not an out of the box feature, just tabs are standard.  You will also notice that we indicate which tab has a pull down by the standard triangle icon menudark[1] .  The items are highlighted all based on SharePoint standard CSS so that when you change themes the tabs and pull downs follow.  I also added the feature that allows you to have a description pop up when you hover over a link.  All of these features are standard in MOSS.

    Here is what the before and after view looks like.

     BEFORE

    image

    AFTER

    image

    Now deploying this solution involved using SharePoint designer to edit the Master pages of each site I wanted the navigation to be added to.  I then would add three lines of code.  Here is one lesson that I found quickly that affect the ease of implementation.  jQuery is a wonderful service that when implemented correctly works wonders, but when implemented incorrectly causes problems.  Nothing that can’t be fixed, but just involves extra steps.  Now I am guilty of causing these problems and it was interesting to see when I had implemented jQuery correcting, implementation of the global navigation was very easy, but when I implemented jQuery incorrectly it caused me to have extra steps.

    What is a incorrect implementation of jQuery you may ask, well it is when you hard code a request for jQuery in a CEWP solution that causes problems.  Remember I am editing the Master Page and adding jQuery at this level.  All pages using this Master Page will load with jQuery and then all CEWP that use and have jQuery hard coded will have conflicts.  So what does that look like?  Here is hard coding the jQuery in a CEWP that will cause problems:

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

    Why does this cause problems?  Well when you have multiple instances of this code on the same page you will get in a conflict especially if they are different versions being called.

    Now the correct way for any CEWP solution should be the way the Paul Grenier provides in his solutions.  It first checks to see if jQuery has been loaded and if it has it will not load another version.   Here is an example of his code.

    <script type="text/javascript">
    if(typeof jQuery=="undefined"){
        var jQPath="http://code.jquery.com/";
        document.write("<script src='",jQPath,"jquery-latest.js' type='text/javascript'><\/script>");
    }
    </script>

    So how did I fix the sites that had this problem where the CEWP solutions had hard coded jQuery references.  Well I had to go into each CEWP that had it the wrong way and delete the reference to jQuery.  This was fine to do as I was loading jQuery in the Master Page so it will be available to the CEWP that was calling for it.

    I will be going through my solutions that use jQuery to make sure that I am using Paul Grenier’s method so that my solutions do not cause this problem in the future.

    Deploying this solution once implemented involved editing Master Pages on site collections where the global navigation was to be used.  In cases where the global navigation was deployed, but did not show up was a simple fix of editing the CEWP that had a reference to jQuery.

    In my next article I will go into depth about implementing my global navigation newest version 2.0.

    Version 2.0 Global Navigation Features

    In implementing and deploying this on my site I have had time to reflect on what features were missing from MOSS and my current 1.0 version and looked at how to add these to mirror a similar experience.  As a result version 2.0 will have the following features added:

    • Pull Down icon menudark[1] will only appear on those that you indicate have a pull down.  So now you can have a standard tab or a tab with pull down where the menudark[1] will show indicating there is more to view.
      • image
    • By adding comments in the notes section of the links, they will then become popups when you hover over a link.
      • image
    • New version only requires one list for the tabs and one list for all the pull downs.

    I will also be coming out with a template version that will allow you to load this without having to create the lists and libraries needed.  You will only need to change the code in one place on the topnavigation.j file and add the three lines of code to the Master Page.  Below is an image of the template:

    image

    Next article on this matter should have the new version and the template.

    expand Tab Page for SharePoint Version 2.05/7/2010
    expand SharePoint - A Global Navigation Solution across Site Collections5/3/2010

    Ever want to have an easier way to have a global navigation that spans across site collections?  SharePoint provides a solution for global navigation within a site collection and it works well.  But when you architect SharePoint to have multiple web apps and site collections you do not have any easy solution to create a global navigation system to span those repositories.  You would have to recreate your global navigation on each site collection.  And any changes to the global navigation would mean that you would have to go to each site collection to make the change…ouch!!!  There has got to be a better solution.

    Thanks to Marc Anderson and Michael Greene who have created solutions that inspired me to explore solving this problem.  Marc Anderson created SPServices, which is a jQuery library for SharePoint Web Services.  I am beginning to understand the power of his solution.  Then Michael Greene created a solution, Application Wide Quick Launch Control, where you can change or append the Quick Launch on SharePoint sites.  Michael’s solution used Marc’s SPServices and jQuery.

    Based on what these two have done, I then looked into how we could apply this to the Top Navigation found in SharePoint.

     

    My goal was to do the following:

    1. Be able to add a tab at the beginning or end of the Top Navigation bar.
    2. Create a pull down to maximize space.
      • Ever see a top nav bar with too many tabs, ouch.
    3. Pull down items are pulled from a standard SP Links list.
      • Imagine being able to add an item to a list and it is then apart of the top navigation across site collections, yes!
      • WSS does not give us the ability to have a pull down, lets change that.
    4. Ability to order and group pull down items.
      • Organization is critical to ease of use.
    5. Grouping Headers can be links or not.
    6. Navigation tab and pull down changes with site theme.
    7. Tabs can be links or not.

    What is the end product going to look like, well, something like this.  Where we have added a tab called “Services” with a pull down that is grouped.  This is a WSS site, where this is not possible out of the box.

     

    And we are pulling this from a list.  Take a look at the TopNav links list below.  You can see the grouping and ordering is working as well.

     

    Now lets walk through what we have to do to get the above results.

    Components needed:

    1. SharePoint Resource Site
    2. SPServices by Marc Anderson
    3. jQuery
    4. SharePoint Designer to edit Master Pages
    5. SharePoint Links List
    6. Solution Code

    1) SharePoint Resource Site

    I recommend that if you do not already have a site collection devoted to scripts and lists that will be accessible by all, that you create one.  This site collection will allow you to have document library where you can house your scripts like jQuery and SPServices.  It will also allow you to create lists as needed for example the one we will create to manage the pull down items in our tab.

    So there should be a site collection where we house the below files and list and that has permissions set to all authenticated members as read only. For purposes of this article I will call this site collection Resources. I wrote an article along these lines and here it is: http://www.bitsofsharepoint.com/BlogPoint/Lists/Posts/Post.aspx?ID=29

    2) SPServices by Marc Anderson

    We need to download the SPServices file that Marc Anderson has put together.  You can find it here: http://spservices.codeplex.com/ This file will be used by the script for this solution, so this will need to be added to the document library where you keep scripts.  In my case it would go into the document library in my Resources site collection.

    Recommendation is to change the name of the file name so that it does not have a version number and should look like this, “jquery.SPServices-latest.min.js”.  This will allow you to update in the future to Marc’s latest version without having to go back to each master page and change to the new version name.

    3) jQuery

    There are two ways to work with a jQuery file.  You have a choice of downloading the latest version and putting it in scripts document library or you can point to Google's version which will always be the latest version.  This is a choice that you will make.   You can download jQuery from here: http://jquery.com/

    I would then add this script to me document library in my Resources site collection.

    4) SharePoint Designer to edit Master Pages

    You will need to have access to SharePoint Designer and be able to edit the Master Pages on the sites you want the global navigation tab to show up on.  When you edit a master page you will want to add the following code between the <header></header> tags as diagramed below. 

     

    Here is the code you will need to add to each master page.  Make sure that the URL’s point to where you have the files housed.  They do need to be absolute URL’s, as you will be adding this code across site collections, web apps and even servers.

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="http://yoursite/SiteCollection/LibraryName/jquery.SPServices-latest.min.js"></script>
    <script type="text/javascript" src="http://yoursite/SiteCollection/LibraryName/topnavigation.js"></script>

    For example if I put “jquery-latest.js”, “jquery.SPServices-latest.min.js”, and “topnavigation.js” in my Resoures site collection in the document library called ScriptsLibrary, then it would look like this:

    <script type="text/javascript" src="http://www.bitsofsharepoint.com/Resources/ScriptsLibrary/jquery-latest.js"></script>
    <script type="text/javascript" src="http://www.bitsofsharepoint.com/Resources/ScriptsLibrary/jquery.SPServices-latest.min.js"></script>
    <script type="text/javascript" src="http://www.bitsofsharepoint.com/Resources/ScriptsLibrary/topnavigation.js"></script>

    5) SharePoint Links List

    Now to create the ease of updating and managing the content in the pull down for the tab, we will need to have a list where the solution can pull the links from.  But we also need to create some organization and groupings. So will will create a links list and add some additional columns.

    In my Resources site collection I will create a list called TopNav, you are free to name it what you like.  This TopNav list will be a Links list.  Once created we need to add a couple of other columns:

    • Group – This column will be used to group the links together.  So all “Help” links will be together and all “Features” links will be together. 
      • This is a text field or it can be a choice field if you know all the groups.  
    • LinkType – This column will be used to identify what type of link it is.
      • This is a Choice column. 
      • We have three choice types and each will cause the pull down to display the link in different way:
        • Link – This will display the item as a link within the group.
        • Header – This will display the item as a header without a link.
        • Header Link – This will display the item as a header with a link.
          • (Header and Header Link look them same, but act differently)

    Next you will want to change the default All Links view to the following:

    • Sort – Change the following:
      • All users to order items in this view, set to “No”.
      • Sort by “LinkType” in “ascending order”.
      • And Sort by “URL” in “ascending order”.
    • Group By – Change the following:
      • Group by to “Group” in “ascending order”.
      • Show grouping as “Expanded”.

    This new view will be the way the items show in the pull down for the global navigation.  So you can play with the view here to sort and group it as you wish.

    Here is an example of what it should look like once you have several links listed.

     

    Almost there……yeah.

    6) Solution Code

    Ok, now for the code that will make this all work together.  There is a file called topnavigation.js that we will need to be created and edited to make it work in your environment. 

    In my case it would go into the document library in my Resources site collection.

    To make this script work you will need to provide several pieces of data which are listed out below.

    1. [tabSide] - Specify either 'append' or 'prepend'. This will indicated if the new tab will go before or after the default tabs.
      • Tab front Example: 'prepend'
      • Tab End Example: 'append'
    2. [titleTabName] - Specify a name for the tab, this will be displayed in the tab.
      • Tab Name Example: 'Intranet'
    3. [urlTab] - Specify a link only if you want the tab to be clickable, otherwise leave blank with two quotes, ''.
    4. [listName] - Specify the name of the list for the pull down.
      • List Name Example: 'Links'
    5. [listSiteUrl] - Specify the url of the site where the list is located. URL needs to be of the site location NOT of the list location.

    All above variables will then be constructed as follows, make sure that each field has a ' at the beginning and end of each.

    You can have multiple extendTabs like so:

        extendedTabs('append','Projects','','Projects','http://www.bitsofsharepoint.com/ConsultingPoint/ClientPoint/snc/');
        extendedTabs('append','Team Sites II','http://www.google.com','Team Sites','http://www.bitsofsharepoint.com/ConsultingPoint/ClientPoint/snc/');
        extendedTabs('prepend','Intranet II','http://www.bitsofsharepoint.com/ConsultingPoint/ClientPoint/snc/default.aspx','Links','http://www.bitsofsharepoint.com/ConsultingPoint/ClientPoint/snc/');

      There will be three tabs added, with one added the to the front and two added to the back.

      Placement of your extendedTabs will dictate the order the tabs are displayed.

      Here is the code to add to the topnavigation.js file or you can download the topnavigation.js file from here: http://www.bitsofsharepoint.com/ExamplePoint/CodeExamples/topnavigation.js

      $(document).ready(function(){
      /*
      Extended Tabs by Peter Allen
      Version 1.0 5/3/2010
      Purpose: Add a tabs to the beginning (prepend) or end (append) of the default SharePoint Top Navigation tabs.
      Script Setup: To make this script work you will need to provide several pieces of data which are listed out below.

      [tabSide] - Specify either 'append' or 'prepend'. This will indicated if the new tab will go before or after the default tabs.
                      Tab front Example: 'prepend'
                      Tab End Example: 'append'
      [titleTabName] - Specify a name for the tab, this be displayed in the tab.
                      Tab Name Example: 'Intranet'
      [urlTab] - Specify a link only if you want the tab to be clickable, otherwise leave blank with with two quotes, ''.
                      Link Example: 'http://www.google.com'
                      No Link Example: ''
      [listName] - Specify the name of the list for the pull down.
                      List Name Example: 'Links'
      [listSiteUrl] - Specify the url of the site where the list is located. URL needs to be of the site location NOT of the list location.
                      Incorrect Example: 'http://www.intranet.com/SiteName/List/ListName/'
                      Correct Example: 'http://www.intranet.com/SiteName/'

      All above variables will then be constructed as follows, make sure that each field has a ' at the begining and end of each.

      Construct:
          extendedTabs('[tabSide]','[titleTabName]','[urlTab]','[listName]','[listSiteURL]')
      Example:
          extendedTabs('append','Projects','http://www.sites.com/Projects/','Projects','http://www.site.com/Resources/');
      This example adds a tab called Projects at the end, tab links to the Project site, the list for the pull down is called Projects and the list resides in the Resources site.

      You can have multiple extendTabs like so:

          extendedTabs('append','Projects','','Projects','http://www.bitsofsharepoint.com/ConsultingPoint/ClientPoint/snc/');
          extendedTabs('append','Team Sites II','http://www.google.com','Team Sites','http://www.bitsofsharepoint.com/ConsultingPoint/ClientPoint/snc/');
          extendedTabs('prepend','Intranet II','http://www.bitsofsharepoint.com/ConsultingPoint/ClientPoint/snc/default.aspx','Links','http://www.bitsofsharepoint.com/ConsultingPoint/ClientPoint/snc/');

      Placement of your extendedTabs will dictate the order the tabs are displayed.

      */

      //    Place your extendedTabs below:

          extendedTabs('append','Projects','http://www.site.com/site/default.aspx','Projects','http://www.site.com/site/');
         

          var i = 1;
          function extendedTabs(tabSide,titleTabName,urlTab,listName,listSiteURL) {

              var titleTabID = 'zz1_TopNavigationMenun' + titleTabName.replace(/[-' ']/g,'');
              var showTabPD = titleTabID + 'Show';
              var showTabAppend = titleTabID + 'Append';

              if (urlTab != '') {
                  var urlTabShow = 'href=' + urlTab;
              } else {
                  var urlTabShow = '';
              }

                  var tableRow = '<td id="' + titleTabID + '" onkeyup="Menu_Key(event)" onmouseout="Menu_Unhover(this)" onmouseover="Menu_HoverRoot(this)"><table  width="100%" cellspacing="0" cellpadding="0" border="0" class="ms-topnav zz1_TopNavigationMenu_4"><tbody><tr id="mouse"><td style="white-space: nowrap;"><a ' + urlTabShow + ' style="border-style: none; font-size: 1em;" class="zz1_TopNavigationMenu_1 ms-topnav zz1_TopNavigationMenu_3">'    + titleTabName + '</a><td valign="top" style="width:0pt;" ><img style="border-style:none; vertical-align:top;" alt="" src="/_layouts/images/menudark.gif"></td></tr></tbody></table><div style="position:absolute;height: 0px;z-index:1;"><div id="' + showTabPD + '" class="zz1_TopNavigationMenu_8" style="display:none;position:relative;top:0px; clip: rect(auto, auto, auto, auto);z-index:1;"><table cellspacing="0" cellpadding="0" border="0" style="top: 0px;" id="' + showTabAppend + '"></table></div></div></td>';
              if (tabSide == 'prepend') {
                  $('table#zz1_TopNavigationMenu').children().children().prepend(tableRow);
              } else {
                  $('table#zz1_TopNavigationMenu').children().children().append(tableRow);

              }

              $().SPServices({

                  operation: "GetListItems",

                  webURL: listSiteURL,

                  listName: listName,

                  completefunc: function (xData, Status) {

                      $(xData.responseXML).find("[nodeName='z:row']").each(function() {

                          var URLdataTN1 = $(this).attr("ows_URL").split(',');

                          var linksTN1 = $(this).attr("ows_LinkType");

                          if (linksTN1 == 'Header') {

                              $('#' + showTabAppend).append('<tr id="zz1_TopNavigationMenun' + i + '" onkeyup="Menu_Key(event)" onmouseout="Menu_Unhover(this)" onmouseover="Menu_HoverDynamic(this)"><td><table cellspacing="0" cellpadding="0" border="0" width="100%" class="ms-topNavFlyOuts zz1_TopNavigationMenu_7 ms-topNavFlyOutsHover"><tbody><tr><td style="white-space: nowrap; width: 100%;"><a style="border-style: none; font-size: 1em;" class="zz1_TopNavigationMenu_1 ms-topNavFlyOuts zz1_TopNavigationMenu_6 ms-topNavFlyOutsHover"><strong>' + URLdataTN1[1] + '</strong></a></td></tr></tbody></table></td></tr>');
                              i++;

                          } else if (linksTN1 == 'Header Link') {

                              $('#' + showTabAppend).append('<tr id="zz1_TopNavigationMenun' + i + '" onkeyup="Menu_Key(event)" onmouseout="Menu_Unhover(this)" onmouseover="Menu_HoverDynamic(this)"><td><table cellspacing="0" cellpadding="0" border="0" width="100%" class="ms-topNavFlyOuts zz1_TopNavigationMenu_7 ms-topNavFlyOutsHover"><tbody><tr><td style="white-space: nowrap; width: 100%;"><a style="border-style: none; font-size: 1em;" href="' + URLdataTN1[0] + '" class="zz1_TopNavigationMenu_1 ms-topNavFlyOuts zz1_TopNavigationMenu_6 ms-topNavFlyOutsHover"><strong>' + URLdataTN1[1] + '</strong></a></td></tr></tbody></table></td></tr>');

                              i++;

                          } else {

                              $('#' + showTabAppend).append('<tr id="zz1_TopNavigationMenun' + i + '" onkeyup="Menu_Key(event)" onmouseout="Menu_Unhover(this)" onmouseover="Menu_HoverDynamic(this)"><td><table cellspacing="0" cellpadding="0" border="0" width="100%" class="ms-topNavFlyOuts zz1_TopNavigationMenu_7"><tbody><tr><td style="white-space: nowrap; width: 100%;"><a style="border-style: none; font-size: 1em;" href="' + URLdataTN1[0] + '" class="zz1_TopNavigationMenu_1 ms-topNavFlyOuts zz1_TopNavigationMenu_6">' + URLdataTN1[1] + '</a></td></tr></tbody></table></td></tr>');
                              i++;

                          }

                      });

                  }

              });

              $('#' + titleTabID).mouseover(function(){

                  $('#' + showTabPD).show();

              });
              $('#' + titleTabID).mouseleave(function(){

                  $('#' + showTabPD).hide();

              });

          }

      });

      OK, now lets pull this all together.

      1. Document Library where the following is housed:
        • jquery-latest.js
        • jquery.SPServices-latest.min.js
        • topnavigation.js”
      2. A links list created called TopNav
        1. Added columns:
          1. Group
          2. LinkType
        2. Changed All Links View
      3. Modified topnavigation.js file as outlined.
        1. Add a extendedTab call.
      4. Edited masters pages with SharePoint Designer to add the three lines of code.

      You should now be seeing something like this.

       

       

      Here is a working example: http://www.bitsofsharepoint.com/ExamplePoint/Navigation/default.aspx

      Hope this helps.

      expand Search Lists and Document Libraries by Metadata4/28/2010
      expand SharePoint Information Architecture with MindManager by MindJet4/15/2010

      Mind mapping works so well for creating high level and detailed designs of your SharePoint Information Architecture or taxonomy.  I have been using MindManager for the last 5 years and found it to be a wonderful tool to communicate information in a clear graphical view.  A SharePoint Information Architecture or taxonomy cries out for this kind of view. 

      I spoke at the Sacramento SharePoint Users Group on the subject of using MindManager from MindJet to help outline and communicate a SharePoint site design and taxonomy.  In working with various clients I have developed a template that I use to outline an Information Architecture design to meet their requirements. 

      When I develop these designs with clients I focus on two types of maps.  First I focus on a high level map then I proceed to a more detailed map that gets into the actual settings.  When developing these maps I will focus on several key aspects:

      • Access or Permissions or Authentication: This is one of the critical areas that can dictate a lot about the site design.
        • Key aspect: Don’t break permission in your design.  As your site grows broken permission will cause great hardship to maintain and with user experience.
      • Content: Understanding the following will help you to organize your site design.
        • Use of the content Projects, quick collaboration, department collaboration, repeatable development, reporting, records management, etc.
        • Trusted or in development:  Many implementations mix trusted and in development content with each other making finding the right information very difficult and frustrating for end users.
      • Purpose:  Internal use or will clients need access, department specific or cross department needs, etc.
      • Volume: How much content and how much traffic is expected.  This will help determine if a separate Web App is required.
      • Data Criticality: How critical is that data being up 99.9% of the time.  This can also determine if a separate Web App is required.

      This information will really help to shape how the Information Architecture and taxonomy should be laid out.  Here is an example of a high level site design.  I find it to be one of the best ways to have a meaningful discussion about how content will be used in the organization.  

      Company Site Structure

      Example: ABC Site Structure – PDF Format

      Once this is created and agreed upon we can then proceed to the detailed design, which gets into the nuts and bolts of implementing the overall plan. 

      I have designed a template that makes it easy to drag an drop sites, libraries, lists, site columns and site content types in to build out your site design.  I have even included Web Apps so that you can also identify the Web Apps that need to be created and the site collections that will reside in them.

      ABC Site Structure

      Example: Company Site Structure – PDF Format

      Here is a closer look at the details found within a Web App and Site Collection.  Each item that has a + will expand to show the details or settings for each one.

      ABC Site Structure

      With the MindManager software I am able to take complex maps and drill down to just the content that I need to look at.  For example I can filter the map to just show document libraries.  This will then allow me to only show the document libraries throughout the site and the settings associated with those libraries.  So if the policy changed to versioning copies going from 10 to 5 I can easily change it by filtering it down to document libraries and then the setting for each document library.

      Based on my workings with clients I have come up with a template that I use to build out the detail diagram for implement SharePoint site design and taxonomy.  Currently they are broken down to four major areas.

      • Web App and Sites – You can add a web app along with a site or you can copy the site and add it to an existing web app.
      • List and Libraries – Select a Document Library or a List to add to your site collection or sub site.
      • Content Types – Select to a Content Type to add to a site collection or site.  I recommend in the list and libraries to just reference a content type and not document it at the list level.
      • Columns – Select a column to add a column at the site collection level or the list or library level.

      SharePoint Site Structure Parts II

      When you expand the above you can see that you get a lot granularity with designing your SharePoint deployment.  When this is all completed you can easily had this off to someone else to implement and they will know exactly what to do for each and every site and list.

      SharePoint Site Structure Parts

      Example: SharePoint Site Structure Parts – PDF Format

      Template: SharePoint Site Structure Parts Template – MindManager Map Format

      Other benefits of the MindManager is that not everyone has to have the software to be able to review and discuss the detailed maps.  MindManager has an expansive export capability.  When you get into complex maps, as this one, you will use one of the many export methods to collaborate with.  I can tell you Export as Mindjet Player is the best export for complex maps and gives all involved an easy way to explore the map.  The Export as Mindjet Player produces a PDF that anyone with a viewer can see and interact with.  Yes, that is correct, you can expand and collapse just like you were in MindManager.  Here is an example that you can interact with. Example: ABC Site Structure

      In conclusion, this tool, MindManager by MindJet, allows you to create very complex Information Architected sites and taxonomy maps for SharePoint deployment that make it much easier to understand what is be designed and much easier to document and implement.

      Here is all of the documentation:

      1. SharePoint Site Structure Parts Template – MindManager Map Format
      2. SharePoint Site Structure Parts – PDF Format
      3. Company Site Structure Example – PDF Format
      4. ABC Site Structure Example – PDF Format
      5. MindManager by MindJet - Software

      Hope this helps,

      Peter

      expand SharePoint Themes – More than Pretty Colors – Information Architecture4/12/2010
      expand Site Owners – Display and Manage3/22/2010

      One of the challenges I have with SharePoint is knowing who the site owner is for any given site or sub-site.  Ownership is a critical component of any deployment.  But ownership should be clearly communicated and maintained. 

      When I work on a deployment one area that I work on with the organization is to identify who the site owners are.  Once this is identified we need to communicate this on the site.  But if we rely on each owner to identify this on their site we will have different implementations of this, inconsistency for the end-user to follow and a decentralized setup.  Also, there would be no easy way to see who all the site owners are and it would be a lot of work to go to each site to take note.  Also, I always recommend that site owners create a club (this sounds so much more fun and less formal then a committee) that can meet on a monthly basis to talk best practices and share experiences and solutions. 

      Since SharePoint does not have any easy way to identify the site owner and provide a central location to track all this, I have come up with a solution.  Below you will find my solution to the problem.

      The solution involves a content editor web part (CEWP), a centralized list with a couple of views and a document library.  The CEWP will be placed in every site collection and sub site.  The CEWP will point to a script that will show the correct site owner based on the site URL.  The list will house a list of all owners and the sites they own.  The document library will house the script used.

      Here is an overview of how it will work.  By having the CEWP pulling both the script and list from a central place, you get the benefit of being able to change the ownership from a central place and if you want to customize the script you can do this too and it will be populated to all sites.

      image

      The result will look like this.  You can then outline who the site owner is and even adding listing like helpdesk, designer or admin.  These all can be added at any time.

      image

      The final result would look something like this:

      image

      Here is a link to the details on how to add this to your SharePoint deployment.

      http://www.bitsofsharepoint.com/ExamplePoint/Site/SiteOwner.aspx

      Hope this helps,

      Peter

      expand SharePoint: ToolTip 2.0 (Posted on EndUserSharePoint.com)3/21/2010
      expand jQuery – List and Document Library Filter Version 2.212/29/2009
      Thee is an updated version to the List Filter solution that fixes a bug that some were having with regards displaying of the interface.  For some reason a version of SharePoint 2007 would erase the style information at the beginning of the solution.  If the style info is place anywhere at the middle or end then it is will not be erased. 
       
      This is a minor update which fixes this issue.
       
       
      Hope this helps.
       
      Peter
      expand SharePoint CEWP Solution Interface – Part II12/22/2009
      expand SharePoint CEWP Solution Interface – Introduction12/9/2009
      I have a new series coming out on a new approach for Content Editor Web Part (CEWP) solution developers that addresses the issue where implementations require the end user to modify code to make it work.  You know change variables to make the solution work.
       
      Most end users do not know code, it is a foreign language to them.  They just want a solution that is easy to implement.  I have been working on a concept of how us who create these CEWP solutions can make the solution a code free experience for the end user.
       
      To read more about my solution please go to EndUserSharePoint to read the first of a series of articles.
       
      expand jQuery – List and Document Library Filter Version 2.1 - Released11/13/2009
      expand jQuery – List and Document Library Filter Version 2.0 – Part 211/11/2009
      Just posted an update to the List and Library Document Library Filter solution.  Checkout the article at endusersharepoint.com: http://www.endusersharepoint.com/2009/11/11/jquery-–-list-and-document-library-filter-version-2-0-part-2/
       

      Here is what has been improved in version 2.0:

      • Speed Improvements – Improved the speed to display the results by 4x for large lists.
      • Grouped Lists – Added a solution to better able grouped list filtering.
      • Add Comments – You can easily add comments to the filter box for the end-user.
      • Filter Box Position – You can now easily position the filter box to the left, center or right on the page.
      • New Options Interface – The new options interface makes it so that any of the above customizations can be done code free.
       
       
      Hope this helps,
       
      Peter 
      expand What's next? List Filter, Search and CEWP Options Interface11/10/2009
      expand jQuery - List and Document Library Filtering Solution10/20/2009
      Search has not been easy with SharePoint 2007 and especially with WSS 3.0.  For example many times I just want to search the list or document library I am on.  What I want is ability to see what items match what I looking for specifically with the list that is showing right now.  I would like to search, and not have to refresh the page or have to go to another location to do the search.
       
      But this is really not searching as we are not necessarily looking at all the items in a list, just the items that are showing.  This is really filtering.  My initial post called it Searching, but it is really filtering.
       
      I have been developing another site with SharePoint WSS 3.0 and needed to have such a solution.  The site www.mobilesitezone.net (this is designed for smartphones) is very customized SharePoint site, I then adapted the search/filtering created for it to work with any SharePoint List or Document Library.
       
      What was created was a jQuery filtering solution that only looked at the list on the page and filtered the results based on the search criteria.  It will filter all the fields that are shown on the site and then show you the rows that have any matches.
       
      Here is an example where this a large list of over 400 items and then a search is made for "google" which then displays just the results.
       
      List
       
      Results
       
      I have put together an example page where you can test this out and get the Web Part or Code for CEWP to add this to your site.
       
       
      UPDATE 10/21/09 8:30 AM PST:  Changed this from search solution to a filter solution.  This better represents that actions taking place.
       
      UPDATE 10/20/09 4:30 PM PST:  Added functionality so that enter will submit search.
       
      Hope you enjoy,
       
      Peter
      1 - 20 Next

      Internet Resources Topic: Document LibraryTop
      The Html Calculated Column
      <div>First site you should review with regards to using calculated column for HTML.&nbsp; This is what started it for me.</div>
      Shareesblog - Folders Overview
      <div>This is a great article on how to utilize SharePoints features to make it easier to organize and find documents.</div>
      MS - Examples of common formulas
      <div>Here you find common examples to the calculated column from MS.</div>
      MS - Formulas and Functions
      <div>Here is a list of the Formulas and Functions that can be used with SharePoint.</div>
      Screencast on how to use a Blog for Meeting Minutes
      <div>Mark at EndUserSharePoint.com has a post and screencast on how to use a Blog for meeting minutes.</div>
      Leveraging SharePoint as a Document Management System
      <div>A solid overview of using SharePoint as a Document Management System.</div>
      Quick Launch - Making the Quick Launch appear again on Web Part pages stored in a document library
      <div>Overview on how to get the Quick Launch showing on web part page with designer.</div>
      Quick Launch - Adding the quick launch to team site pages
      <div>How to add it to the template if you have access to the following: &quot;C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\1033\STS\DOCTEMP\SMARTPGS&quot; </div>
      Quick Launch - Hide the Quick Launch Bar
      <div>Todd Bleeker has a good article on how to hide the quick launch.&nbsp; Even though it was written for WSS 2.0 it works for WSS 3.0 and MOSS.</div>
      Quick Launch - Customizing the Quick Launch menu: Adding fly-out menus to SharePoint navigation
      <div>Great way to have a menu for the Quick Launch.</div>
      Quick Launch - Accordion Left Navigation
      <div>Paul Grenier has posted an article on how to make the quick launch an accordion with JQuery code.</div>
      Quick Launch - Customize your Quick Launch with flyouts
      <div>Get the Point Blog by Microsoft has a good article and link on how to change the quick launch to a flyout.</div>
      JQuery Solutions at www.endusersharepoint.com
      <div>At www.endusersharepoint.com Paul Grenier has been developing some really wonderful solutions.&nbsp; A MUST visit.</div>
      Content Types - Articles from www.EndUserSharePoint.com
      <div>Here are really good articles on the many different things you can do with Content Types.</div>
      Content Types - Microsoft Overview
      <div>This is Microsofts overview of content types.</div>
      Document Library - Forced Check Out
      <div>Here is a JQuery script that will prevent the user from opening a document with out checking it out first.</div>
      QuickLaunch - Add to Web Part Pages - No need to Edit Master.Page
      <div>Christophe has done it again.&nbsp; Here is a slick way to add the QuickLaunch with out have to edit any pages.</div>
      EndUserSharePoint - Document Library Overview
      <div>Here is another great article on how to use metadata with the SharePoint Document Library.&nbsp; A must read.</div>
      Wiki-in-the-Box - Is SharePoint Wiki Really that Bad?
      <div>DYNOMITE Article on Wiki&#39;s.&nbsp; A must read!!!!</div>
      Fixing SharePoint’s Wiki by adding a home button and repairing the breadcrumb
      <div>Here is a way to customize the breadcrumbs and add custom buttons to the wiki page.</div>
      Quick Launch - add to web part page
      <div>Here is the code that needs to be taken out to show the Quick Launch.</div>

       

      Videos Topic: Document LibraryTop
      Sample video

      This video shows how you can add video to any multi-text field.
      Blog - Meeting Minute Video

      Great video on how to setup a Blog for meeting minutes.
       
      Mark at EndUserSharePoint.com provided this video.

      Here is a great simple overview of a Blog.  Enjoy.

      Introduction to BitsOfSharePoint
       

      This is a good turorial on a SharePoint Blog by www.sharepointsite.net.

       ‭(Hidden)‬ Filter

      Title
      Navigation