Tag: javascript

How to get started with Form Scripts in Dynamics 365
A very simple script that we’ll load into the OnLoad event of Lead form.

In this article, you’ll learn how to load a simple javascript extension into Dynamics 365 forms. Our example script is a single function that will execute during the OnLoad event for our Lead form. In future articles you’ll learn how to package full Angular and React applications and deploy them to your entities.

TIP: While today’s method is useful for an example, you won’t want to modify your forms directly like this. In future articles you will learn how to package your javascript into a solution that will allow you to more easily manage your releases.

The first step will be to create your javascript file as shown above. Our file is saved under the filename onload-example.js

Some important things to note at this time:
1. Your file must include a function that will be available in the global context.
2. If you are minifying a large application, you will need to know the name of the function to execute.
3. Dynamics will handle the import of this single script and will control when the method is executed.
Now that you have your javascript file, the next step is to load it into your Dynamics instance.

Loading Web Resources into Dynamics

A full overview of loading web resources

To load web resources into CRM, visit the Settings > Customizations page and click “Customize the System”.

Once that page loads click on “Web Resources” from the left column and then click “New” to add a new web resource.

Note the web resource will automatically be prefixed with new_ so when you are searching for it later, you’ll have to look for the filename you uploaded starting with that string.

Once you have named your file, select it from your file system and click “Save”.

You don’t need to publish new uploads but you will need to click publish when you change an existing web resource.

Once these steps are complete, your new javascript file is stored within the Dynamics filesystem.

Next we need to load this script into the Lead entity.

Attaching your Web Resource to Form Events

A full overview. We break this down into steps below

Now we will be modifying the form to add the new web resource to it. The first step is to open the form editor from the dropdown menu in the ribbon.

How to open the form editor

The form editor will open a new window and from there you’ll click on “Form Properties”.

Why do I use Form Properties instead of inserting a Web Resource?
Even though you upload your script as a web resource, we must use Microsoft’s Form Properties to insert the script and set it up for execution during the OnLoad event of the form. If you attempt to insert it as a web resource you won’t have the ability to connect it to the form events.

Next, you will click on “Add” to bring your Web Resource into the Form Properties. You’ll need to first add the web resource and then assign the resource to an Event Handler.

Below, you can see an animated example of how you can find your web resource (Remember, it was uploaded with a filename starting with new_) and attach it to the form event.

Inserting your script. Remember how it was prefixed with `new_` during upload? That makes finding it easy.

In this final steps shown above you pull together the file you’ve uploaded with the form and assign it to the Event Handler. Once completed, press “OK” and then Save followed by Publish on the Form Editor window.

You are done!

If you’ve enjoyed this article and would like to see more, please email us at javascriptforcrm@buildbettersoftware.com with ideas for what you would find helpful for future articles. We are always happy to answer questions and help you get more comfortable modifying CRM to meet your needs.
September 9, 2019
How to embed Audit History directly into an Entity Form
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=Outlook15White
```
Hold 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="width: 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:
1. It creates a blank IFRAME that takes up 100% of the space in the displayed Web Resource
2. 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:
1. Mark the Web Resource type as HTML so that Dynamics knows the right way to display it.
2. 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.

Happy Modifications! If you liked this, please leave a comment.
August 14, 2019

Tag: javascript

How to get started with Form Scripts in Dynamics 365

Loading Web Resources into Dynamics

Attaching your Web Resource to Form Events

How to embed Audit History directly into an Entity Form