How to add and customize iFrames in Dynamics 365 using external websites. This post looks at how to create an iFrame component in Dynamics 365 to display content from external websites in Dynamics 365. In this example, we look at how we can show business data for Norwegian companies inside a tab on the account form, where we use the website https://www.purehelp.no. Pure help is a business search engine where we can look up all information about Norwegian companies for free. We look at this step by step.
Table of Content
- Setting up a Trial Environment
- What are iFrames in Dynamics 365 Form?
- How to Add the iFrame Component to the Account Form
- How to add the JavaScript Library
- How the iFrame Looks Like
- Conclusion
Prerequisites
- A trial or environment for customizing apps
- Familiar with customizing Dynamics 365/Model-Driven Apps
- Familiar with JavaScript
Setting up a Trial Environment
To create a Dynamics 365 CE trial environment you can follow the steps in the post, How to create Microsoft Dynamics 365 Customer Engagement Trial instance
What are iFrames in Dynamics 365 Form?
Iframe and controls embed content from another location in pages by using an HTML IFRAME element. You can use an iFrame to render the contents from another website in a form. For more information, see the documentation from Microsoft Use IFRAME and web resource controls on a form.
How to Add the iFrame Component to the Account Form
In this section, we look at how to customize the form and add the iFrame component to the form. The image below shows the changes we are going to add to the form and is the final result we look for. We look at this below in the next steps.
Step 1: First we open the account form in the form editor.
Step 2: Add a new 1-column tab > Change the label to Pure help > give it a reasonable name tab_purehelp > Click Save.
Step 3: After creating the tab, give the section a reasonable label name like Pure help > Give the section a name, for instance, tab_6_section_purehelp > Expand the Display menu item in the side menu, like the image below > Click on External website > Add the home page of Pure help (https://www.purehelp.no) > Click on Save.
Step 4: After doing the customization above it will look something like the image below. Furthermore, we need to customize the settings of the iFrame to display it better, we look at this in the next step.
Step 5: Next, we need to customize the iFrame properties to display it better. First, give the iFrame a label name like Pure help > then a name like IFRAME_purehelp (this is used later in the JavaScript) > Make sure that the site URL is valid and shows the web page > Furthermore, set the component height to 17 rows to display the page without having to scroll both the Dynamics page and the iFrame > Check the checkbox for Use all available vertical space and the checkbox Restrict cross-frame scripting where supported > Click Save.
Step 5: To allow the user to open the website in a new tab in the browser, we’ll create a new URL field that gets populated with the JavaScript we look at in the next part. To add the field, I’ve created a solution and added a field on the account table called Pure help URL. The properties of the field are shown in the image below.
Step 6: Adding the Pure help URL field to the form. In the form editor, click on the Table columns menu > Search for Pure help or scroll until you find the field > Add the field by dragging it from the column list and place it inside the Pure help section and above the iFrame > Then click Save and Publish.
Step 7: After adding the customizations to the form it should look similar to the image below. In the next part, we look at how to add JavaScipt to the form and change the iFrame based on the account number.
How to add the JavaScript library
In this part, we look at how the code for changing the iFrame dynamically and how to add it to the form.
Step 1: First, we need to create a JavaScript library. To do this we can follow the steps in an earlier post, How to add JavaScript to form on load in Dynamics 365.
The code below is the one we want to add to the On load event on the account form. This will dynamically create a URL to Pure help based on the account number on the accounts. If the account doesn’t have an account number it will show the home page of the Pure help website.
var sdk = window.sdk || {};
(function () {
"use strict";
this.setIframeSrcUrl = function (executionContext) {
const formContext = executionContext.getFormContext();
const accountNumber = formContext.getAttribute("accountnumber").getValue();
const purehelpUrl = `https://www.purehelp.no/m/company/details/${accountNumber}`;
const defaultUrl = "https://www.purehelp.no";
// Check if account number contains value
if (accountNumber !== null) {
// Set look up the account in pure help
formContext.getControl("IFRAME_purehelp").setSrc(purehelpUrl);
formContext.getAttribute("fe_purehelpurl").setValue(purehelpUrl);
} else {
// If the account number is empty set the source to pure helps home page
formContext.getControl("IFRAME_purehelp").setSrc(defaultUrl);
formContext.getAttribute("fe_purehelpurl").setValue(defaultUrl);
}
}
}).call(sdk);
Step 2: First, we need to add the JavaScript library to the form. To do this, click on the Form libraries menu item in the side menu > Click on + Add library and find the library in the dialog box that opens up (for more detail see the post How to add JavaScript to form on load in Dynamics 365) > The JavaScript library will be added to the form libraries list as seen in the image below.
Step 3: After we’ve added the library we need to add the JavaScript function to the on-load event. To do this follow the steps in the image below.
Step 4: After the JavaScript event is added and the form is Saved and Published. We will now have a form similar to the image below. The JavaScript will generate the URL based on the Account Number on the account and create the link to Pure help. If the Account Number is empty it will use the default URL and display the home page URL to Pure help.
How the iFrame Looks Like
Now that we have added the customizations to the forms and added the functionality in the JavaScript. Let’s look at how it looks in the form of gifs.
In the gif below, you can see what it looks like when the account has an account number.
In the gif below, you can see what it looks like when the account doesn’t have an account number.
Conclusion
To sum up, this was a little project to test how the iFrame component can be used in Dynamics and how it can be customized using JavaScript and dynamic values. Hope this was helpful!
For More Content See the Latest Posts
- Quick Tip: Adding Confetti to HTTP Responses in Power Automate
This quick tutorial show you how to easily enhance your Power Automate HTTP responses with a fun and colorful confetti effect. - How to Enable Alphabetical Filtering (Jump Bar) in Dynamics 365 Subgrids
Step-by-step guide on how to enable and configure the Alphabet Bar (Jump Bar) for navigation in Dynamics 365 subgrids. - Speeding Up Power Automate: Replacing ‘Append to Variable’ with ‘Compose’ for Efficient Workflows
Discover how replacing ‘append to’ variables with ‘compose’ actions in Power Automate can drastically speed up your flows. - Why and How to Implement DevOps?
Discover how to implement DevOps for faster software delivery, improved quality, and better team collaboration.