Using SP.UI.ModalDialog in SharePoint 2010

Using SP.UI.ModalDialog in SharePoint 2010

If you are looking for primarily ‘client side’ functionality, you can 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.

Comments are closed.