A dive into the SharePoint 2010 SP.UI.ModalDialog ECMAScript Class Library

I’m pretty interested in the ECMAScript class library of the SharePoint 2010, since, the documentation isn’t available on MSDN yet. I’ll try and explain the SP.UI.ModalDialog  methods.

Method Description Return Value
showModalDialog (options). The method will basically open a dialog with the a specified URL. The parameter SP.UI.DialogOptions though is very handy. It has some useful parameters. The URL of the page to be displayed in the dialog, the dialog title, the width and the height of the dialog. Also you can choose whether you want to show or hide the close and maximize buttons.
You can use the return object value to get the current URL,title, and the HTML of the dialog, Also you can check if the dialog was closed, and get the return value.
object of type SP.UI.ModalDialog
commonModal DialogClose (dialogResult, returnVal) The method is used within the dialog to close it. The method calls the DialogCallback method specified while opening the dialog and passes the 2 parameters to the callback method. The dialogResult which is an enumeration of type SP.UI.DialogResult with 3 values OK,Cancel, and Invalid. The other parameter is a return value of type object. void
OpenPopUpPage (URL, callback, width, height) Opens a dialog with the specified values but the difference is that you have less control over the dialog. void
ShowPopupDialog (url) Opens a dialog with the specified URL. It does the auto sizing for you. But you have no other control on the dialog. void
commonModal DialogOpen (url, options, callback, args) Opens the dialog with the URL and options passed parameters. Note that the values specified in the method call will override the values specified within the options void
showWaitScreenSize (title, message, callbackFunc, height, width) Opens a dialog and displays the default progress image of the SharePoint. When closed, the callback method is called. object of type SP.UI.ModalDialog
showWaitScreen WithNoClose (title, message, height, width) Opens a dialog and displays the default progress image of the SharePoint. The close button is hidden. object of type SP.UI.ModalDialog
RefreshPage (dialogResult) Refresh the page after closing the dialog. void

Example of using the SP.UI.DialogOptions:

var options = {
url: "AddCarPage.aspx",
title: "Custom Add Page",
showClose: false,
allowMaximize: false,
autoSize: true,
// width: 800,
// height: 600,
dialogReturnValueCallback: DialogCallback
};
dlg = SP.UI.ModalDialog.showModalDialog(options);

Advertisements

One Response to A dive into the SharePoint 2010 SP.UI.ModalDialog ECMAScript Class Library

  1. emenu says:

    Here a good link that provide details about the Model Dialog of Share Point 2010

    http://www.a2zmenu.com/SharePoint/SharePoint%202010%20Model%20Dialog.aspx

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: