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 sample solution with a widget can be downloaded here.

Table of Contents

Add a Popdock tab to the form

1. Open make.powerapps.com.

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.

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

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.

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);
}

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.

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.

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)

<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