Configure Account/Opportunity Integration Unified Interface (After Rampur 13)

This page shows how to integrate Pricefx Unity to the MS Dynamics Account/Opportunity page using IFrame.

1. Open MS Dynamics and locate the gear icon in the top-right corner of the interface.

2. Click the gear icon to access the Advanced Settings menu.

3. In the Settings dropdown, locate and select the Customizations option from the Customization list.

   Open

   

    

4. In the Search field, type either “Opportunity” or “Account” to initiate a search.

5. In the list, locate “Opportunity” or “Account”.

6. Click Opportunity or Account which appeared in the list and click Forms.

   Open

   

    

7. Select Form in which you want to add iFrame.
   The same library can be used for Account and Opportunity Pages.
   PFXRegisterListener and PFXInputsLookup must be unique for every library.

8. Add JavaScript code to the MS Dynamics library.

   1. In the opened Form open the JavaScript library tab.

   2. Click Add Library.

   3. In the modal window, click New web resource.

   4. Fill in the form and upload the JavaScript file (Edit Code).

       

      const TAG = "pricefx-js.dynamics_crm"; var PFXRegisterListener = function () { //TODO: Change to unique name if (window.XMLHttpRequest) { //for browsers other than ie window.parent.parent.addEventListener("message", PFXInputsLookup, false); //TODO: change PFXInputsLookup } else { window.parent.parent.attachEvent("onmessage", PFXInputsLookup); //TODO: change PFXInputsLookup } window.parent.document.getElementById("IFRAME_<iframe name>").style.height = "1000px"; // TODO: Edit height if needed }; var PFXInputsLookup = function (event) { //TODO: Change to a unique name and update all occurrences if (event.origin != "https://<customer cluster domain name>") { //TODO: add customer cluster domain name return; } console.debug(`[${TAG}] Event received`, event); const jsonData = JSON.parse(event.data); const { action, data } = jsonData; 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(`[${TAG}] executeScript: parameter data should be type of string")`); } break; } default: { console.error(`[${TAG}] ${action}: actions do not exist`); const response = { action }; event.source.postMessage(JSON.stringify(response), event.origin); } } return; };

9. Add a new tab to Form (optional).

10. To locate an external website, use the Component search field or navigate to Display > External website.

11. Drag and drop the External website into the desired section.

12. A popup will appear next to the External website. In this popup, enter the following URL:
    https://<customer cluster>.pricefx.com/pricefx/<partition>/saml/signon/<SAML configuration>/?RelayState=<relaystate>
    
    

     

13. Modify fields in External Website:

    1. Label (optional)

    2. Name – Should be the same as in JavaScript code.

    3. Site URL – If URL was not added during Add external website, then it can be added now:
       https://<customer cluster>.pricefx.com/pricefx/<partition>/saml/signon/<SAML configuration>/?RelayState=<relaystate>

    4. Restrict cross frame scripting where supported – Should be unchecked.

        

14. Click the Events tab in External website sidebar.

15. To add a Pricefx event, click 'Event Handler.

15. Add Library that you created in Step 8.

16. Insert Function name that you created instead of PFXRegisterListener.

17. Now click Save and Publish and verify if iFrame works.