Create Dialog Box in SharePoint 2010 Pages


SharePoint 2010 has fluent User Interface which allows user to navigate easily. Also Fluent interface avoids post back in the web pages. It has a consistent UI framework to navigate between the pages and toolbars. One of the enhancement which SharePoint 2010 provides is the dialog box. Dialog box are widely used in windows application initially. The SharePoint 2010 dialog boxes also has the callback delegates. Based on the user action the callback function can be fired.

Creating dialog box in SharePoint pages

1. Use the Visual Studio to create a SharePoint Application Page

2. SharePoint 2010 has a js object model built in with it. TEMPLATE\LAYOUTS\SP.js file is the key for all the js api.

3. The js object model consist of a function called Create_DialogOptions. This function is used to create a dialog box

Ex:

function OpenDialog()
{
    var options = SP.UI.$create_DialogOptions();
    options.url = "/_layouts/MyPage.aspx";
    options.width = 300;
    options.height = 300;
    options.dialogReturnvalueCallback = Function.createDelegate(null,MyCallBack);
    SP.UI.ModalDialog.showModalDialog(options);
}

function MyCallBack(result,target)
{
    alert("Dialog dismissed");
}

the url property of the dialog options can be any page which shows the content. It can be even a html page which just displays the content.

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 )

Connecting to %s