Press F1 – SharePoint Help is on the Way
A note from Mark Miller, Founder and Editor of EndUserSharePoint.com
Woody’s site, The Sanity Point, disappeared for a while, but when it came back up, I found this gem and asked if I could cross-post. After reading, you’ll see why. Thanks Woody. Good to have you back.
Giving Your SharePoint Users Site-Specific Online Help
"Press F1 for Help" has been ingrained into the psyche’s of PC users since even before Windows. OK, WordPerfect users originally had to press F3 instead, but the concept is the same.
In any case, SharePoint allows you to take advantage of this convention through its page event model. Page-level scripting in SharePoint has received a big boost in attention recently. Ever since Microsoft has announced its endorsement of JQuery in Visual Studio, articles are popping up all over as people learn to leverage this new framework. This is not one of those articles.
Introducing the WPSC
Instead, this is about one use of a component that has been a part of SharePoint (under various names) since it was called the Digital Dashboard Resource Kit – The Web Part Page Services Component (WPSC). I devote a whole chapter in my book to using this and other client-side components, but briefly, the WPSC is a set of JavaScript objects and functions that allow Web Parts to communicate with SharePoint, each other, and your users.
One of these functions allows you to register for events. These events can be defined in other Web Parts, or pre-defined by SharePoint. This example uses one of the pre-defined events – "onhelp". In essence, the WPSC watches for users to press the F1 key, and then raises this event so that any interested components on the page can respond to it.
Making it Happen
In general, working with a WPSC event requires two things:
- Registration for the event
- A function to execute when the event is raised (this is called an "event handler" or a "callback function")
For a help function, you will also want a page to contain the help information. You can create this page any way you like, but you might find it useful to make a Wiki Library for your help files. This makes them easy to update and expand as needed. For purposes of this example, let’s assume you have a Wiki Library called "MyHelpLib", and the primary help page for this topic is "MyHelp.aspx".
- The first thing you need to do is add a Content Editor Web Part to your page. From the Site Actions menu, select Edit Page:
- Select a Web Part Zone, and cick the Add a Web Part link.
- From the Add Web Parts dialog, select the Content Editor Web Part, and click the Add button. (It will probably be in the "Miscellaneous" section)
- Once the part is added, click the "open the tool pane" link in the part:
- Instead of clicking the "Rich Text Editor" button, we’re going to click the "Source Editor" button.
- The Source Editor is just a text entry window, with a Save and a Cancel button.
- The code shown in the screen shot is correct, but here it is in plain-text form, which you can copy and paste into your text-entry window:
- Click Save.
- There is one more change to make before we’re ready to exit edit mode. So that this web part doesn’t show up on the page, you want expand the Appearance section of the task bar, and change the the "Chrome Type" to None.
- Click the Apply button, and the Exit Edit Mode link.






At its most basic, that’s all there is to it! Pressing the F1 key on your page will now summon the help page you defined.
Taking it Further
Of course, that doesn’t prevent you from getting even fancier. For example, you may want to set some parameters so your help window is a certain size, and centered on the screen. Once you have the basics set up the way you like them, you could export the Web Part to a .DWP file, and add it to the site’s Web Part Gallery. Or, instead of using the script in a Web Part, you might put it into a master page, so it is available throughout your site without further intervention.
The following script is one you might place in shared Web Part or a master page. It adds the formatting parameters, but it also uses a variable for the "help context".
<script language="javascript"> var myHelpContext = 'http://www.EndUserSharePoint.com/STP'; function showMyHelpPage() { var width = 800; var height = 500; var left = (screen.width - width)/2; var top = (screen.height - height)/2; var params = 'width='+width+', height='+height; params += ', top='+top+', left='+left; params += ', directories=no'; params += ', location=no'; params += ', menubar=no'; params += ', resizable=yes'; params += ', scrollbars=yes'; params += ', status=no'; params += ', toolbar=no'; newwin=window.open(myHelpContext,'MyApplicationHelp', params); return false; } WPSC.RegisterForEvent("urn:schemas-microsoft-com:dhtml","onhelp",showMyHelpPage); </script>
This myHelpContext variable allows you to override which page is displayed by setting it on individual pages. In a web part, you just edit the myHelpContext variable for the page you are on. If the main script is embedded in a master page, you would just add a Content Editor Web Part (as described above) with a very short script block:
<script language="javascript">
myHelpContext = ‘/MyHelpLib/ThisPageHelp.aspx’;
</script>
In either case, pressing F1 gives that page’s help.
Conclusion
In this article, I have given you a taste of the power available to you with the SharePoint client-side scripting model, and the Content Editor Web Part. We used the event model to provide traditional, F1, Help to your users. But the Web Part Page Services Component (WPSC) gives you access to many other functions as well. You can find many of them documented in the Windows SharePoint Services SDK, and you can see more examples of how to use them in my book. I hope you will take this to heart, and discover even more ways of using the SharePoint client-side programming model!
Professional Microsoft Office SharePoint Designer 2007
Woodrow W. Windischman, Bryan Phillips, Asif Rehmani
ISBN: 978-0-470-28761-3
- Page Sizes and Browser Preview in SharePoint Designer
- Press F1 - SharePoint Help is on the Way
- Book Excerpt: Introduction to "Professional SharePoint Designer 2007"
- On Babies, Bathwater, and SharePoint Designer
- Wiki-in-the-Box - Is SharePoint Wiki Really that Bad?
- A Hidden Gem - the Preview Pane View in SharePoint
- The Office 2010 Synchronization Center
- Binary Free SharePoint Twitter Search Web Part
- SharePoint 2010 - Everything Old is New Again
- SharePoint: On Ends and Means
Hi there. The Content Editor Web Part does not appear in the list of web parts. Is there some way to enable it?
Thanks.
Todd
Todd – The CEWP might be turned of or deactivated at the server level. Talk with your SharePoint server admin, not your site collection manager, to find out what’s up.
Please get back to us and report on your findings.
Thanks,
Mark
You might need to look for it under the Advanced Web Part Gallery and Options. Your administrator may also have disabled it, since (as you can see) it can be a very powerful tool.
Hi – I created the wiki help section using the exact same names and added the cewp with code above but am getting the IE7 help window whenever I hit F1 – same as I would get on this page. Is there another step I need?
The problem is Word converted the quotes within the article as posted. Once you are in your CEWP’s text view, manually re-type the single and double quotes, and all should be well.
Did as you suggested, plus removed another CEWP just to make sure that code wasn’t interfering, and now the desired help page comes up – however, I’m still getting the IE7 help window first…
To suppress the IE7 help window, you need to add one line to the callback:
return false;
Also, don’t forget to add a ; to the window.open function.
thanks for your help – that did the trick.
You’re welcome, Paul.
You mentioned potential conflicts. There is built-in way to minimize the chances of naming conflict. SharePoint has a token called _WPQ_, which you can append to function and variable names you create. This gets replaced at run-time with an identifier unique to the web part. (I cover this in the book, but left it out of the blog post for simplicity.)
Here’s how you might use that in the script:
WPSC.RegisterForEvent(”urn:schemas-microsoft-com:dhtml”,”onhelp”,showMyHelpPage_WPQ_);
function showMyHelpPage_WPQ_() {
window.open(’/MyHelpLib/MyHelp.aspx’,'MyApplicationHelp’);
return false;
}
Is this _WPQ_ token available on all web parts or just CEWPs?
When I insert it into the xslt of my dataview web parts, and do View-Source in my browser, it still shows up as “_WPQ_”. It doesn’t seem to get replaced.
I have updated the main script in the example above to contain the “return false;” line. I also removed a couple of stray break tags while I was at it.
I’ve tested the “Taking it Further” script with a simple cut and paste. It’s working for me in WSS.
Mark
Thanks for the code-formatting update, Mark!
Hi,
Are there any parameters to influence the load speed for the help window?
I’m experiencing a load time of close to 1 min on a local instance of SP. I’d like to demo this functionality but need quicker response time.
Regular help opens in seconds by comparison.
Cheers,
Chris
Hi Chris – that is an unusual issue (at least as regards this script). I’m not seeing it here, so there is probably something unique about your environment.
There are lots of other things that can slow down page rendering, though. How long does your page take to open when you simply enter its URL? Are you using a root-relative URL (starting with a “/” rather than “http”)? If the help is on a different server, perhaps it has had a chance to go “idle” and needs to restart the application in order to render your page. Or, if you are using a proxy, perhaps the new window is trying to clear the proxy before falling-back to local access? Perhaps a phishing filter is causing the delay.
I revisited the page and found that I had 2 web CQWB parts in the page. The first one is the initial code provided, the second was the formatted version.
I removed the cut down simple version and performance is much better.
Not sure why this delayed the load but looks like it is fixed now.
Nice tip.
Wondering if the other keys (F2, F3 etc) can be used as well. I am lloking at a scenario where multiple links on a single page needs separate help pages.
Ofcourse, I can direct them to the main help page using F1 . . however, it would be nice to make it contect sensitive
This works great. I added it to our IT Division SharePoint site. We are currently using WSS #.0 for our Intranet.
This works great. I added it to our IT Division SharePoint site. We are currently using WSS 3.0 for our Intranet.
@sarath Thanks! Unfortunately, this particular event, “onhelp”, responds specifically to F1.
@Frank I’m glad you found it useful!
That is simple and amazing :))
i insert that code in master page layout and F1 call ServiceDesk page.
My boss WOW’s then he sow what..
Thank u! :)
Yes, when I first saw this, I thought it was pretty astounding… I still do. — Mark