Using SP.UI.ModalDialog in SharePoint 2010

I mentioned in a previous post how to¬†use a ModalPopupExtender in a SharePoint webpart class. However if you are looking for primarily ‘client side’ functionality, you can also use the SP.UI.ModalDialog class. I find this class very useful when creating visual webparts in SharePoint 2010 that require some sort of administrative feature or user feedback. In fact, if you look at the SharePoint 2010 architecture, you’ll notice that Microsoft have tried to avoid moving you to different pages in favor of the modal view. The SP.UI.ModalDialog class is accessible through the SharePoint JavaScript file called SP.UI.Dialog.js which is located in the layouts directory. Here is an example of how you can quickly get the SP.UI.ModalDialog class working in your code:

First we create the JavaScript function that will open up the new modal view. Notice I’m passing variables to the function for the file path, width and height. I did this so I can reuse the function for a variety of modal view calls for different purposes.

functionModalDialog(FormPath, FormWidth, FormHeight) {
varoptions = SP.UI.$create_DialogOptions();
options.url = FormPath;
options.width = FormWidth;
options.height = FormHeight;
options.allowMaximize = false;
options.dialogReturnValueCallback = Function.createDelegate(null, CloseCallback);
SP.UI.ModalDialog.showModalDialog(options);
}

We now need to create our call back method called ‘CloseCallback’ as mentioned in the above function. This method will be used to capture the results of the modal and perform some sort of confirmation action.

functionCloseCallback(result, returnValue) {
alert(‘dialogResult’ + result + ‘nreturnValue’+ returnValue);

if(result == SP.UI.DialogResult.OK)
{
SP.UI.Notify.addNotification(‘You chose the OK button’);
document.title = returnValue;
}

if(result == SP.UI.DialogResult.cancel)
SP.UI.Notify.addNotification(‘You chose the Cancel button’);
}

You’ll see from the above method that we provide an alert with the full feedback of the modal and then utilize the SP.UI.Notify class to provide additional methods of feedback.

Now all we need to do is add an onClick of onClientClick event to an object in your code.

onclick=”ModalDialog(‘/_layouts/TestPage.aspx’,’420′,’300′)”

This is a quick introduction, but it should be enough to get you going with the SP.UI.ModalDialog class.

About

Strategic Knowledge Management Leader focused on Knowledge Management, Client Relationship Management, Business Process Management, Business Intelligence, Web Development, Application Architecture and Database Architecture.

Tagged with: , , , ,
Posted in .NET, MS SharePoint
One comment on “Using SP.UI.ModalDialog in SharePoint 2010
  1. Raju says:

    Thanks for sharing such a good post…

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>