Need to open up a webresource as modal in Dynamics 365 on-premise V9.0. Wondering how can you do since Xrm.Navigate.navigateTo is not available still on-premise? Dialog boxes with a little tweak can help you do that even in On-premise. Check this out!

When I came across this post by Bob Guidinger, I was like WOW! What an article and what a discovery. I could vouch that the most experienced of CRM consultants would envy to write a post like this.

And guess what, no sooner than I wrote this post came the requirement where I needed to use it as well.

So the customer is on-premise V9+ and they want modal dialogs to show their webresources. This functionality is absolutely imperative for them and on top of that, they are already in UCI. So even the unsupported Xrm.Internal.openDialog won’t bail us out here.

And then when nothing seemed to work out, I remembered this great post once I read. I would strongly recommend to read the post I referred above even before continuing with this since I am going to take forward the same concepts here.

To show the HTML webresources in modal dialog, the first thing I did was create a Dialog box called – Popup Dialog with the below XML

<Dialogs>
     <Dialog>
       <LocalizedNames>
         <LocalizedName description=”Popup Dialog” languagecode=”1033″ />
       </LocalizedNames>
       <Descriptions>
         <Description description=”Shows the custom dialog process.” languagecode=”1033″ />
       </Descriptions>
       <FormId>{FBEBB959-E1D6-4952-B26D-4E684F3A5FF9}</FormId>
       <UniqueName>PopupDialog</UniqueName>
       <IsCustomizable>1</IsCustomizable>
       <IntroducedVersion>1.0.0.0</IntroducedVersion>
       <IsTabletEnabled>1</IsTabletEnabled>
       <CanBeDeleted>1</CanBeDeleted>
       <FormXml>
         <forms type=”dialog”>
           <form>
             <formparameters>
               <querystringparameter name=”webresource_name” type=”SafeString” />
             </formparameters>
             <tabs>
               <tab name=”global” verticallayout=”true” id=”{267E2B6F-7FF7-4657-8B1B-EFD9EEE309DA}”>
                 <labels>
                   <label description=”” languagecode=”1033″ />
                 </labels>
                 <columns>
                   <column width=”100%”>
                     <sections>
                       <section showlabel=”false” showbar=”false” IsUserDefined=”0″ id=”B3024CD2-8073-4DC3-9AAE-52F4563C7DB2″>
                         <labels>
                           <label description=”General” languagecode=”1033″ />
                         </labels>
                         <rows>
                           <row>
                             <cell id=”{d7913827-57c6-bbb0-651e-063baaaa60c3}” showlabel=”false” colspan=”1″ auto=”false” rowspan=”5″>
                               <labels>
                                 <label description=”ModalDialog” languagecode=”1033″ />
                               </labels>
                               <control id=”IFRAME_ModalDialog” classid=”{FD2A7985-3187-444e-908D-6624B21F69C0}” isunbound=”true”>
                                 <parameters>
                                   <Url>https://blank</Url>
                                   <PassParameters>true</PassParameters>
                                   <Security>false</Security>
                                   <Scrolling>never</Scrolling>
                                   <Border>false</Border>
                                   <ShowOnMobileClient>false</ShowOnMobileClient>
                                   <Height>600</Height>
                                 </parameters>
                               </control>

                     <events>
                                <event name=”onload” application=”false”>
                                  <dependencies />
                                </event>
                                <event name=”onreadystatecomplete” application=”false” active=”false”>
                                  <Handlers>
                                    <Handler functionName=”onSuccess” libraryName=”new_/Scripts/PopupDialog.js” handlerUniqueId=”{d9c01110-cd86-a3a9-27dc-9138d8e9d90c}” enabled=”true” parameters=”” passExecutionContext=”true” />
                                  </Handlers>
                                </event>
                              </events>
                             </cell>
                           </row>
                         </rows>
                       </section>
                     </sections>
                   </column>
                 </columns>
               </tab>
             </tabs>

            <events>
               <event name=”onload” application=”false” active=”false”>
                 <Handlers>
                   <Handler functionName=”isNaN” libraryName=”new_/Scripts/JQuery-3.4.1.min.js” handlerUniqueId=”58E1B8E6-EE99-40B4-AA5A-FB64D9D4A3F1″ enabled=”true” parameters=”” passExecutionContext=”false” />
                   <Handler functionName=”onLoad” libraryName=”new_/Scripts/PopupDialog.js” handlerUniqueId=”{124A0213-CE38-4F33-93C9-7D2B2BD83006}” enabled=”true” parameters=”” passExecutionContext=”true” />
                 </Handlers>
               </event>
             </events>
             <clientresources>
               <isvresources>
                 <clientincludes>
                   <webresource type=”jscript” path=”$webresource:new_/Scripts/JQuery-3.4.1.min.js” />
                   <webresource type=”jscript” path=”$webresource:new_/Scripts/PopupDialog.js” />
                 </clientincludes>
               </isvresources>
             </clientresources>

           </form>
         </forms>
       </FormXml>
     </Dialog>

It’s a pretty lengthy XML but I have highlighted all the important areas. The unique name of the dialog is PopupDialog (highlighted in green)

In my system I already uploaded couple of webresources – new_/scripts/jquery-3.4.1.min.js and new_/scripts/PopupDialog.js. On load of the Dialog, the onLoad function defined in the PopupDialog.js shall fire (highlighted in yellow)

Also observe carefully that I have inserted a iFrame (highlighted in gray). And on readystatecomplete event of the iFrame, I have registered function (highlighted in purple).

The iframe shall act as a container for the webresources. The webresource name shall be passed as QueryString parameter to the form (highlighted in pale blue).

All set and done, just import the customizations.xml back and you should see your dialog box.

Now the next step is to use this Dialog Box to show your HTML webresource as popup. Below is the code to show the popup.

var windowOptions = { “height”: 250, “width”: 450 };

                var input = { webresource_name: “new_/Pages/testfile.html” };

                Xrm.Navigation.openDialog(“PopupDialog”, windowOptions, input).then(
  & nbsp;               function success() {

                      // handle success call back
                  },
                  function error() { });

Observer I am using the Unique name of the dialog to invoke the Dialog box. Also I am passing the name of the webresource in input parameter. And I use the method Xrm.Navigation.openDialog to open the dialog box. It’s worthwhile to mention that the method is undocumented and hence I say it is unsupported. But again as I mentioned, if this is the need of the hour you can go ahead with it.

Now when the dialog is loading, the onLoad event which I registered earlier fires.

function onload(e) {
    debugger;

var fc = e.getFormContext();
    var webresource = fc.data.attributes.get(“webresource_name”).getValue();
    $(“#IFRAME_Modaldialog”).ready(function () {
        $(“#IFRAME_Modaldialog”).css(‘min-height’, ‘300px’);
    });
    fc.ui.controls.get(“IFRAME_Modaldialog”).setSrc(Xrm.Utility.getGlobalContext().getClientUrl() + “/webresources/” + webresource);

}

And voila. Your dialog box just opens up!

Hope this helps!

Debajit Dutta

(Dynamics MVP)

For consultation/ corporate training visit www.xrmforyou.com or reach out to us at info@xrmforyou.com

Our product offerings:

CRM-Sharepoint Attachment uploader and metadata manager (http://www.xrmforyou.com/sharepoint-integrator.html)

Notes Manager (https://debajmecrm.com/add-metadata-to-your-notes-and-attachments-in-dynamics-notes-metadata-manager-from-xrmforyou-com/)

Role based views for Dynamics 365 (http://www.xrmforyou.com/role-based-views.html)

Record Cloner for Dynamics 365 (http://www.xrmforyou.com/record-cloner.html)