For this example, we will be using Dynamics CRM and sales being tracked in Dynamics GP. We will also be using the Account Number in CRM which matches to the Dynamics GP Customer Number. We will start off by assuming you already have a Popdock account with these connectors already added to your account and that you are matching your CRM Account Number to your Dynamics GP Customer Number.
Preparing Your List And Saving It As A Favorite
Step 1: First we will start in Popdock. Once you are logged in, start off by adding a new tab and selecting the list you want to work with. Here I am using the Dynamics GP Sales line items list default view which I will customize and save as a favorite.
Step 2: Prepare your list to show how you would like to see it inside of CRM. Here I have edited the columns by adding/removing what I to see. Customer Number is not required because we will be using it as a parameter and we will only see the sales line items for an individual customer. I have also sorted my Document date column in descending order so I see the latest items first.
Step 3: Now that you have the list setup like you would like to see it, you will want to save it as a favorite and give your favorite a name. Click the favorite button and save your favorite.
Creating A Popdock Widget And Adding A Parameter
Step 1: Click on the left drop down menu in your Popdock and go to Developer. If you do not have the Developer option in your menu, please make sure you have been given permissions to this feature or that your subscription is the Standard or higher plan.
Step 2: Click the +Add widget button to start setting up your widget. Then give your widget a name to see the complete form that needs to be configured with the favorite you just created.
Step 3: Click on Options in the left navigation menu, then select the options you would like available on the widget. Here I have selected just a few:
Step 4: Click on Parameters in the left navigation menu, then for the Name we will use just a simple “Id”. The field drop down are the fields in the list you are using for this widget and we want to link it to the Customer number field. I have also selected that it is required so that when one is not submitted to the widget it does not display any other data, but show an error that “Required parameters are missing”.
Step 5: Now that you have completed adding the parameter, the widget is ready and we can move to setting it up in Dynamics CRM. Before leaving the widget settings, go to Embed Codes in the left navigation and copy and paste the Widget link to a notepad or leave this open to copy it at a later time when needed in the CRM steps.
Adding A Widget Inside Dynamics CRM
For setting up an IFrame in CRM we will need to work in the classic view, currently the new Unified Interface does not support any IFrame configuration. In a later blog post, I will show how to manage your widgets in tabs in the new Unified Interface.
Step 1: First we will go to Sales then Accounts and open one of your accounts. Here is a simple one I have for Adam Park Resort:
Step 2: Next we want to edit this form so click on the 3 dots for the More Commands menu and choose Form.
Step 3: You should now have a PowerApps window that opens separately from your current browser window. This shows the layout of the form for that account page. We will be inserting a section just above the Invoices section for the Popdock Widget.
Step 4: From the top tabs, you will want to click the Insert tab. Then at the top bar of icons, we want to choose Section, this will then show a drop down with a few different options. Choose One Column.
Step 5: You should see a new section added to the form, it may not be in the exact place above Invoices, but you can easily click and hold down your mouse button to drag the section to your desired location.
Step 6: Now that we have an empty section, we will need to insert an IFrame now. With the section clicked on and highlighted in blue, you should still be on the Insert tab so click on IFrame.
Now you will see that the IFrame is inserted and showing a blank area with only the URL displayed:
Step 9: This opens the Form Properties window. On the Events tab, click on the Add button at the top of the tab.
Step 10: This opens the Lookup Record window and since we have not created this new record for the widget, we will click on the New button at the bottom left:
var customerId= Xrm.Page.getAttribute(“accountnumber“).getValue();
var IFrame = Xrm.Page.ui.controls.get(“IFRAME_GPInvoices“);
var Url = IFrame.getSrc();
var param1 = Url+”?id=”+customerId;
Step 13: It should now return you to the Web Resource window and you can now publish it by clicking Publish. Once the Publishing Customization message appears and then goes away, you can then click the X on the window to close the Web Resource window. This will return you to the Lookup Record window.
Step 14: Now you should see the new web resource you just created and it will automatically be selected for you to add. Now you just need to click the Add button. This will then return you to the Form Properties window and you will see the new web resource is added in the Form Libraries.
Step 17: We are now back to the PowerApps Account Form and we can now click save and finally click publish to publish all customizations. Once it has completed publishing, click the X to exit the forms window.
This completes everything needed for the widget now to work inside of CRM. Go ahead and refresh your accounts page if you still have it open and it should look like this with the working widget.