in SharePoint 2010

Using the SharePoint 2010 Modal Dialog

UPDATE: If you are looking for a sample, please read this blog post – Modal Dialog Box in SaharePoint Sandbox

SharePoint 2010 introduces the new dialog framework which helps users stay in context of the page without navigating away from the page. Yes, the modal dialogs that pop up:

image

The JavaScript client object model provides the SP.UI.ModalDialog class to work with the dialog framework.

In order to work with the dialog framework, we need to first create the dialog options:

var options = SP.UI.$create_DialogOptions();
options.width = 500;
options.height = 250;
options.url = "/_layouts/StandardsPortal/ChangePassword.aspx";
options.dialogReturnValueCallback = Function.createDelegate(
                    null, portal_modalDialogClosedCallback);

As you can see from the above code, we set options on width, height and what is the URL the modal dialog should load. In this case, an Application Page. Notice that we also initialize the callback.

Once the options are set, you can now show the modal dialog:

SP.UI.ModalDialog.showModalDialog(options);

Now warp this code into a function:

function portal_openModalDialog() {
    var options = SP.UI.$create_DialogOptions();
    options.width = 500;
    options.height = 250;
    options.url = "/_layouts/StandardsPortal/ChangePassword.aspx";
    options.dialogReturnValueCallback = Function.createDelegate(
                        null, portal_modalDialogClosedCallback);
    SP.UI.ModalDialog.showModalDialog(options);
}

You can now call this JavaScript function from your custom action or from web part or from your custom page or from your custom Ribbon button. Below is the custom action XML:

<CustomAction
   Id="{F93B1F84-1DBE-4C10-82E3-2CA47346359E}"
   Title="Change Password"
   Description="Change your password"
   Sequence="1000"
   Location="Microsoft.SharePoint.StandardMenu"
   GroupId="PersonalActions"
   ImageUrl="~sitecollection/_layouts/images/menulistsettings.gif">
   <UrlAction Url="javascript:portal_openModalDialog();"/>
</CustomAction>

Notice how we invoke the JavaScript dialog:

<UrlAction Url="javascript:portal_openModalDialog();"/>    

Below is the dialog callback code (very simple actually):

function portal_modalDialogClosedCallback(result, value) {
    if (value == '1') {
        this.statusId = SP.UI
            .Status
            .addStatus("Password Changed",
               "Your password has been changed. Use it next time when you log in.",
                true);
        SP.UI.Status.setStatusPriColor(this.statusId, "Green");
    }

    if (value == '0') {
        this.statusId = SP.UI
            .Status
            .addStatus("Password Change Failed",
                "Your password has <b>not</b> changed. Please try again.",
                true);
        SP.UI.Status.setStatusPriColor(this.statusId, "Green");
    }

    setTimeout(RemoveStatus, 6000);
}

function RemoveStatus() {
    SP.UI.Status.removeStatus(this.statusId);
}

As you can see, I pass a single value back and now I can check and show status based on that value. You can also check for the dialog result using SP.UI.DialogResult.OK and SP.UI.DialogResult.cancel properties:

 function CloseCallback(result, value) {
        if(result === SP.UI.DialogResult.OK) {
            alert("OK was clicked!");
        }
        if(result === SP.UI.DialogResult.cancel) {
            alert("Cancel was clicked!");
        }
 }

Showing a status is very simple using the SP.UI.Status.addStatus method.

Now, after deploying when you click on the Change Password custom action

image

You get the modal popup dialog opening the Application page URL set in the dialog options:

image

To wire the Modal Dialog ‘OK’ and ‘Cancel’ code, we write the appropriate code in the ‘Change Password’ button click & ‘Cancel’ button click:

this.Page.Response.Clear();
this.Page.Response.Write("
<script type="text/javascript">window.frameElement.commonModalDialogClose(1, 1);</script>");
this.Page.Response.End();

If successful, you will see the following status:

image

If failed, you will see the following status:

image

Write a Comment

Comment

Time limit is exhausted. Please reload the CAPTCHA.

16 Comments

  1. Hello, are you able to provide the source code for the above solution, I am new to SharePoint Development and would like to have a look at the structure of the solution in full.
    Thanks

  2. [quote]@Matt – I will put up the source in a weeks time. Thanks[/quote]Hi Chak
    Any update on this.
    Thanks

  3. Hi Chakradeep,
    This is a great article and more than what am searching for.
    Now I need to customize the look and feel of Dialog (eg. Change the header image, close button, border style).
    – Venkatesh R

  4. More than UI.Status, I prefer UI.Notify. It’s very cool and simple.

    Here the JS code. Add under function portal_modalDialogClosedCallback(result, value)

    SP.UI.Notify.addNotification("The application has been added to your Selection.", false);

  5. Great Idea !!!! Thanks πŸ™‚
    this.Page.Response.Clear();
    this.Page.Response.Write(”
    window.frameElement.commonModalDialogClose(1, 1);”);
    this.Page.Response.End();
    Very Fruitful for me …

    πŸ™‚ πŸ™‚ Thanks Guys πŸ™‚