Modal Dialogs in the EPiServer UI for Non-IE Browsers

Contents

• Creating a Modal Dialog
• The CreateDialog Method
• Example

The way modal dialogs are created and opened in EPiServer has changed in EPiServer CMS 5. Previous versions of EPiServer made use of Microsoft Internet Explorer specific code to open modal dialogs. We have not removed this code from /Util/javascript/common.js but when developing for the UI in EPiServer CMS 5 we recommend another approach to be able to open dialogs in other browsers as well. 

Creating a Modal Dialog

To create a modal dialog in the EPiServer UI we use an object called EPi.Dialog and especially the EPi.CreateDialog() function (located in /UI/javascript/system.js). The EPi.Dialog class needs

• /UI/javascript/system.aspx
• /Util/javascript/episerverscriptmanager.js and
• /App_Themes/Default/Styles/system.css

to be registered as well. Using the Master page file EPiServerUI.Master will make sure these javascript, and css files are registered for you.

The CreateDialog Method

EPi.CreateDialog(url, callbackMethod, callbackArguments, dialogArguments, features);

Parameters:

url
Path to the file to open in a dialog, required.

callbackMethod
(Function | null)
In the callbackMethod you write the javascript js code you want to execute when the dialog is closed. This function is passed two arguments. The first is the returnValue of the dialog, the second is the callbackArguments described next.

callbackArguments
(Variant | null)
Variant that specifies arguments to use in the onComplete function when returning/closing the dialog. Use this parameter to pass a value of any type to callbackMethod.

dialogArguments
(Variant | null)
Variant that specifies the arguments to use when displaying the dialog. Use this parameter to pass a value of any type to the dialog.

features
Optional. Object that specifies the dialogs position and size in pixels, if the window should be resizable and if it should allow scrolling.

Example: {width: 400, height: 300}

The following values are valid by default

• width : intWidth|sWidth
• height : intHeight|sHeight
• left : intLeft|sLeft
• top : intTop|sTop
• scrollbars : "yes"|"no"
• resizable : "yes"|"no"

Default is width:510, height:500, resizable:"yes", scrollbars:"yes". Position is centered in opening window.

Example

function OpenChangeNameDialog(name)
{
    var url = "/path/to/ChangeNameDialog.aspx";
    var callbackMethod = OnMyDialogClosed;
    var dialogArguments = callbackArguments = name;
    var features = {width: 400, height: 300};
 
    EPi.CreateDialog(url, callbackMethod, callbackArguments, dialogArguments, features);
}

function OnChangeNameDialogClosed(returnValue, callbackArguments)
{
    if (returnValue == null)
    {
        alert("Decided to cancel changing name.");
    }
    else
    {
        alert("New name: " + returnValue + "\n Old name: " + callbackArguments;
    }
}

OpenChangeNameDialog("John Doe");
We use the OpenChangeNameDialog() method to open up a new window and load ChangeNameDialog.aspx into it. When closing the window the OnChangeNameDialogClosed is called.

The ChangeNameDialog.aspx is a very simple page with a textbox with id=”inputName” and one Ok button and one Cancel button with onclick event handlers attached. The /UI/javascript/system.js is also required. We also have the following javascript.

function Initialize()
{
    var dialogArguments = EPi.GetDialog().dialogArguments;
    document.getElementById("inputName").value = dialogArguments;
}

function OkClick()
{
    var returnValue = document.getElementById("inputName").value;
    EPi.GetDialog.Close(returnValue);
}

function CancelClick()
{
    EPi.GetDialog().Close();
}

EPi.AddEventListener(window, "load", Initialize);

The Initialize function should be executed when the document is loaded. In this example we use the EPi.AddEventListener function to add an eventlistener to the load event. In Initialize we use the EPi.GetDialog() function (located in /UI/javascript/system.js) to get the dialog object and dialogArguments property. In this example we have defined dialogArguments as a string, a natural choice since that is what we are passing to the dialog. If we were to pass more than one value, we could pass the values in an array, or as properties in an object.

We then set the initial value of the textbox: John Doe.

When the user has changed the value of the textbox and clicks the Ok button we execute the OkClick() function where the new value is passed back to the EPi.Dialog object using EPi.GetDialog.Close(returnValue); This closes the dialog and calls our callbackMethod,  OnChangeNameDialogClosed().

In OnChangeNameDialogClosed we simply take one action if the user clicked Ok and another if the user closed the window another way.

See Also

››  Non IE External editor

Comments

Debasish Banerjee Apr 20, 2012 02:15 PM

Need Help,

I used CreateDialog () to open filemanager dialog box.

Below is my code----------------------

var dialogUrl = '<%=episerver.urisupport.resolveurlfromuibysettings("edit filemanagerbrowser.aspx")%>';

var linkAttributes = new Object();

var dialogArguments = linkAttributes;
var features = {width: 600, height: 412};
var callbackArguments = new Object();
callbackArguments.postbackCtrlId = "<%= somearg.clientid %>";
/* callbackArguments.postbackCtrlId = postbackCtrlId;

opens the filemanagerbrowser dialog */
EPi.CreateDialog(
dialogUrl,
OnFileDialogClosed,
callbackArguments,
dialogArguments,
features);


but i am getting error in fire bug

EPi.CreateDialog is not a function.

Any Idea ? Im using cms 6 r2

Santosh Achanta Dec 3, 2012 05:27 AM

Good post Henrik, This is of a lot of help to me while I am trying to rewrite a custom property from CMS 4 to 6. Cheers!