Staying away from “window.showmodaldialog” in your CRM code

The window.showmodaldialog web API interface from Microsoft has been a subject for discussion for a long time. There are plenty of articles out there arguing why it’s a bad design for the web. This isn’t where I’m trying to go with this article.

The idea behind that method is to create a modal dialog that displays a specified HTML document. This was very useful before the emergence of jQuery and the abundance of jQuery UI libraries that present better alternatives to the showmodaldialog method. In the context of a web based application like Dynamics CRM, the use of jQuery and jQuery UI to create modal dialog windows is trickier. In short, using those libraries to create modal dialogs would be unsupported because in the background, they would be making change to the DOM which is not supported. That is why a lot of CRM applications I have seen use the showmodaldialog method.

Chrome and Firefox have officially deprecated the function and it now falls into the “use at your own risk” category. I wanted to suggest a few alternatives as you upgrade your CRM JavaScript code in the near future.

  • Use the regular window.open method. The hardest part of the job will be to convince your customer that having the possibility to make changes to the parent page is not a big deal (seriously!)
  • If you need to perform an action after the window.open returns, use the new HTML5 “postMessage” API.
    • How it works? Before opening your web resource (window.open or Xrm.Utility.openwebresource), register a method/handler to perform what needs to be done when the web resource closes (that’s an example, it could be on another event in the web resource). In the web resource, when the time has come to trigger the action on the opener page, simply use the window.postMessage function to send a message to the parent page. The message will be picked up by the handler and perform the necessary operation(s).
    • Be careful using this because you might get issues if your browsers does not support this functionality
  • I have not tried this, but fellow MVP Andrii Butenko has found the method that Microsoft uses to display modal windows. You can find his blog post on the subject here. Keep in mind that this method is unsupported.

The bottom line is that the showmodaldialog method was useful in the CRM context and its deprecation from the most popular browser(s) forces us to make adjustments.

Hope this helps!

Advertisements

8 thoughts on “Staying away from “window.showmodaldialog” in your CRM code

  1. Hi Salim, This is a great article. We have been banging our heads on alternatives and were not able to find a solutions. Window.Open in HTML5 does work, however can we keep the cursor stay focued on that window? If the user happen to click somewhere other than that window, wouldn’t the user lose focus on the child window?

    Regards
    Vijay

  2. Hi Vijay,
    You are right, there is no easy/supported way that I know of to make the popup window modal and prevent users from going to the parent window. When you think about it, IE is the only browser that made the showmodaldialog popup modal. Other browsers just display a popup box and you can still make changes to the parent window.
    Creating a custom popup box using jQuery and jQuery UI is another alternative, but it is in theory unsupported. There is an example on how to do it here : http://blogs.msdn.com/b/devkeydet/archive/2012/02/10/showing-a-jquery-ui-dialog-in-a-crm-2011-form.aspx

    Best of luck!

  3. Hi Salim,

    Thanks for this nice post.
    I am wondering if displaying a jquery dialog within an iframe would be supported ?
    Doing so, the DOM of MSCRM form won’t be changed I guess ?
    But not sure about the result.

    Thanks.

    Greg

  4. Hi Again,

    Just checked the result, and this is absolutely not what we want, as dialog is displayed within the iframe, not on the form.

    Cheers

    • Hi Salim,

      Thanks for you tip.
      But this is still unsupported, as there is a $(body).append.
      I’ll continue my search / test / fails to find a 100% supported way, but I’m afraid there is no way.

      Cheers

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s