How to Embed a Popdock Widget in Dynamics 365 CE/CRM

Using a Popdock widget you can integrate a Popdock list or multiple lists directly into your Dynamics 365 Customer Engagement (D365) user interface as an iFrame.  The following example is a common scenario we see for embedding widgets in D365.

A Popdock widget will need to be created prior to following these steps because you will need the widget URL. Click Here to learn how to create a Popdock widget.

A sample solution with a widget can be downloaded here.

Table of Contents

    Add a Popdock tab to the form

    1. Open make.powerapps.com.

    • Ensure you are in the correct environment.


    2. Navigate to Tables and then Account (or the table you want to show the widget).

    3. Open Data Experiences and then Forms.


    4. Select the Account form (or any form you want to display the widget).

    5. Select Component.


    6. Drag the 1-column tab component onto the form where you would like it to display.


    7. Add a Label and Name to the tab.

      ‍Add an iFrame

      1. Select the Component Section named New Section.

      2. Search for the component list for website.

      3. Select External website.

      4. Enter the Site URL from the Popdock widget.


      5. Select the New Section around the outside of the iFrame.

      6. Select Hide label.


      7. Select the iFrame.

      8. Enter the following Properties.

        SectionPropertyValue
        Display optionsNamePopdock
        Display optionsHide labelTrue (checked)
        FormattingComponent height14 rows
        FormattingDisplay borderfalse
        FormattingUse all available vertical spaceTrue (checked)
        FormattingScrollingNever
        AdvancedRestrict cross frame scriptingFalse (unchecked)


        9. Select Save and publish in the top right of the screen.

        If you need to filter the widget to only show records for certain data, continue below. If you don’t need to filter the data in the widget, you can skip to Testing and Troubleshooting.

        Create a Web Resource Script

        In order to make this iFrame dynamically filter based on the current record we need to add a few lines of JavaScript to pull some values off the form and pass them to the Popdock widget.

        1. Copy the text in the code block below so that you can paste it in a text editor.

        2. Edit these 3 variables as required.

        • parameterName: Change to the parameterName on your widget as shown below.
        • parameterField: Chang to the D365 field on the current table to pass into your filter parameter.
        • iFrameName: If you named your iFrame something different in the Add an iFrame section. Enter the name here.


        3. Save the file as a .js file type. 

          function popdockFilter(executionContext) {
            //replace variables with your values
            var parameterName = "customer_number";
            var parameterField = "accountnumber";
            var iFrameName = "IFRAME_Popdock";
            //end variables
            var formContext = executionContext.getFormContext(); //retrieve context of current form
            var userSettings = Xrm.Utility.getGlobalContext().userSettings; //retrieve user settings
            var iFrame = formContext.getControl(iFrameName); //retrieve iFrame
            //append the parameter(s) to the base url
            var parameterValues = "&" + parameterName + "=" + formContext.getAttribute(parameterField).getValue();
            var fullWidgetUrl = iFrame.getSrc() + "?theme=dynamics_crm&locale_number=" + userSettings.languageId + parameterValues;
            //assign the updated URL to the iFrame
            iFrame.setSrc(fullWidgetUrl);
          }
          


          This is the file type to upload to D365.  The example below uses Notepad to save the function into a .js file.



          Add a Web Resource

          Next you will upload the web resource to D365 and link it to the current form so the iFrame can be dynamically filtered when a record is opened.

          1. Select Form libraries and then Add library.


          2. Click New web resource.

          3. Give the Web Resource a Name.

          4. Set the Type to JavaScript (JS).

          5. Select Choose file and upload your JavaScript file from the create a web resource script section.

          6. Select Save and publish.

          7. Search for this web resource and then select Add.


            Add form Event Handler

            1. Select Form properties.

            2. Select Events.

            3. Select Event Handler.



            4. Configure the event.

            • Event Type: On Load
            • Library: The Web Resource created in Step 4.
            • Function: popdockFilter (Or whatever you named the JavaScript filter)
            • Enabled: True (Checked)
            • Pass execution context as first parameter: True (checked)


            5. Select Done.

            6. Select Save and publish on the form.


              Testing and Troubleshooting

              Next you will want to make sure our widget is created and filtered correctly.

              1. Open the form in D365 that you customized.

              2. Check if you can see the tab you added.

              • If you don’t see your tab, check that you are viewing the correct form.
              • Form properties > Display Name


              3. Switch to the tab with your widget.

              4. Make sure your widget is showing.

              5. If the widget is returning no records, check the filter is correct.

              a. Right-click anywhere in the white space on the widget.

              b. Select Inspect.

              c. Ensure the filter parameter is being added correctly. (if it isn’t doublecheck the Web Resource JavaScript)


                  Here is a sample of the HTML part in an easier to read format.

                  <iframe
                    id="IFRAME_Popdock"
                    title="New Iframe control 1701773831233"
                    data-id="IFRAME_Popdock-IFRAME_Popdock"
                    src="https://widget-weu.popdock.com/embed/ukWkp_?theme=dynamics_crm&;locale_number=1033&;customer_number=10000"
                    scrolling="no"
                    class="pa-ki pa-bc pa-kj pa-dw pa-kk pa-y"
                  ></iframe>




                  Questions on embedding widgets in Dynamics 365 CE/CRM? Email support at support@eonesolutions.com

                  Feeling stuck? Get the support and guidance you need to help you power through any data challenge

                  We're on your integration team. Connect with our people and let us know how we can help you.