Creating a Dynamic Table of Contents for PHPKB

We use phpkb at work for an internal knowledge base and overall I'm pretty happy with it, it does pretty much everything that I wanted in a KB except for one or two things. One of those was to allow for a dynamic table of contents based on use of heading tags in your article, something that most wiki software does out of the box, as does MS Word, which is where much of the content we are migrating into phpkb lived before.

So I wrote a little bit of JavaScript to enable a dymanic TOC myself. It is easy to implement if you are using phpkb, here is how it looks and how to turn this on for article pages.

The TOC is inserted at the top of your article and indented based on heading use

You can cheat and just get the jscript file and my modded article.php in this zipped copy.

Step 1 - Modify article.php (back it up first..)
Paste these lines in that page right before the '$include_files' insertion.

<script type=\"text/javascript\" src=\"$path_kb/thesaurus/js/jquery1-7-1.js\"></script>
<script type=\"text/javascript\" src=\"$path_kb/include/toc.js\"></script>

Step 2 - Create a custom field called 'Show TOC' and make it a non-required checkbox with Yes,No options.

Step 3 - Drop the toc.js file into the include folder for your installation. Here is the source for that file so you can see what is going on.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

$(document).ready(function(){     $('.customfields').find('li').each(function(i) {  // Looks at custom fields on page to see if enabled         var current = $(this);         if(current.text() == 'Show TOC: Yes') {  // Enabled, show table of contents                 $("#ARTICLECONTENT").prepend('<div id="toc"><b>Table of Contents</b></div>');             $("#toc").css('border','1px solid #eccf59');             $("#toc").css('background','#f1eddf');             $("#toc").css('margin','5px 0 0 0');             $("#toc").css('padding','5px 5px 15px 5px');             $("#toc").append("<ul>");             var iToc = 0; // to track if we find any headings             $('article').children("h1, h2, h3, h4, h5").each(function(i) {                 iToc ++;                 var current = $(this);                 current.attr("id", "title" + i);                 var sp = '';                 switch(current.prop("tagName")){                     case 'H1': sp = '10px'; break;                     case 'H2': sp = '20px'; break;                     case 'H3': sp = '30px'; break;                     case 'H4': sp = '40px'; break;                     case 'H5': sp = '50px'; break;                              }                 if(current.html().trim()){                     $("#toc").append("<li style='padding-left:" + sp + ";'><a id='link" + i +                         "' href='#title" + i + "' title='" + current.attr("tagName") +                         "'>" + current.html() + "</a></li>");                 }             });             $("#toc").append("</ul>");             if(iToc == 0) { $("#toc").hide(); } // if no content for TOC we just hide it                    }     }); });

As you can see, with some very little changes you can repurpose this for other applications that use the same 'H tag' heading hierarchy that you commonly run into.

Resource for SharePoint farm upgrade with server name change

This was a question I had someone ask last week regarding how you might handle the situation where you want to change the host name of your SharePoint farm in an upgrade (or just the host name for any web app really) knowing that all embedded links will be broken.

The low hanging fruit is to set a DNS record so that the old and new point to your new server address, but if you want to alter some site names and/or alert users that they have an old, deprecated url instead of just forwarding them on, the solution below might work for you.

The following script is for the node.js platform and, if run on a server with your old host name's resolution, will intercept incoming http requests, map it to your new server, allowing for site renaming and provide the user with a message as well as the new 'best guess' url to what they were trying to reach.  It is pretty straightforward and should be relatively easy to modify as needed.

HTTPS (443): This is geared toward standard HTTP traffic, if you need a version to work with HTTPS on port 443, you can find some subtle changes that will be needed in the node.js information here http://nodejs.org/api/https.html.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

// Kevin Guyer - 2013 // Node.js script to handle server (SharePoint) name changes //  This is designed to catch the use of old urls and present an infomational page with the new url to the resource //  Test with this to see URL altering:  http://localhost:8080/hr/foosite/barsite/somelibrary/somedoc.pdf   // Intercept incoming port 80 or 443 (needs to operate on both) - set the port below for flavor you are running var http = require('http'); var url = require("url"); var server = http.createServer();   server.on('request', function(request, response) {     var hostname = request.headers.host;     var newHostname = 'https://yournewfarmpath';  // no trailing slash, set to your new farm/server name and path     var pathname = url.parse(request.url).pathname;     var newPathname = pathname;     var query = url.parse(request.url).query;  // optional, not used yet           // Run match logic on array elements to determine what needs to be displayed     var aResPath = pathname.split('/');           // Modify path elements as needed with element matching:     var wasAltered = false;     if(aResPath.length >=1){         try{             if(aResPath[1].toLowerCase() == 'hr'){ aResPath[1] = 'HumanResources'; wasAltered = true; }             if(aResPath[3].toLowerCase() == 'barsite'){ aResPath[3] = 'NewBarSite'; wasAltered = true; }             // add others as needed, sites on root starting at index [1]...         }         catch(err) {             // handle as desired...         }                   if(wasAltered == true){             console.log("Detected swap string in path, altering output.");             newPathname = '';             for(i = 1; i < aResPath.length; i++){                 newPathname = newPathname + '/' + aResPath[i];             }         }     }     // Build response message     var payload = '<h2>Oops.</h2><p>The url you attempted to reach (<em>' + hostname +  pathname + '</em>) is no longer valid.</p>';     // Optional: Build and supply a best bet url        payload += '<p>Our best guess for the new url for this resource is <a href="'+ newHostname + newPathname+'">'+ newHostname + newPathname+'</a>.</p>';     payload += '<p>Please update your favorite or link source to reflect this new address.</p>';       // Optional step to log the old url hit via a web API (REST) - todo...       // Build and deliver response        response.writeHead(200, {"Content-Type": "text/html"});     response.write(payload);     response.end(); });   var port = 8080;  // change this to 80 or 443 as needed server.listen(port); server.once('listening', function() {     console.log('Redirect server is now listening on port %d', port); });

Banner with Quick Access to Search a SP2010 List

This is a quick piece of script and HTML that I threw together to help make it easier for our users to search a list or library in SharePoint when they were on a view page. Once added to your environment you can add this to the top of any view and it will both display the name of the list in the banner and dynamically set itself up to search the list/library that the hosting view lives on.

There is a search control included in SharePoint but this saved a few steps (clicks) we thought might be critical in getting people to use search more often and it makes for a nice custom banner to boot. With a little tweaking you can further change the banner text, the control's watermark and the banner image. With a few small changes this could also have the scope set to the site instead of a list.

All of the code, images and documentation for deployment is in the accompanying .zip file. Let me know in the comments if you have further suggestions.

DOWNLOAD SEARCH BANNER

//Kevin

Metro-Style Easy Tabs for SharePoint 2010

This is an item I flashed a development iteration of to the group in my Richmond SharePoint Saturday presentation and have since cooked up what is called 'V2' of the effort but is really the first version that I've made available. This approach just simplifies the initial version by making the tile's images all the same, though I did add a dynamic element to the colors. I'm not yet sure if that is a good idea, so I have instructions below to turn that off if you'd like. This is all based on the brilliant client-side Easy Tabs script that I just modified and simplified for the new visual style.

You can deploy these as you would 'normal' Easy Tabs for SP, my instructions for using the original script are here though you'll want the new code as it is not in that package:

Want to kill the random tile colors? Yeah, can't say I blame you...

Edit line #108 in the file from this:

var colorNumber = 1 + Math.floor(Math.random() * 9); // random start 1-9

to this (where the '1' can be any number from 1 to 9) :

var colorNumber = 1;

I may make more versions of this, including one allowing for a single color for the tiles.  Let me know if there is a feature that you might like that I should consider.  I'm not sure yet how to reliably incorporate custom images per tab (that make sense to the tab's context) without the end user editing the script and violating the plug and play goal here.

This version looks like the above screenshot with both a hover effect and a visualization for selected items.  Over-n-out.

The Cheapskate's Guide: Extending SP 2010 Functionality

This is what I am presenting at SharePoint Saturday in Richmond VA and the accompanying file packages that go with that talk. There are 13 items total, each of them containing any scripts and resources needed (that I can provide) and a PDF breakdown of what it takes to deploy them. 5 of the 13 use Javascript controls I picked up for cheap from Codecanyon.net, you'll need to grab the control mentioned to get these to work, the others contain all that you need to get running. Drop me a line if you do something cool with one of these or modify them.

The Slides: PowerPoint The Controls: Calendar Viewer (free) Foobar Alerts - $2 Coffees (foobar 2.1) Tabs – Original (free) Tabs – Metro (free) (Edit:Published here!) News Page Rotator - $4 Coffees (Royal Slider 9.4.8) FAQ (free) Tabbed Container - $4 Coffees (Zozo Tabs v2.2) I Want To (free) Image Rotator - $3 Coffees (jQuery Banner Rotator) Google RSS Static (free) Google RSS Scrolling (free) Snow - $1 Coffee (JSized Snow Effect) Google maps traffic widget (free) Other links of note: Notepad++ - Great editor CodeCanyon (where I shop for controls) jQuery SP Services CAML Query Builder