12/17/2010

SharePoint: Opening a 2010 Dialog Box from Quick Launch

 

Here’s how to open any page in a SharePoint 2010 popup dialog box from Quick Launch or anywhere else using JavaScript. The key code is from an MSDN article here, but it needed just a little tweaking to work from Quick Launch or an “<A>” tag’s HREF.

 

As a teaser… here’s this site displayed in a SharePoint 2010 dialog box:

image

 

The Code

The MSDN article had this JavaScript example:

var options = SP.UI.$create_DialogOptions();
options.url = url;
options.height = 300;
SP.UI.ModalDialog.showModalDialog(options);

I just needed to modify it so it would work in an HREF of an <A> hyperlink tag. Basically it needed to be in one line and return VOID when called. The following must be typed as all one line!

JavaScript:var options=SP.UI.$create_DialogOptions();
options.url='http://techtrainingnotes.blogspot.com';
options.height = 400;
void(SP.UI.ModalDialog.showModalDialog(options))

 

Now to use it in Quick Launch:

Just go to Site Actions, Site Settings and click Quick Launch. Then click New Navigation Link and add the JavaScript:

image

 

What kind of pages make sense for a dialog box?

It probably does not make much sense to use dialog boxes to display external sites like this one, although it’s better than a Page Viewer Web Part. A better use would be to display any SharePoint page or list/library view and an external report that fits in a popup window.

If you want to display a SharePoint page inside of a dialog box add “?IsDlg=1” to the page’s URL.

Here’s the a normal Shared Documents library page:

image

 

Here’s the same page with “?IsDlg=1” added to the URL:

           http://yourserver/sites/yoursite/Shared%20Documents/Forms/AllItems.aspx?IsDlg=1

image

 

So here’s Shared Documents in a dialog box… notice that you have the ribbon, but not the rest of the master page clutter!

image

 

And as a additional bonus, dialog boxes can be called from within dialog boxes. Here’s the Upload Multiple dialog box being used from the example above:

image

 

Or open a dialog box from a HyperLink

To use in an <A> hyperlink tag:  (again, this is all one line!)

<a
href="JavaScript:var options=SP.UI.$create_DialogOptions();
options.url='http://techtrainingnotes.blogspot.com';
options.height = 400;
void(SP.UI.ModalDialog.showModalDialog(options))"
>
Click here!
</a>

 

Links:

How to: Display a Page as a Modal Dialog Box

http://msdn.microsoft.com/en-us/library/ff798390.aspx

 

How to use JavaScript in Quick Launch

http://techtrainingnotes.blogspot.com/2010/10/sharepoint-javascript-in-quick-launch.html

 

More about the SharePoint JavaScript API

http://msdn.microsoft.com/en-us/library/ee538253.aspx

 

.

14 comments:

Patrick Richard said...

Thanks for sharing this information. I used it to open up a form to add a new item to a list. Very neat and simple.

Anonymous said...

Dude you are great . MSDN Documentation sucks for 2 reasons, 1- they dont post images.
2- They think all reader are top class developers but in reality developers can do this with out there help too

Thanks again for posting this

Mike Smith said...

Fixed a typo... (stuff happens...)

$create_DialogOption
should be
$create_DialogOptions

Shoes said...

This method does not work if you have the Publishing Infrastructure feature active. In this case, you go to Site Settings | Navigation to create the link but it gives an error message when you try to paste the JavaScript. Not to worry. All I did was disable the publishing feature and I was able to add the JavaScript (as advertised) on the Site Settings | Quick Launch page. Then I simply re-enabled the publishing feature.

I did run into a length limitation problem. It appears that the URL is limited to around 245 characters. I was getting an 'unterminated string constant' error trying to paste this script to create a new list item from the Quick Launch:

JavaScript:var options=SP.UI.$create_DialogOptions();options.url='/sites/awesomesite1/_layouts/myCustomCTypePage/NewForm.aspx?List=b14837ab-e880-4878-bcc2-9f10a2dad4c2 &RootFolder=/sites/awesomesite1/Lists/Awesome Activities&ContentTypeId=0x0100E7FA3636A12342D89DBB6F3F4346129700508A407CA79F534E957A03D286163D05 &Source=/sites/awesomesite1';void(SP.UI.ModalDialog.showModalDialog(options))

The browser was hitting an 'unterminated string constant' error at position 245. I removed the RootFolder and ContentTypeId query string entries and the resulting javascript worked:

JavaScript:var options=SP.UI.$create_DialogOptions();options.url='/sites/awesomesite1/_layouts/myCustomCTypePage/NewForm.aspx?List=b14837ab-e880-4878-bcc2-9f10a2dad4c2&Source=/sites/awesomesite1';void(SP.UI.ModalDialog.showModalDialog(options))

Fortunately for my case, this list has only one content type and uses no folders so removing them from the url was not a problem.

Mike Smith said...

Shoes,

> All I did was disable the publishing feature

I always wondered if there were any side effects to doing that. I think that if you had dropdowns in the Top Link Bar (Global nav) that they were lost when you disabled Publishing.


> It appears that the URL is limited to around 245 characters

I'm thinking it's around 254, but it is in that ball park.

There's also a slightly shorter form of creating an object with properties in JavaScript that might save a few bytes. Try this:

JavaScript:void(
SP.UI.ModalDialog.showModalDialog({
url: "/Lists/Announcements/NewForm.aspx",
title: "Add item",
allowMaximize: true,
showClose: true,
width: 800,
height: 600
});
)

Mike

Ria said...

This awesome! Thanks!

Jeffrey McFarland said...

The SP.UI.ModalDialog.showModalDialog method has a property "html"
http://msdn.microsoft.com/en-us/library/ff410058.aspx
How can you use the html property? I tried:

options.html = 'Hello World';

but that did not work. Any suggestions?

Mike Smith said...

Jeffery,

The .html property refers to an HTML element in the page, not an HTML string.

http://www.neilrichards.net/blog/?p=124

There's a nice simple example in one of the posts here:
http://social.msdn.microsoft.com/Forums/en-US/sharepointdevelopment/thread/5abbf121-21f5-497a-88b7-a0288d89c388

Mike

Anonymous said...

Hi ,
Thanks codes works fine.
How can i open a dialog box from a button instead of hyper link?

Mike Smith said...

Put the JS in the onclick event of the button:

<Button onclick="code here" >Click Me<Button>

I.e.:

<Button onclick="JavaScript:var options=SP.UI.$create_DialogOptions();
options.url='http://techtrainingnotes.blogspot.com';
options.height = 400;
void(SP.UI.ModalDialog.showModalDialog(options))" >Click Me<Button>

hi said...

Hi Smith, Ur article is very nice. i am getting an error when i tried to open a dialog box using hyperlik. The error message is"The Ribbon Tab with id: "Ribbon.Read" has not been made available for this page or does not exist.Use Ribbon.MakeTabAvailable(). ". I am trying to open a sharepoint page.. I write this code in webpart.

thanks in Advance

Unknown said...

This may help other user with publishing features turned on http://www.myspblog.com/2011/04/javascript-quick-launch-top-navigation.html

Mike Smith said...

Great tip Charles!

When the publishing features are enabled you cannot add JS to Quick Launch or the Top Link Bar using the "Navigation" option in Site Settings. Charles' article has the links to the non-Publishing Quick Launch and Top Link Bar editing pages, which still work in a publishing site!

Mike

Unknown said...

Your piece of code works as well with SP 2013 but I would recommend to respect HTML standards and best practices like not using javascript in href property; so the code could look like this:

<a
href="http://techtrainingnotes.blogspot.com" onclick="var options=SP.UI.$create_DialogOptions();
options.url=this.href;
SP.UI.ModalDialog.showModalDialog(options);return false"
>Click here!</a>

this way you have not issue with limit on URL length and your click stay compatible with default feature like "Open in new Tab", bookmark Link, etc

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.