1/17/2012

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

              image

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.

image

 

 

 

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.

     image

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:

image

 

The resulting page after the user clicked the hyperlink:

image

 

.

4 comments:

Robert said...

Thanks, I spent a good deal of yesterday trying to figure this out... finally got it working thanks to your post!

Nivee said...

I have a month column which is a choice column in my document library in the format specified below.. For eg. Jan 2013 I have the following requirements 1. The month dropdown should always have only those months which start from 6 months previous of the current month.For eg.If the current month is March 2013 then only the months starting from oct 2012 to march 2013 should be populated in the dropdown 2.There is another column in my document library called 'date' of date format.It is not to be shown in the default view.The date field should automatically be set as the 1st date of the month selected from the month column.For example. IF the month selected is March 2013 .The date Should b 1/3/2013.Can this be done with the help of javascript??A step by step explanation is needed along with the code.. Please Help!!Its urgent.. Any Help is welcome...

Mike Smith said...

Nivee,

> Can this be done with the help of javascript?

Possibly... but not a quick simple script. This could also be done using InfoPath list forms if you have the Enterprise edition of SharePoint.

> A step by step explanation is needed along with the code..

Try posting your question in the TechNet forums:
http://social.technet.microsoft.com/Forums/en-US/sharepointgeneralprevious/threads

http://social.technet.microsoft.com/Forums/en-US/sharepointcustomizationprevious/threads

Mike

Todd Shelton said...

Hi Mike,

You saved me--thanks so much. My demo tomorrow will be smooth because of you.

Note to spammers!

Spammers, don't waste your time... all posts are moderated. If your comment includes unrelated links, is advertising, or just pure spam, it will never be seen.