Since SharePoint 2010, they introduced the modal dialog. This fancy screen is noticed by many and people start thinking in terms of it. So I got a request to make a new site provisioning system where the user gets a link under site actions which opens in a modal dialog. After some google requests I came up on two sites which could help me. First of all Chankaradeep Chandran posted something about ‘Using the SharePoint 2010 Modal Dialog’. Still I got a problem, how to get those files on SharePoint. So I ended up with the second post from a good friend, Jan Tielens. He posted in March an article about ‘Referencing Javascript files with SharePoint 2010 Custom Actions using ScriptSrc’.

I combined the knowledge and insights of both posts into a solution for my problem. First of all you have to start a Project scoped as Farm Solution since we have to publish files into the Layouts folder. This javascript file can be added into the Layouts Mapped Folder very easy.

   1: function google_OpenModalDialog() {

   2:     var options = SP.UI.$create_DialogOptions();

   3:     options.width = 500;

   4:     options.height = 250;

   5:     options.url = "http://www.google.com/";

   6:     SP.UI.ModalDialog.showModalDialog(options);

   7: }

To publish the file in SharePoint, so you can reference methods of it you have to add a CustomAction.

   1: <CustomAction Location="ScriptLink" Sequence="1000"

   2:               ScriptSrc="PlayingWithSiteActions/OpenModalDialog.js">

   3: </CustomAction>

Finally you can add another CustomAction to display a link under Site Actions a reference the javascript method when clicked on it.

   1: <CustomAction Id="SiteActionsToolbar" GroupId="SiteActions" Location="Microsoft.SharePoint.StandardMenu"

   2:               Sequence="1001" Title="Open Google">

   3:     <UrlAction Url="javascript:google_OpenModalDialog();" />

   4: </CustomAction>

Thanks to Jan and Chankaradeep for their part in my research.

Advertisement