Customize Context Sensitive Help on SharePoint 2010

SharePoint 2010 extended the context help experience to users and allows the developers easily creating and customizing the help topics for their products deployed on SharePoint. This post will focus on how to customize the SharePoint 2010 context help and make the context sensitive help worked on your pages.

Enable Custom Site Collection Help

On the Site Settings of the top level site in the site collection, activate the Site Collection Feature “Custom Site Collection Help”.

It will create a document library “Site Collection Help” for hosting the help content available for whole site collection.

Create Help Collection

Create a new Help Collection folder in “Site Collection Help” document library.

Specify the Name, Title, Locale ID, and Product Name. Locale ID specify the language that the Help collection is in (For example, 1033 means English). Product is the identifier of this help collection.

Enable this Help Collection in Site Settings -> Site Collection Administration -> Help settings.

 

Create Help Categories and Add Help Topics

Help Category is a named folder you can put the help article (topic), it provides a way to group the help topics by subject and list with a table of contents. Help Topic is the actual HTML article created and uploaded by user, and associated with a context key which will be associated to the custom SharePoint web page to enable the context sensitive help.

In this post, we will use the web page name as the Context Key, so the javascript in the masterpage could automatically find help topic by the page name. For example, if you have created a web part page called page1.aspx, you will have page1 as the Context Key here.

Modify Master Page to Enable the Context Sensitive Help in Help Button and by F1 Key

Add following javascript to your master page, it parses the current URL and gets the page name; set the context key and register the F1 key.

// get current page path and name

var currentUrl = window.location.pathname;

// if it is not a system page

if (currentUrl.indexOf('/_layouts') < 0) {

   // get the page name

  var d = currentUrl.lastIndexOf('.');
  var s = currentUrl.lastIndexOf('/') + 1;
  var sPage = currentUrl.substring(s, d);

   // remove space

  sPage = sPage.replace("%20", "");
  sPage = sPage.replace(" ", "");

   // set context sensitive key

  navBarHelpOverrideKey = "WSSEndUser_" + sPage;

   // set the F1 key

  WPSC.RegisterForEvent("urn:schemas-microsoft-com:dhtml", "onhelp", ShowHelp);
}

function ShowHelp() {
  HelpWindowKey(navBarHelpOverrideKey);
  return false;
}

After everything done, load your page, and click on the help button, or press F1 in the keyboard, you will see the help article in a popup window like: