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. You could also consider using this video chat api.

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!

•