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);
}

Advertisements

9 Responses to Using the Sharepoint 2010 Dialog

  1. Elizabeth says:

    Any idea on how to localize the title of a sharepoint 2010 dialog window?

  2. abhi says:

    Hello, I am using following function:
    function openDialog() {
    var options = {
    url: “../../Lists/User%20Stories/DispForm.aspx?Id=1”,
    width: 800,
    height: 600,
    title: “User Story”,
    };
    SP.UI.ModalDialog.showModalDialog(options);
    }
    I am trying to get dynamic id as paramert to pass throught this function. any idea

    • hecgam says:

      For my SP site, I created a text box where i can input the id number and it will open a modal with this info

      here is the URL part

      URL: /xxxxx/DispForm.aspx?ID=”+document.getElementById(‘IdBox’).value

      the text box code is this

      hope this helps.

  3. Philipp says:

    I encountered a strange problem. When I tried to open a modal popup just like you, the window open for about a second and disappeared again. The return callback is never called.
    Any ideas?

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

  4. Philipp says:

    Hi,

    Maybe that was just a rookie mistake, but maybe it helps others to save some time:
    I had an asp-Button and on client click I called the OpenWebPage-function, which was exactly the same as described above.

    The result was that the dialog showed up and disappeared after less than a second.
    Later I found out, that the button-click did not only invoke the client function, but also fired a postback. After I noticed that I just had to prevent the button from firing a postback:

    Hope to help someone.

  5. One thing might worth mentioning is that if you didn’t specify the width and height, SP will try to guess these…

  6. Kristopher says:

    Thanks for sharing your thoughts on %meta_keyword%. Regards

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: