Skip to main content

Using the SharePoint 2010 Modal Dialog


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 not 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("
"); 
this.Page.Response.End();
If successful, you will see the following status:
image
If failed, you will see the following status:
image
Labels:

Popular posts from this blog

SharePoint SPFX components basic details and understanding

Microsoft developed SharePoint, a web-based platform that enables businesses and organisations to share and manage documents and information. The SharePoint Framework (SPFx) is a set of client-side tools and components that can be used to construct unique solutions on top of SharePoint. The creation of a SharePoint SPFx component will be covered in this blog. Let's address specific requirements before creating a SharePoint SPFx component. Install the necessary software on your computer: Version 10 or later of Node.js SharePoint Framework (SPFx) generator using Git Now that all the prerequisites have been deployed, let's start developing the SharePoint SPFx component. Start by making a new SPFx project. Making a new SPFx application is the initial step. Launch the command prompt and execute the following commands  yo @microsoft/sharepoint The Yeoman generator for the SharePoint Framework will be started using this command. You will be prompted to enter details about your project...
Post a Comment
Read more

How to deal with SharePoint 2010 exception "An exception occurred when trying to issue security token: The server was unable to process the request due to an internal error"

Scenario: You receive the below exception when you try to logon to a site that has been configured to use Claims Based Authentication with a custom membership provider using FBA credentials: Event ID from Event Log  - 8306 An exception occurred when trying to issue security token: The server was unable to process the request due to an internal error.  For more information about the error, either turn on IncludeExceptionDetailInFaults (either from ServiceBehaviorAttribute or from the <serviceDebug> configuration behavior) on the server in order to send the exception information back to the client, or turn on tracing as per the Microsoft .NET Framework 3.0 SDK documentation and inspect the server trace logs.. Explanation: This error started to appear in our QA environment which does not have Visual Studio installed. I have tried starting the service "Claims to Windows Token Service" but that did not help either. I have made sure that all config...
Post a Comment
Read more

Cascading drop down column in a SharePoint List

This article will show how to use codeplex project to achieve Cascading drop down columns in SharePoint list. This article will show how to achieve parent child relationship in column of SharePoint list.   Objective This article will show how to use codeplex project to achieve Cascading drop down columns in SharePoint list. This article will show how to achieve parent child relationship in column of SharePoint list. Step 1 Download the project from codeplex . Choose WSP file to download. To download the project Click here Step 2 After downloading the WSP add the solution using STSADM command. Navigate to BIN folder and add the solution. Command C:\Program Files\Common Files\microsoft shared\Web Server Extensions\12\BIN> stsa dm -o addsolution -filename c:\Stoneshare.CascadingDropDown.WithFilter.wsp Step 3 Open Central ADMIN and deploy solution. Navigate to Operation -> Global Configuration -> Solution Management. Select the Global Deployment option. St...
Post a Comment
Read more