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

Migrating from Skype for Business to Microsoft Teams: A Step-by-Step Guide

Do you still use Skype for Business to meet the communication and collaboration needs of your business? If so, now is the perfect time to think about switching to Microsoft Teams, a cutting-edge platform with cutting-edge capabilities and seamless connectivity with other Microsoft services. But if you're unfamiliar with the procedure, switching to a new platform can seem like a difficult task. I'll walk you through the process of switching from Skype for Business to Microsoft Teams in this article. Plan the migration in Step 1 You must make a plan before you start the relocation procedure. Set a deadline, make a list of all the Skype for Business capabilities you presently use, and choose whether to migrate gradually or all at once. Step 2: Set up your surroundings. Make sure your network and infrastructure fulfil Microsoft Teams' standards. Upgrades to your hardware, software, and licences might be necessary. Additionally, confirm that you have the right permissions to ca
Post a Comment
Read more

How to: Debug SharePoint Applications

You can greatly simplify debugging by using Visual Studio extensions for Windows SharePoint Services. This topic includes procedures that explain the following: Debugging with Visual Studio extensions for Windows SharePoint Services Performing manual debugging Performing remote debugging Debugging with Visual Studio extensions for Windows SharePoint Services Press the F5 key to begin debugging with Visual Studio extensions for Windows SharePoint Services. The following procedure demonstrates how to enable F5 debugging. To enable F5 debugging Locate and open the target SharePoint application's Web.config file. By default, it is located in C:\Inetpub\wwwroot\wss\VirtualDirectories\80. Find the following line of code and change the  debug  attribute to  true . Save the changes to the Web.config file. In Visual Studio, right-click the SharePoint project, and then click  Properties . Click the  Debug  tab, and then type the target SharePoint URL in t
Read more

SharePoint 2010 – How to use Audio and Video Webpart

Video and Audio Web Part [ a.k.a Media Web Part ] is one of the new cool web parts in SharePoint 2010, so in this article I am going to show you the way to add this web part in your page. To add Media web part to the page you must activate those two features 1- SharePoint Server Publishing Infrastructure Feature in Site Collection features 2- SharePoint Server Publishing Feature in Site features After that edit page then click on Insert tab in SharePoint Ribbon then select Video and Audio Now the Media Web Part in the page Click on the Media Web Part and you will find Options Tab in the Ribbon As you can see in the Options tab there are Chang Media button allow you to select the video and Chang Image button to change the image of web part and Styles (Dark, Light) Click on Change Media to select the Media file. From Computer opens up the Upload media so you can upload the video and display it. Once you click ok and saving the page. Click on play button and enj
Post a Comment
Read more