Popup Window

This page shows how to integrate Pricefx Unity to the any MS Dynamics page where Web Resource is supported using IFrame and popup.

Open Customize the System.
1. Open MS Dynamics and locate the gear icon in the top-right corner of the interface.
2. Click on the gear icon to access the Advanced Settings menu.
3. In the Sidebar find Customizations, then click on Customize the System.

Modify code for popup HTML web resource.

<html>

<head>
  <script type="text/javascript">
    var PfxPopupLookup = function (event) {
      var jsonData = JSON.parse(event.data);

      var action = jsonData.action;
      var data = jsonData.data;

      switch (action) {
        case "executeScript": {
          if (typeof data === "string") {
            const newFunction = new Function(`return (${data})`);
            newFunction()().then((res) => {
              res.action = action
              event.source.postMessage(JSON.stringify(res), event.origin);
            });
          } else {
            console.error("DYNAMICS.eventHandler executeScript: parameter data should be type of string");
          }
          break;
        }
      }

      return;
    }

    document.onreadystatechange = function () {
      if (document.readyState == "complete") {
        if (window.XMLHttpRequest) {
          parent.addEventListener("message", PfxPopupLookup, false);
        } else {
          parent.attachEvent('onmessage', PfxPopupLookup);
        }
      }
    }
  </script>

<body>
  <iframe src="https://{{pricefx base url}}/pricefx/{{partition}}/saml/signon/{{SAML Configuration}}/?RelayState={{RelayState}}"
    scrolling="auto" class="pa-wf pa-bc pa-wg pa-dm pa-wh pa-y " data-pa-landmark-active-element="true"
    style="width: 100%; height: 100%; border: 0;">
  </iframe>
</body>

</html>

Replace PfxPopupLookup in all instances with a unique name, as otherwise it will conflict.
Replace {{...}} with a values from your pricefx instance.

Create new HTML web resource for popup.
1. Click on Objects > New > More > Web resource.
2. Insert code from section 2 into Code and select File Type Webpage (HTML).

Modify code for buttons HTML web resource.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .dynamics-button {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      font-size: 14px;
      font-weight: 600;
      text-transform: none;

      padding: 8px 16px;
      border-radius: 4px;
      border: none;
      cursor: pointer;

      background-color: #0078D4;
      color: white;

      transition: background-color 0.2s ease;
    }

    .dynamics-button:hover {
      background-color: #005A9E;
    }

    .dynamics-button:active {
      background-color: #004D80;
    }

    .dynamics-button:focus {
      outline: 2px solid #000;
      outline-offset: 2px;
    }

    .dynamics-button:disabled {
      background-color: #E6E6E6;
      color: #A6A6A6;
      cursor: not-allowed;
    }
  </style>
</head>

<body>
  <div>
    <button type="button" id="openPopupPricefx" class="dynamics-button">
      Open Modal
    </button>
  </div>

  <script>
    document.getElementById("openPopupPricefx").addEventListener("click", function () {
      parent.Xrm.Navigation.navigateTo({
        pageType: "webresource",
        webresourceName: "pfx_pricefx_popup"
      }, {
        title: 'Pricefx Popup Demo Title',
        target: 2,
        position: 1,
        width: { value: 100, unit: "%" },
        height: { value: 100, unit: "%" }
      });
    });
  </script>
</body>

</html>

Adjust the name and style of the button to your liking.
document.getElementById("openPopupPricefx") value in function should match button id.
webresourceName should have name of the HTML web resource from the section 3.
Change title for popup in title.

Create new HTML web resource for button.
1. Click on Objects > New > More > Web resource.
2. Insert code from section 4 into Code and select File Type Webpage (HTML).
Search for Form in which you want to insert a buttons which will open popup. In the example, we will do it in Opportunity Form.
1. Open Opportunity Form.
2. Insert HTML web resource in the page. Select web resource for buttons, in our case it would be called pfx_pricefx_popup_buttons.
Save and Publish all changes.