10/02/2010

SharePoint: JavaScript in Quick Launch and Top Link Bar!

 

Update: SharePoint 2010 users can use these same techniques to display a page in a SharePoint dialog box. See here: http://techtrainingnotes.blogspot.com/2010/12/sharepoint-opening-2010-dialog-box-from.html

 

Pretty scary! After five years of working with SharePoint 2007 I’m still finding new tricks! (Yes, 12,000 people probably have already found this… but I just did!)

 

Did you know….

                                      you can put JavaScript in Quick Launch and Top Link Bar links?

 

Should have been obvious (hit’s self in head).  Where you can have “http://” you can generally have “JavaScript:”.

Example:

            <A HREF=”http://www.maxtrain.com”>  Click here </A>

            <A HREF=”JavaScript:alert(‘hi there!’)”>  Click here </A>

 

Before you go on… this works in SharePoint 2007 and SharePoint 2010, in both Quick Launch and Top Link Bar, but only in non-publishing based sites. (see the end of this article)

 

 

JavaScript in Quick Launch!

For a quick test… go to Site Actions, Site Settings, Quick Launch and add this bit of JavaScript in the URL box:

JavaScript:alert('Hello world!')

(Note: Although “JavaScript” can also be “javascript”, most everything in JavaScript must be in the correct case. You must type “alert” in all lower case.)

image

 

Now test it:

 

image

 

Now what can you do with this?

 

My head overflows with ideas!  Here’s three to start with:

  • Prompt a user before going to a page or site (“Are you sure you …”)
  • Open a link from Quick Launch or the Tabs in a new window
  • Change page languages (in SP 2010)    see here

 

Prompt user before going to a link:

 

Here’s the normal link found in Quick Launch for the Calendar: 
         “/sites/training/secure/Lists/Calendar/calendar.aspx”

image

 

Here’s a link that will prompt to see if you really want to go to the calendar: (all one line!)

JavaScript:if (confirm('do you really want to see the calendar?'))
document.location='/sites/training/secure/Lists/Calendar/calendar.aspx';

image

 

image

 

 

Here’s a more practical link that will prompt to see if you really want to go to an external site: (all one line!)

JavaScript: if ( confirm('This web site is external to the 
company and may not be safe!'
) )
document.location='http://www.google.com';

image

 

Open a link from Quick Launch or the Tabs in a new window

 

javascript: void(window.open('http://www.google.com'));

This example is in SharePoint 2010:

image

 

 

Where does it not work?  Publishing sites!

 

While this trick works from Team Sites and other non-publishing sites, it does not work form an site with the Publishing features enabled. (How do you know? Go to Site Actions, Site Settings, and see if you have “Quick Launch” or “Navigation”.  “Navigation” is for publishing sites.

The problem is the editor popup. It’s checking for things like “http://” and “mailto:” and not accepting “JavaScript”.

 

image

 

 

.

14 comments:

Iain Wyatt said...

Just what I needed - thanks.

DirkL said...

Thanks a bunch. I had it working, but the original page then should 'null'. But using "javascript: void..." did the trick.

Anonymous said...

Fantastic and so simple! I did not know you can place JavaScript as the web address for a link in the quick launch menu. Great job and many thanks!

Anonymous said...

Thanks for this! Also...even with publishing sites where you have the Navigation link under Look and Feel you can still use this. in address bar go to http://< yoursite >/_layouts/quiklnch.aspx.
On that page there is no editor popup so you don't have to worry about the javascript getting rejected.
Worked a treat for me no matter what kind of site I have.

Anonymous said...

Just what I needed ! Perfect!

Clem said...

This also does not work in SP2010. Tried in a wiki page. No soup!

Mike Smith said...

Clem,

It will work in 2010 where stated, Quick Launch for example (in a non-publishing site).

It works where SP will let you enter a URL that starts with something other than "http://". One approach is to click the HTML button in the Ribbon and enter a hyperlink. But, the wiki does not allow this... notice the "The HTML source might have been modified" message when you save HTML edits. This is an example of SharePoint "trying to keep you out of trouble" by blocking certain edits.

So, it works in some places in 2007 and 2010 and does not work in others, in both 2007 and 2010.

Mike Smith said...

Clem,

I have a possible work around for you... Add a Content Editor Web Part to the Wiki page and add the JavaScript there. Works fine with one exception, the text in the web part is displayed in its own line. I.e. you cannot add this JavaScript in the middle of a paragraph.

Check back later today and I'll post a new blog article with a step by step.

Mike

Mike Smith said...

Clem,

See if this helps:

http://techtrainingnotes.blogspot.com/2012/01/adding-javascript-to-sharepoint-2010.html

Mike

Veronique Palmer said...

Awesome Mike,thanks. I must be the 12millionth person to find out then. ;) But I don't code.

Do you have any more end user friendly examples available of what you could make with copy and paste code?

Mike Smith said...

Veronique,

> Do you have any more end user friendly examples available of what you could make with copy and paste code?

1) Go to SharePoint Saturday events! (I saw that you had a SPS link on your blog!)

2) Google/Bing "Content Editor Web Part", "Codeless SharePoint" or "SharePoint JavaScript tricks"

3) If all else fails... buy a copy of my book... :-)

Mike

Anonymous said...

I need to add a link on top link bar to open the outlook client to send an email. How do I add a mailto link on top link bar in SharePoint 2010?

Mike Smith said...

Anonymous,

Just enter the URL as:

mailto:name@domain.com

Optionally add a subject and body:

mailto:name@domain.com?subject=This is the subject&body=This is the body text

Mike

Anonymous said...

Mike thank you! going to buy your book

anonymous thank you for telling us that you can do it from here without turning publishing features off!
http://your site/_layouts/quiklnch.aspx

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.