Open a list form dialog from the Quick Launch in SP2010

One of the new cool features to streamline the user interface in SharePoint 2010 is the use of dialog windows, for example when creating or editing list items. Right now I’m on a project for a client where the goal is to create a ticket desk application in SharePoint.

Users should be able to quickly create new tickets without too much clicking through the application. The usual process would be to first navigate to the list itself, click Items under List Tools in the ribbon, expand the New Item button and select the content type of the ticket they wish to create. So that’s 4 steps before they can actually do anything.

Initially I thought, I can add links in the Quick Launch for each ticket content type, so they can reach all options with only one click away. That works obviously, but a problem with this approach is that it just opens the page within the site, not in a dialog window and that’s exactly what makes it look and behave better.

In SharePoint 2010 you can open dialog windows with the following method, available in the client API:

SP.UI.ModalDialog.showModalDialog(options);

More information here: http://msdn.microsoft.com/en-us/library/ff410058.aspx

It takes an object of type SP.UI.DialogOptions as a parameter, which allows you to set the URL, width, height and title of the dialog for example.

So, my initial approach was creating a custom master page in SharePoint Designer, and including a JavaScript method that would take a URL and title as parameters, and then opens the dialog.

function openCreateTicketDialog(formUrl, title)
{
   var options = {
      url: formUrl,
      title: title
   };

   SP.UI.ModalDialog.showModalDialog(options);
}

Apparently, the URL field of a Quick Launch entry doesn’t necessarily have to be a valid URL. You could also include JavaScript in it, which is quite useful for what I’m trying to achieve here. So, for example, you could include the following, which will call the method defined above:

javascript:openCreateTicketDialog('/sites/ticketdesk/Lists/Tickets/NewForm.aspx?IsDlg=1&ContentTypeId=0x0100AE3C77B418BC4C0D9C895BB740C2D7BA0056DC51CECF114FD6B2A7DD64A66C0A45', 'Press Publication');

You see the URL being opened is the new item form of my list, and I’ve included a ContentTypeId parameter to open the proper form and I’ve included the IsDlg=1 parameter, which will open the form in dialog mode. After saving the Quick Launch item and clicking on the newly created link, it indeed opens the form as a dialog!

Now, a potential drawback of this approach is that it requires you to customize the master page. For a scenario where you want as little customisations as possible, you could also perform the following neat little trick, to do away with the new master page:

javascript:function tdql1(){SP.UI.ModalDialog.showModalDialog({url:'/sites/ticketdesk/Lists/Tickets/NewForm.aspx?IsDlg=1&ContentTypeId=0x0100AE3C77B418BC4C0D9C895BB740C2D7BA0056DC51CECF114FD6B2A7DD64A66C0A45', title:'Press Publication'})}tdql1();

What I did here is first declare a method that will actually make the call to the showModalDialog method. I’m using the JSON syntax to declare the object type that’s supplied as the parameter to the method. After the method’s been declared, we’re making the call to it. The reason I’m using a new method, is that when you call SP.UI.ModalDialog.showModalDialog() directly in the Quick Launch URL field, for some reason it just opens a blank page with [object Object()].

This may be a bit of a dirty trick, but it works very well when you want to open a dialog from your Quick Launch directly, without customisations. Do keep in mind that there is a limit to the amount of characters you can enter in the URL field, so the number of options you can supply will depend on the length of your arguments, and vice-versa.

Enjoy!

Be Sociable, Share!

7 thoughts on “Open a list form dialog from the Quick Launch in SP2010

  1. When I put the “javascript:function tdql1(){SP.UI.ModalDialog.showModalDialog({url:’/sites/ticketdesk/Lists/Tickets/NewForm.aspx?IsDlg=1&ContentTypeId=0x0100AE3C77B418BC4C0D9C895BB740C2D7BA0056DC51CECF114FD6B2A7DD64A66C0A45′, title:’Press Publication’})}tdql1();” to URL field of a Quick Launch I have an error “Ensure that the url is valid and begins with either a valid character or a valid supported protocol”. Help me??

  2. What SharePoint version are you using? I have just tested this on another SharePoint 2010 Foundation environment and I’m able to do it there just fine as well. At first I thought that maybe there was a difference between environments, since my development environment is Windows 7 running SP2010 Foundation, but the test environment is a Windows Server 2008 installation and it seems to be working there as well.

  3. FYI…
    I too ran into an issue where the error message “Ensure that the url is valid and begins with either a valid character or a valid supported protocol” was being thrown. I only happened after I turn on SharePoint Server Publishing Infrastructure in the Site Collection features. When you turn on this feature it changes the site level “Quick Launch” to “Navigation”. Navigation prevents the user from adding an “invalid URL” as you put it.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">