Recently, I helped a CRM Developer learn how to embed a view of his Audit History directly into his form. Keep reading for a step-by-step process explaining exactly how this is done and find a code sample you can download and use to power the same behavior inside your entity forms as well.
First, let’s look at what we’re inserting. Our view of the audit history will be the same view that you see when you select Audit History from the Form Navigation. If you’re using v9, it looks like this:
The Audit History that we want to show inside our form.
Now that we’re on the audit history page, let’s take a closer look at how this is displayed. If you use the Developer Tools for your browser, you’ll find that this view is shown inside an IFRAME which is how a lot of the components in Dynamics are displayed.
So now what we need to do is grab the URL for the IFRAME that’s showing the audit history. We will use this to build a web resource that we’ll be able to embed into our form. From the Audit History page, if using Chrome press Control + Shift + J to open the developer tools, then scroll to the iframe in the elements tab.
This IFRAME source will look something like this:
/userdefined/areas.aspx?formid=e3b6ddb7-8df0-4410-ac7b-fd32e5053d38&inlineEdit=1&navItemName=Audit%20History&oId=%7b5D5C1423-DEB2-E811-A96A-000D3A37062B%7d&oType=4&pagemode=iframe&rof=true&security=852023&tabSet=areaAudit&theme=Outlook15WhiteHold on to this, because we’ll be using it to customize your web resource that will handle the embed of this IFRAME.
Open your favorite text editor and paste in the following in a file called web-resource.html:
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body style="height: 100%">
<iframe src="" id="areaAuditFrame" name="areaAuditFrame" scrolling="auto" isarea="1" frameborder="0" style=" 100%; height: 100%"></iframe>
<script>
let auditLoader = window.auditLoader || {};
auditLoader.setIframe = function() {
const search = new URLSearchParams(window.location.search);
const recordId = search.get('id');
let element = document.getElementById('areaAuditFrame');
// TODO: Modify this with your url from the iframe
// Make sure you modify it to add ${recordId} where needed
element.src = `/userdefined/areas.aspx?formid=e3b6ddb7-8df0-4410-ac7b-fd32e5053d38&inlineEdit=1&navItemName=Audit%20History&oId=${recordId}&oType=4&pagemode=iframe&rof=true&security=852023&tabSet=areaAudit&theme=Outlook15White`;
};
auditLoader.setIframe();
</script>
</body>
</html>Note: For the script above we have all of the code and display components in the same file. It’s a good idea to do this when possible because it will be easier to maintain the system if each modification is self-contained. If you ever need to remove this, you can remove the web resource and there are no further steps. Always think about how to minimize dependencies as you build your modifications.
What the code above does is the following:
- It creates a blank IFRAME that takes up 100% of the space in the displayed Web Resource
- It uses parameters passed to the web resource to set the src attribute of the IFRAME to the Audit History page, customized to load the correct record for the form where it is embedded.
You will need to change the element.src line to match the IFRAME url you copied above, making sure to replace the oId= section with oId=${recordId}.
Once you have your file, save it to your local machine. The next step is to upload this into your entity form. In our example, we add a section to the bottom of our form that will hold the Audit History because this component requires a lot of space to display.
Some things to note when you do this:
- Mark the Web Resource type as HTML so that Dynamics knows the right way to display it.
- Make sure you click the box inside Web Resource Properties to Pass record object type code and unique identifier as parameters. The script uses this to know what audit records to show.
You can reuse the script above to display any iframe you like into any entity form, all you need to do is change the element.src property.