Create an HTML Form/Report in a Dynamics 365 Web Resource/iframe

Updated: Dec 27, 2018

Create an HTML/CSS/Javascript report to display in an Dynamics 365 Web Resource/iframe


What I am starting with

I have created the following 5 fields and added them to a form on an example entity called properties

  • Street - Single Line of Text

  • City - Single Line of Text

  • State - Global Option Set

  • County - Single Line of Text

  • Zip Code - Single Line of Text

Download CRM REST Builder by Jason Lattimer

  • Click here to download Jason Lattimer's CRM Rest Builder, YOU NEED IT AND IT IS GOING TO SAVE YOU TIME IN THE FUTURE

  • Import the solution into your development and live environment

  • Navigate to your solutions and click on the CRM Rest Builder

Using CRM REST Builder to get the data you need

Once the REST Builder has opened, make sure the following options are selected

  • Endpoint - Web API 8.2

  • Action - Retrieve Single

  • Output Format - JQuery

  • Formatted Values - Yes

  • Detect Changes - No

  • Token Header - No

  • Impersonate - No

  • Process - Asynchronous

The options above should be selected by default

  • Primary Entity - make sure to select the entity where you would like to retrieve your data, I am selecting my properties entity with its logical name, "new_properties", see the image below

  • Note: select the entity with its logical name, not the display name

Create an example record and copy its record id with Level up for Dynamics CRM/365 chrome extension

  • Open another window and create an example record within the entity you are using or navigate to a record within that entity

  • I created a properties record, and clicked save and close

  • Add the Level up for Dynamics CRM/365 extension to google chrome

  • Navigate to the record you just created

  • Click the small rocket icon in the top right corner of google chrome

  • Click the blue square that says "Record Id", this will copy the id of the corresponding record

  • Navigate back to the CRM REST Builder

  • Copy the Record Id into the CRM REST Builder field called "Id To Retrieve"

  • This is the image from before, but note the Id to Retrieve field

  • Select the fields that you would like to use in your form, you can add or remove fields later

  • Click "Create Request" near the top

  • Copy the ajax code by clicking Copy Code

  • Copy this ajax code into a code editor like Visual Studio Code

  • Here is my example code, but with the RecordID removed

  • This ajax request will only return the example record we created earlier

  • First add in the following lines before the ajax request

//Create a variable for the form's id and set it equal to the form's id

let id = parent.Xrm.Page.data.entity.getId();

//The following line formats the id

id = id.substring(1,id.length - 1);

  • Remove the parentheses in the URL line, and replace them with back ticks `

  • Replace the RECORDID text with ${id}

  • The URL line should look like the code below

url: Xrm.Page.context.getClientUrl() + `/api/data/v8.2/new_propertieses(${id})?$select=new_city,new_county,new_propertyname,new_state,new_street,new_zipcode`,

  • Below is an image of what your code should look like up to this point

Place the code into a function, so that our future HTML file can call it

  • Place all of this code into a function called initializeReport

  • Add the following code to the first line initializeReport() {

  • Add a closing curly bracket to the very bottom of your code

  • Your code should look like the following

Change the variables to connect with our future HTML file

  • First, add console.log(result); inbetween lines 20 and 21, this will help you identify problems from your web browser's console

  • Locate the variables on lines 22-28, assuming you added in an extra line for the code above

  • On line 22, replace "var new_city" with document.getElementById("cityValue").innerHTML

  • Once finished it would look like this, document.getElementById("cityValue").innerHTML = result["new_city"];

  • Why? We are creating a link between the data values, retrieved by the JavaScript (ajax request), and the HTML fields that we will create in the HTML file later

  • We are also renaming the variable to make it easier to identify, I choose to add "value" to the end of all HTML fields, its a personal preference

  • We will continue this process for the remaining variables

  • Line 23 would look like this once finished, document.getElementById("countyValue").innerHTML = result["new_county"];

  • Once you have completed this adjustment your code should look like this

  • Finally comment out the property name value(line 24), and the first state value(line 25), we won't use these in our example, if you do not comment these out, then data will not fill into the remaining variables

  • That section should look like this

  • Save the file as propertyReport.js and take note of the file name, you need to reference this later in the HTML file

  • Congrats your JavaScript is finished and we can move on to the HTML file!

Before we start the HTML file, I highly recommend Codecademy's HTML and CSS courses, they are free and will get you moving, even if you don't have experience with either. Those courses were the first experiences I had with both, and I haven't found a better resource yet.


Create your HTML page

There are more than a million ways to do this, so we are going to keep this very simple

  • Create a new HTML file

  • It should look like the following

  • Add a title, like Property Report in between the title tags

  • Link this html file to the JavaScript file we created earlier, by adding in <script type="text/javascript" src="propertyReport.js"></script> before the closing </head> tag

  • Note: in the code above, where it says propertyReport.js, you must use the file name of your JavaScript file

  • Add onload="initializeReport()" to the opening <body> tag, this will execute our JavaScript when the page loads

Your code should look like the following

Creating divs, tables, and fields (table data)

  • Create a div within the body where the form will live

  • Copy and paste the following code into the div you just created

<table style="width:100%">

<tr>

<td>Address</td>

</tr>

<tr>

<td>Street:<span id="streetValue"></span></td>

<td>City:<span id="cityValue"></span></td>

<td>State:<span id="stateFormattedValue"></span></td>

<td>County:<span id="countyValue"></span></td>

<td>Zip Code:<span id="zipcodeValue"></span></td>

</tr>

</table>

  • This html created an html table, I use an html table because it is simple and easy

  • The <tr> tags are the table rows

  • The <td> tags mean table data, but essentially mean columns

  • If you add multiple <td> tags you will add more columns

  • The <span> values are where the fields from our JavaScript file will fill in

  • Make sure to match the id within the span to the JavaScript values

  • Your html should now look like the following

  • Save this file as propertyReport.html

  • Congrats your html file is complete!

Create a Web Resource for the HTML and JavaScript files

  • Navigate to your solution, and scroll down to Web Resources in the Components List

  • Click on Web Resources, and then select New in the top left

  • First create a Web Resource for the JavaScript file

  • Give the Web Resource a logical name and end it with .js, this should be the file name

  • I use folders to organize my Web Resources, if you use slashes, you can create sub-folders

  • For the JavaScript file I used /iframes/propertyReport/propertyReport.js

  • Add a Display Name, change the Type field to "Script (JScript)"

  • Upload the JavaScript file we created earlier with the "Choose File" button

  • Click Save and then Publish

  • Follow the same steps to create a Web Resource for the HTML file, make sure to save the file as .html and change the Type to "Webpage (HTML)"

  • The file path I used was /iframes/propertyReport/propertyReport.html

  • Click Save and then Publish

Add the HTML Web Resource to the main form

  • Navigate to the main form in the corresponding entity, do this by clicking the entities drop down, select the entity drop down, and then click Forms

  • Open the main form, and click on a tab where you would like to display the custom form

  • Click the "Insert" tab at the top of the window next to the "home" tab

  • Select Web Resource

  • Search and select the html file, new_/iframes/propertyReport/propertyReport.html

  • Give the Web Resource a logical name like, propertyReport

  • Give it a label like, Property Report

  • I expanded the tab to show more of the Web Resource

  • Click Ok

  • Click Save and then Publish

  • Open your example record

  • Congrats! You have created a custom HTML Form/Report Web Resource!

  • I know it doesn't look pretty, but it leads to endless possibilities if you expand the options above

What else can we do?

  • link a CSS file and make our report look really nice

  • add more fields by expanding our HTML

  • add a print function and button

  • add a logo to the report

  • add a subgrid/table to show multiple related records from a separate entity

  • add the ability to edit fields

© 2023 by Clark and Ali

  • LinkedIn Social Icon