1

How to open a popup window in USD hosted control ?

Javascript code:

<script>
    function basicPopup(url) {
popupWindow = window.open(url,'popUpWindow','height=300,width=700,left=50,top=50,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes')
    }

</script>
<a href="https://www.google.com" onclick="basicPopup(this.href);return false">Open a popup window</a>

USD Window navigation rules

Route Type - Popup, Action - Show Outside , Destination - Tab

Hosting Type: Edge Process/Chrome Process.

Issue: When launching the above JS snippet in a browser, it worked as expected (popup opens with given dimensions and child window able to communicate to parent window with Post message ) whereas the same code integrated with USD, the popup launches in new tab and newly opened window unable to communicate to parent window (window.open() returns null)

Any ideas as to what I'm missing?

User412387
  • 79
  • 1
  • 11

2 Answers2

1

If you let USD host all of your browser processes and unify your browser types, you may be able to access your parent windows as desired.

Create a "destination" / "child" hosted control that can receive your target navigation. Make all browsers Chrome, and if you can't do that for whatever reason, hopefully you can make them all Edge instead. In your Window Navigation Rule, instead of Show Outside, use the action Route Window, and set the Target Tab to the new child browser hosted control. Put the child browser on FloatingPanel if you prefer not to host it as a MainPanel tab.

Also, not to be redundant, but having noticed your "Chrome/Edge" hybrid hosting summary above, I would suggest doing as much as possible to eliminate the hosting of multiple browser types throughout your configuration(s). I would assume that a USD-hosted browser handing off to a "Windows hosted" browser could complicate (prevent?) your ability to find the parent window, even if the browser type inside and outside of USD are the same. To my knowledge, USD and Windows use different versions of Edge (USD has yet to integrate the new Edge, and it might never) and USD manages its own Chromium instances. I assume "Show Outside" in Chrome does not launch a new CEF process from your USD application folder, but rather just hands off to Windows, which then invokes the Chrome stand-alone application (if it is your OS default browser). There may(?) be value in testing various combinations of browser types here, if you are committed to the "Show Outside" paradigm for whatever reason.

Hoffma
  • 136
  • 11
  • Instead of creating a hosted control for child windows, can we use Xrm.Navigation.openWebResource ? – User412387 Feb 01 '21 at 16:41
  • 1
    No, I don't believe that would resolve anything for you. Commanding the browser from the code level is one thing, but USD is in control of browser processes here (until you "show outside"), so it appears that this is the crux of your issue. Adding the "child" hosted control and aligning browser types may be the best fix that allows you to proceed with zero code changes. Once all browsers are hosted within USD, if they still cannot see each other, USD can move the data around for you: check window.IsUSD, implement Event Moniker pattern, RunScript / RunXrmCommand, [[replace.parameters]], etc. – Hoffma Feb 01 '21 at 19:07
  • Does the above approach work for multiple child windows in the same hosted control? – User412387 Feb 10 '21 at 13:15
  • If I understand correctly, yes, I believe so. It sounds like you'd have the parent control (or multiple "parent" controls) originate navigations that would be show in the child browser hosted control. Just enable "Allow Multiple Pages" on the child hosted control. Once it receives the second navigation, it will show a drop-down to allow you to switch between the pages. – Hoffma Feb 13 '21 at 19:14
0

It is possible they do not allow a popup at all, like here at SO in the snippets.

You can look in the console.

Here is a version with more info - NOTE this version does not pop anything at SO due to sandboxing

NOTE You cannot access the contents in the popup or the parent from the popup if the contents are from different origins

document.getElementById("popupDiv").addEventListener("click", function(e) {
  const tgt = e.target.closest("a");
  if (tgt && tgt.classList.contains("popup")) {
    const popupWindow = window.open(tgt.href, tgt.target, 'height=300,width=700,left=50,top=50,resizable,scrollbars,toolbar,status');
    if (popupWindow) {
      console.log("Popup allowed");
      e.preventDefault(); // cancel the actual link
    } else console.log("Not allowed to pop, target used instead")
  }
})
<div id="popupDiv">
  <a href="https://www.google.com" target="popopWindow" class="popup">Open a popup window</a>
</div>
mplungjan
  • 169,008
  • 28
  • 173
  • 236