Using the Sharepoint 2010 Dialog

The new dialog framework is introduced in the SharePoint new Client OM. You can check the Client OM at http://msdn.microsoft.com/en-us/library/ee535231.aspx. For now, we’re interested in the method SP.UI.ModalDialog.showModalDialog.

How it works?

When the showModalDialog method is invoked the SharePoint adds a div element named “ms-dlgContent”. The dialog contents are rendered from the passed URL. The passed URL can be a link to the web or a custom page. Also, the dialog can open a List Form dialog (Add/Edit). Another div element named “ms-dlgOverlay” disables the user from clicking on the original page and thus, provides the user with a modal dialog.

The showModalDialog method takes 1 parameter; an object of the Class SP.UI.DialogOptions. The option object contains the width and height of the dialog, the URL of the page and the dialog CallBack method name.

Examples:

The Preparation

1. Create a new Layouts page.

2. Add 3 input buttons to the PlaceHolderMain of the ASPX page. The buttons should look something like this

<input type="button" value="Open Google in Popup" id="btnGoogle"  onclick="OpenWebPage();"/>
<input type="button" value="Open My Custom Page" id="btnMyPage"  onclick="OpenMyWebPage();"/>
<input type="button" id="btnAddItem" value="Add Item" onclick="NewItemDialog();" />

3. Add a CallBack method that will be called when the dialog closes, in order to notify the user with the result of the dialog. You can find more info about the SP.UI.Notify.addNotification here

function DialogCallback(dialogResult, returnValue) {
meesageId = SP.UI.Notify.addNotification(returnValue, false);
}

1. Open a link to the web

Set the URL of the options object to the web URL.

function OpenWebPage() {
var options= {
url:"http://www.google.com",
width: 800,
height: 600,
dialogReturnValueCallback: DialogCallback
};
SP.UI.ModalDialog.showModalDialog(options);
}

2. Open a Custom page

We’ll Use the AddCarPage that was created in the previous post. We’ll need to modify the 2 Callback methods of success and failure to the following

function Succeeded() {
SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK,'Item Created');
}
function Failed(sender,args) {
SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.cancel, 'Item Creation Failed');
}

Set the URL of the options object to the AddCarPage.aspx

function OpenMyWebPage() {
var options = {
url: "AddCarPage.aspx",
width: 800,
height: 600,
dialogReturnValueCallback: DialogCallback
};
SP.UI.ModalDialog.showModalDialog(options);
}

3. Open a New Item From

Set the URL of the options object to the NewForm.aspx of the list. Note that you can also use any of the form dialogs.

function NewItemDialog() {
var options = {
url: "http://shaalan:4040/sites/UserExperience/Lists/Cars/NewForm.aspx?RootFolder=",
width: 800,
height: 600,
dialogReturnValueCallback: DialogCallback
};
SP.UI.ModalDialog.showModalDialog(options);
}