Monday, 12 July 2010

Sharepoint 2010 Dialogs Framework

Problem: Use the dialog framework to edit information on a SharePoint composite page.
Hypothesis: Dialog framework can open existing pages and pass back values to the calling page. The pass back value can be more than just a simple parameter such as a string. You can return fairly complex flat objects. The example below, displays multiple addresses, allows the user to edit any of them via a modal dialog. and returns the updated address along with the id of the element address to change. To use the dialog framework modals you need SP context so use any of the client OM's or the server OM (i.e. you can't use html unless to load the SP context)
In the parent page inside javascript add the following 2 functions
function OpenDialogAdr(myurl) {
var options = SP.UI.$create_DialogOptions();
options.url = myurl;
options.width = 200;
options.height = 100;
options.dialogReturnValueCallback = CloseCallback;
var dialogSP = SP.UI.ModalDialog.showModalDialog(options);
var messageId;
function CloseCallback(dialogResult, returnValue) {
if (dialogResult === SP.UI.DialogResult.OK) {
var adr = returnValue.adr;
var id =
$("#adr-sales-" + id).html(adr);

Add a link with the appropriate js:
Add the child page, that will return the new address and the id of the item to change.

function onUpdate() {
var adrs = document.getElementById('txtAdr').value;
var ids = document.getElementById('txtId').value;
var mydata = {
adr: adrs,
id: ids
SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, mydata);
function onCancel() {

The dialog framework is good for displaying additional information. It is similar in nature to using jQuery & the lightbox plug in.

Working with SP2010 modal dialogs


Mihir said...

Wonderful post... Thanks

Post a Comment