Changes to the EPiServer UI dialog system in EPiServer CMS 6

When an EPiServer CMS editor opens a dialog it is usually done by a JavaScript API called EPi.Dialog. This API is responsible for instantiating  the dialog as well as sending data to and from the dialog. In EPiServer CMS 5 and 6 dialogs are created as new windows that are styled as “pop ups”. This is nothing that the user normally is aware of although a user can close the dialog window with the normal close window function in the web browser.

Inline dialogs vs. external dialogs

An inline dialog is created as a part of the existing page and window but styled to look as a pop up dialog. This means that the dialog is technically the same page as it’s “parent” window. In Internet Explorer 8 new windows are run under a separate thread. This can cause race conditions between script running in different windows. The EPiServer Development Team have spent time addressing bugs that are caused by race conditions when closing a dialog, specially if the dialog has made a post back before closing itself.

Dialogs in the Tiny MCE implementation

In the Tiny MCE implementation in EPiServer CMS 6 external dialogs are used when opening built in Tiny MCE dialogs (for instance the insert/edit image dialog). These dialogs works a bit differently than the rest of the dialogs in the EPiServer CMS UI. For instance, it’s possible to access the underlying UI when a dialog is opened. Please note that this behavior is not intentional.

What are the changes we plan to implement?

To address the race condition problems in IE 8 (and new versions of IE and possible other browsers) as well as creating one user experience for editors when using dialogs we would like to rewrite EPi.Dialog to use inline dialogs. Since we are currently working on upgrading Tiny MCE to the latest version (3.3.4 at the moment) we would like to do these changes as the same time.

How will these changes affect my code?

The hypothesis is that these changes will not affect the public API:s for the EPi.Dialog classes. JavaScript code that is executed in a dialog might be affected if it relies on the knowledge that the dialog lives in a separate window. For instance, a call to window.top will return a different object in an inline dialog compared to an external dialog. Resizing the current window size will also work differently with inline/external dialogs.

We are interested in your feedback

We are normally very restrictive with making breaking changes, but since we believe that very few will be affected by this change we would really like to address these issues. If you know that this will affect you, for instance if you are using EPi.Dialog in an EPiServer CMS module, then please reply to these post so that we can this into consideration before making a final decision.