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 > B l o g P o i n t
SharePoint Book - Global Navigation Solution 2010
I have released the Global Navigation Solution for 2010.  You will find my solution in the following book that has just been published.  SharePoint 2010 at Work: Tricks, Traps, and Bold Opinions 

I want to thanks Mark Miller for his contribution to the SharePoint community and support.  Mark created a venue for SharePoint Professionals to give back to the community and I am very grateful for the opportunity.  He has spearheaded this publication and I am honored to be a part of it.
 
You will find my Global Navigation Solution for 2010 here, but you will also find many other great articles by other SharePoint professionals.  Here is a table of contents:
 
 
Chapter 1 The SharePoint Maturity Model by Sadalit Van Buren
  • Evolution of the Model
  • Structure of the Model
  • Applying the Model
  • Summary
Chapter 2 Empower the Power User by Kerri Abraham
  • SharePoint Designer: To Allow or Not To Allow? That Is the Question
  • Middle Ground: Configuration Management
  • Solution: The SharePoint Rudder
  • Connect Up OneNote
  • The Five “W”s of Documentation
  • OneNote Templates
  • Empowered Utopia in 10 Steps
  • Configuration Management Is Thoughtful Maintenance
  • Empowerment Without Responsibility Is Chaos
  • Summary
Chapter 3 jQuery to the Rescue by Jim Bob Howard
  • Automate an All-Day Event
  • Requesting a Review Only Once Per User
  • Default Text Based on Radio Button Click
  • Writing a Survey ID to a List on Response Creation(without Workflow)
  • Labeled Sections on Default Forms
  • Where To from Here?
  • Summary
Chapter 4 Unlocking the Mysteries of the SharePoint Data View Web Part XSL Tags by Marc D. Anderson
  • More About Data View Web Parts
  • Summary
Chapter 5 Hyperlinks in the Data View Web Part by Laura Rogers
  • Setup for Walkthroughs
  • URLs in SharePoint
  • XSLT List View Web Part Hyperlinks
  • DVWP Hyperlinks
  • Modal Dialog Box
  • Summary
Chapter 6 Building a Quote of the Day Web Part in
SharePoint 2010 by Waldek Mastykarz
  • Part I: Building the Quote of the Day Web Part
  • Part II: Preparing Quote of the Day Web Part for
  • Redistribution
  • Summary
Chapter 7 SPJS Charts for SharePoint by Alexander Bautz
  • Technical Overview
  • Version History
  • Initial Setup
  • The Edit Chart GUI
  • How to Make Web Part Templates
  • Multiple Charts in One Page
  • Summary
Chapter 8 Taming the Elusive Calculated Column—Logic by Dessie Lunsford
  • Functions
  • The Functions
  • The IFs
  • The Cousins: OR and AND
  • Summary
Chapter 9 Creating Document Libraries with Mixed Content Sources by Eric Alexander
  • Background
  • Configuring a Document Library in SharePoint Server
  • 2010/SharePoint Foundation 2010
  • Configuring a Document Library in MOSS 2007/WSS 3.0
  • What the Content Type Does
  • Extending the Link to a Document Content Type
  • Summary
Chapter 10 SharePoint 2010 Tab Page by Peter Allen
  • Implementation
  • jQuery Implementation
  • Tab Page Layout Code
  • Summary
Chapter 11 A Global Navigation Solution Across Site
Collections by Peter Allen
  • Implementation
  • Summary
Colophon
 
SharePoint 2007 - Wiki View Solution

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>

SharePoint - Global Navigation 2010 Solution In Progress
All,
 
Thank you for the emails and requests for a 2010 version of my 2007 solution to Global Navigation .  I have created a beta version for 2010 and have had a few people test it out.  They found a serious issues when ever you add a calendar web part, navigation no longer shows the pull downs, OUCH. 
 
I have done some preliminary testing but have not found the cause of this.  I am currently on a big SharePoint project that is taking up all my time, got to pay the bills, and so I have not had the time I wanted to look into this.
 
If anyone would like to help me diagnose this issue please feel free to send me an email peter@bitsofsharepoint.com.
 
 
SharePoint – A Global Navigation Solution Across Site Collections – Permissions

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.

SharePoint - A Global Navigation Solution across Site Collections – Version 2.0 Solution

My solution for A Global Navigation Solution across Site Collections has been upgraded to version 2.0.  If you have not read my previous posts on this topic please check them out:

In version 2.0 I have streamlined the code and reduced the number of lists needed to create the pull downs and now use a list for creating the tabs.  So once you set it up you can easily add tabs and pull downs to a tab, by simply updating the tabs list or the pull down list and all site with this solution will see the changes.

I have also refined the tabs to show the menudark[1] when there is a pull down.  Also, pull downs now can have popup descriptions for each listed item, if you like.  All you need to do is populate the Notes field in your pull down list, unpopulated notes will show nothing.

If you have not implemented this solution yet then follow all the steps listed below.  If you have implement my version 1.0, the changes you will need to make are updating the code in the topnavigation.js file and create two new lists for your tab and pull down.  Your infrastructure, code you added to your masters pages, you created does not need be changed at all.

Let take a look at version 2.0 changes.  Below is an image of how the pull downs can look showing all the features.

image

 

Version 2.0 Global Navigation Features

In version 2.0 I have added MOSS features and as a result the following features were 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 a 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 pop-ups when you hover over a link.
    • image
  • New version only requires one list for the tabs and one list for all the pull downs.

When I implemented this on my site www.bitsofsharepoint.com I created a site where I housed all of the lists and libraries.  Below is an image of the what a proper implementation would look like.  You will notice we have the two lists for tabs and pull downs, and we have the Scripts library where our three scripts are housed.

image

View example here: http://www.bitsofsharepoint.com/ExamplePoint/navigation2/default.aspx

Now lets create and implement the solution.  Below are the components that you will need.  Though this may look like a lot, it is very simple.  Add three lists and libraries, add code to your master page, change code in a script file, and add your tabs and pull downs to the lists and that is it.

Components needed:

  1. SharePoint Resource Site
  2. SPServices by Marc Anderson
  3. jQuery
  4. SharePoint Designer to edit Master Pages
  5. SharePoint Links List for Tabs and Pull Downs
  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. 

image

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 for Tabs and Pull Downs

In version 2.0 we now can pull the tabs and pull downs from just two lists.  This makes it much easier to maintain and deploy.  Now we only need to go to the Tabs list to add another tab.  In the Tab Pull Down list we can associate a pull down to any of the tabs.  This will make it very easy to switch a pull down from one tab to another if needed. 

Tabs List

First lets create the Tabs list.  This list will be a custom list.  This list must be called “Tabs”.  Here are the columns to add.  The columns have to be the same as well for the solution to work.

  • Title – This is the name of the Tab.
    • Description: Name of the Tab.
  • Pull Down – This is a yes/no field.  Selected will the pull down items.  Unselected will show no pull down or menudark[1].  
    • Description: Uncheck the box to indicate the Tab will have NO pull down.  This will eliminate the pull down image.
  • Location – This is a choice field.  The choice is “Left” or “Right”.  This will tell the tab to either be on the left site of the top navigation or the right site.
    • Description: Choose if the tab will be to the left or right of the default taps.
  • Tab Link – This is a single line of text field.  This is where the URL for the tab would go.
    • Description: Enter a url to give the tab a link, otherwise leave blank for no link.  Make sure link has http://
  • Order Tabs – This is a choice field. Make a selection from A to K.  This will be how you order your tabs on the left or right.
    • Description: RIGHT orders in ascending manner. A – Z LEFT orders in descending manner. Z – A

Next lets change the All Items view to sort and Group appropriately.  This view will dictate the the order the tabs show up.

On All Items view you will want to Modify View and make the following changes.

  • Sort – Change the following:
    • Sort by “Order Tab” in “ascending order”.
  • Group By – Change the following:

    • Group by to “Location” in “ascending order”.
    • And set to “Expand”.

     

    Tab Pull Down List

    Next lets add the Tab Pull Down list.  This list will be a standard links list.  This list must be called “Tab Pull Down”.  Here are the columns to add in addition to the standard columns.  The columns have to be the same as well for the solution to work.

    • Tab – This columns is a look up column looking up the “Tab” list with the Title column being looked up.
    • 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 “Tab” in “ascending order”.
      • 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 lists setup.  You will also notice that I have made a connection between Tabs and Tab Pull down so that I can essentially filter my view to show what the tab and associated pull down items are.

    image

    View example here: http://www.bitsofsharepoint.com/ExamplePoint/navigation2/default.aspx

    6) Solution Code

    In version 2.0 I have made it so that you only have to change one thing and then you never have to touch this file again.  

    In the code below or in the topnavigation.js file you will need to change the following:

        listSiteTabURL = 'http://www.bitsofsharepoint.com/topnav/';

    You will find this code at the top.  Change http://www.bitsofsharepoint.com/topnav/ to the site that your Tab and Pull Down List are located. URL needs to be of the site location NOT of the list location.

    Once you make that change you can save the file in your scripts library and you are done with that file.

    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/Download/topnavigation.js

    $(document).ready(function(){
        listSiteTabURL = 'http://www.bitsofsharepoint.com/topnav/';
        $().SPServices({
            operation: "GetListItems",
            webURL: listSiteTabURL,
            listName: 'Tabs',
            async: false,
            completefunc: function (xData, Status) {
                $(xData.responseXML).find("[nodeName='z:row']").each(function() {
                    var i = 1;
                    var tabSide = $(this).attr("ows_Location");
                    var titleTabName = $(this).attr("ows_Title");
                    var urlTab = $(this).attr("ows_Tab_x0020_Link");
                    var tabPullDown = $(this).attr("ows_Pull_x0020_Down");
                    var listName = 'Tab Pull Down';
                    var listSiteURL = listSiteTabURL;
                    var titleTabID = 'zz1_TopNavigationMenun' + titleTabName.replace(/[-' ']/g,'');
                    var showTabPD = titleTabID + 'Show';
                    var showTabAppend = titleTabID + 'Append';
                    if (urlTab != null) {
                        var urlTabShow = 'href=' + urlTab;
                    } else {
                        var urlTabShow = '';
                    }

                    if (tabPullDown == true) {
                        var tabImage = '<img style="border-style:none; vertical-align:top;" alt="" src="/_layouts/images/menudark.gif">';
                        var pullDown = '<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>';
                    } else {
                        var tabImage = '';
                        var pullDown = '';
                    }

                    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;" >'+ tabImage +'</td></tr></tbody></table>'+ pullDown +'</td>';
                    if (tabSide == 'Left') {
                        $('table#zz1_TopNavigationMenu').children().children().prepend(tableRow);
                    } else {
                        $('table#zz1_TopNavigationMenu').children().children().append(tableRow);
                    }

                    $().SPServices({
                        operation: "GetListItems",
                        webURL: listSiteURL,
                        listName: listName,
                        async: false,
                        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");
                                var TabTN1 = $(this).attr("ows_Tab").split('#');
                                var TabC = TabTN1[1];
                                var notesVar = $(this).attr("ows_Comments");
                                if (notesVar == null) {
                                    var notes = '';
                                } else {
                                    var notes = 'title="' + notesVar + '"';
                                }

                                if (titleTabName == TabC) {
                                    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" '+ notes +'><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" '+ notes +'><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" '+ notes +'>' + URLdataTN1[1] + '</a></td></tr></tbody></table></td></tr>');
                                        i++;
                                    }
                                } else {
                                }
                            });
                        }
                    });

                    $('#' + titleTabID).mouseover(function(){
                        $('#' + showTabPD).show();
                    });
                    $('#' + titleTabID).mouseleave(function(){
                        $('#' + showTabPD).hide();
                    });
                });
            }
        });

    });

     

    View example here: http://www.bitsofsharepoint.com/ExamplePoint/navigation2/default.aspx

    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 and will have the Script library populated with the needed scripts.

  • Hope version 2.0 helps.

  • SharePoint – A Global Navigation Solution Across Site Collections – Version 2.0 Primer and Deployment

    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.

    Tab Page for SharePoint Version 2.0

    About a year ago I created a tabs page that allowed you to have up to 8 tabs on a page and each tab can have multiple web parts added.  One of the features that was missing was that tabs were not sticky.  If you refreshed the page it would always go back to the first tab.  Well, I have found some time to add cookies so that it will remember the last tab you were on.  This now make it much easier to edit web parts and to use tabs with document libraries and lists.

    If you have implemented the solution already then you will need to edit the page with SharePoint Designer to add the code.  Or you can download the latest version and implement with the latest version.

    You can find the latest version and instructions on how to update your current implementation here:  http://www.bitsofsharepoint.com/ExamplePoint/Site/TabPage.aspx

    SharePoint - A Global Navigation Solution across Site Collections

    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.

      Search Lists and Document Libraries by Metadata

      A while back I create a solution that would filter a list by the metadata, but would only do this for items and metadata viewable in the current list view.  Here are the original articles:

      Thanks to all the good feedback and suggestions I have created another solution that will allow you to search any list by its metadata and will search ALL items visible or not.  Another feature I have added into this solution is that it can be placed on any pages and when the person searches it will taken them to results page. 

      In order to do this we will need to have access to SharePoint designer and have permissions to edit with SharePoint designer.  SharePoint designer will be used to create a Data View Web Part where results will be displayed.

      There are two main steps to create this search.

      1. Create a Search Results page.
      2. Add the Search Web Part to any page.

      Let’s go over the process of creating a search page.

      Create a Web Part Page.

      Next edit it in SharePoint Designer.

      Now add a Data View Web Part to a Web Part Zone.  To do this you will need to select the list or library from the Data Source Library.  The list or library you choose will be the one that is search with this solution.

      image

      Then select the what columns want to show. Also add them as a Multiple Item View.

      image

      When you save the file you will get a warning, don’t worry go ahead and say yes.

      image

      Next you will customize how the list is filtered.

      image

      Choose what fields you will filter on or have the search look through.

      image

      For the comparison make sure you select contains so that it is not an exact match.

      image

      Next for Value your are going to select Create a New Parameter.

      image

      Complete the parameter with the following:

      • Name: Search
      • Parameter Source: Query String (this is how it looks at the URL for the search criteria)
      • Query String Variable: Search

      image

      For each field/column that you want to search add another to the list and make sure the And/Or is set to Or.

      image

      When you click OK your list of items will disappear, but that is OK and is expected.

      image

      You are now done with the first major part.  If you want to customize the list more, feel free to do so.  To customize the Data View web part that has nothing showing just check the box under “Common Data View Tasks” called “Show with sample data”.

      The last part is to load the Search Web Part.  This web part is one that I created and will need to be downloaded placed on any page of your SharePoint site.  I would add this to the Search Results page as well.

      Search_List: http://www.bitsofsharepoint.com/ExamplePoint/CodeExamples/Search_List.dwp

      Next edit the Web Part with the Rich Text Editor and change the following:

      • Search Results Location:  This should be the full URL of where the Search Results page you created with the Data View Web Part is.
      • Search Box Location: Designate if it will be on the left, center or right.
      • Search Title:  Name your search so that your end users know what they are searching.

      image

      Then save the changes and you should be able to search your list and view the results.

      Here you can find a working example: List and Document Library Search

      SharePoint Information Architecture with MindManager by MindJet

      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

      1 - 10 Next
       
       
      This blog is about HealthCare, SharePoint, Technology and things that catch my interest.
       

       
      Below is BitsOfSharePoint related links:
       

       ‭(Hidden)‬ Admin Links

       T o p i c P o i n t

       E x a m p l e P o i n t

       Posts Archive

       ‭(Hidden)‬ Content Editor Web Part ‭[2]‬