Working with SharePoint 2010 modal dialogs

A new feature of SharePoint 2010 is the modal dialog which resembles the classic LightBox behavior. This allows us to add and edit items, manage meta data and perform administrative tasks within the context of a page without leaving the page.

 

Fig. 1: SharePoint 2010 modal dialog

The code uses the client library SP.UI.ModalDialog and the method showModalDialog which can be called directly from the page as:

   1:    function test() { 

   2:         //debugger; 

   3:         SP.UI.ModalDialog.showModalDialog({ 

   4:             url: "/Lists/Announcements/NewForm.aspx", 

   5:            title: "Add item", 

   6:            allowMaximize: true, 

   7:           showClose: true, 

   8:            width: 800, 

   9:            height: 600, 

  10:            dialogReturnValueCallback: silentCallback 

  11:        }); 

  12:    }; 

  13:     

  14:    function silentCallback(dialogResult, returnValue) { 

  15:    } 

  16:     

  17:    function refreshCallback(dialogResult, returnValue) { 

  18:         SP.UI.ModalDialog.RefreshPage(SP.UI.DialogResult.OK); 

  19:    }

The ModalDialog takes an option structure of SP.UI.DialogOptions. At the moment there is no MSDN documentation around this, but keep looking at the documentation at http://msdn.microsoft.com/en-us/library/ff408909(v=office.14).aspx.

The code opens a new modal lightbox dialog in the “dialog” display mode. The SharePoint page that we want to load will have the usual master page. This will not be needed in a modal dialog, so the scripts appends the parameter IsDlg=1 to the URL.

Regular “NewForm.aspx”

Using “IsDlg=1”