Adding JavaScript to a SharePoint 2010 Wiki, and other Wiki Tips and Tricks

 

The SharePoint 2010 Wiki has a few interesting changes… some I personally think are oversights, some are SharePoint trying to keep you “out of trouble”.

Some of things I will look at here:

• Why can’t I see a list of all of the Wiki pages?
• The Rename Page button in the Ribbon is grayed out!
• How can I insert JavaScript and other content not supported by the Ribbon? 

 

Why can’t I see a list of all of the Wiki pages?

Well… you can, if you know where to look! To see all of the pages you must:

• Display any Wiki page (“Home” for example)
• Click the Page tab in the Ribbon
• Click View All Pages

             

You could also just navigate directly to the AllPages page:

http://yourserver/sites/Training/YourWiki/Forms/AllPages.aspx

As neither of the above is going to be intuitive to your Wiki users you may just want to add a hyperlink to the home page of your Wiki called Index or Table of Contents.

 

 

 

The Rename Page button in the Ribbon is grayed out!

You have to be in the Edit mode before you can rename a page.

• Display the Wiki page
• Click the Page tab in the Ribbon
• Click Edit
• then click Rename Page

Warning: Exiting Wiki links to this page will get updated. For example, my original link was “Other Resources”. When I renamed the page to “SharePoint Blogs” the other pages where updated from [[Other Resources]] to [[SharePoint Blogs|Other Resources]].

 

 

Adding JavaScript to a Wiki Page

Let’s say you wanted to add a hyperlink to you wiki that links to an external page, and your corporate policy says that you must warn users that by clicking the link they are leaving the safety of your site. Just about every way of adding JavaScript to a Wiki page gets intercepted by SharePoint and the “offending code” is striped out.

    

I even got creative and tried:

• Editing the page in the browser and using the HTML button in the Ribbon
• Editing the page in SharePoint Designer
• Opening the page source from SharePoint Designer using Notepad, and then saving directly to the Wiki library

In all of these, SharePoint stripped out <script> blocks and converted hyperlinks with JavaScript to useless tags. For example:

   <a href="JavaScript:alert ('hello')"> say hello</a>

got converted to:

   <a>say hello</a>

 

The solution, like so many JavaScript tricks, uses the Content Editor Web Part.

In the example below I have a Wiki page for SharePoint blogs. For each blog I want to have a link to Bing to search for articles from each blog. These links must also display a warning about leaving the site.

The hyperlink looks like this:

Go search <a href="javascript: if ( confirm('This web site is external to the company and may not be safe!') ) { document.location='http://www.bing.com/search?q=site:techtrainingnotes.blogspot.com'; }">Bing</a> for more on this blog!

 

Steps:

1. Edit the Wiki Page (display the page, click the Page tab in the ribbon and then click Edit)
    
2. Click where you need the link, and then from the Insert tab in the ribbon click Web Part
    
3. Click the edit dropdown on the web part and click Edit Web Part
    
4. Click in the Content Editor’s text area and then click the HTML button in the ribbon
    
5. Add your JavaScript, save and test

The Content Editors:

 

The resulting page after the user clicked the hyperlink:

 

.