Custom HTML for CRM

Many CRM customers find very handy the use of IFrames to incorporate Web pages into CRM forms. However, each time a new piece of custom HTML/Javascipt code needs to be added to the main body of a CRM form a new web page needs to be created and properly referenced in the IFrame. This won’t typically represent too much trouble for a System admin who has access to the web server where the extra pages will be hosted; but what if we want to create a library of HTML “parts” that can be incorporated in more than one form or displayed as a standalone web page AND we don’t want the customizer to have access to the web server?; this scenario is typical for hosted CRM solutions.

The following mini-tutorial shows a basic technique to achieve the above in CRM 3.0. Included in this post is a zip file containing the files mentioned here. The sample code is at the CRM Sandbox in the downloads section.

HTML custom entity

1. The first step is quite simple; we need to create a new custom entity that we will call HTML_Cell with at least 3 attributes:

    • Name: The name of the entity; nothing special here.
    • URL: This field will be auto populated when the form loads; see further steps below. Make sure is long enough to hold a large URL.
    • HTML(ntext): This field will contain the actual HTML that will be displayed. Note that it will only hold up to 5000 characters; an alternative to overcome this limit is to use multiple ntext fields.
    • Owner: Comes by default.

2. Next we’ll edit the entity’s form to expose all three attributes making sure to mark URL as disabled. The form, once rendered, will look similar to the following:

3. Save and Publish the new entity.

ASPX renderer

4. The code of the ASPX can be as complex as you want (to do extra validations and security checks) but the snippet included in the attached zip file should suffice basic needs. It essentially:

a. Takes an HTML_Cell record ID from the query string,
b. Fetches the corresponding record. Make sure to “cast” the record to ensure the record is of type HTML_Cell
c. Retrieves the value from the HTML attribute
d. Renders the HTML content. Note that no server-side scripts will work; which is good from a security standpoint.

Getting the URL of the ASPX renderer

5. Next you need to add a small script to the “OnLoad” event of the HTML_Cell form that will auto-populate the URL attribute of the form. The code can be as simple as:

crmForm.all.new_url.DataValue=”http://yourserver/yourenderer.aspx?id=”+crmForm.ObjectId;

Using HTML_Cell

After all the above is up and running you are ready to go. To add a new piece of custom HTML to your form:

1.Create a new “HTML_Cell” record; put the custom HTML/Javascript in the HTML attribute of the record.
a. If you reference the crmForm make sure to use parent.crmForm
2. Save the record. Once saved you will see the URL field filled with the address that you should use (it had “null” at the end before saving the entity); copy that address to the clipboard.
3.Customize the Form of any entity and:
a. Add an IFrame control
b. In the URL attribute of the IFrame paste the address that you copied in number 2.
c. If you used parent.crmForm in your custom HTML, uncheck “Restrict Cross-Site Scripting”
4. Save changes and Publish the entity
5. DONE! 🙂

With this approach you can create as many HTML blobs as you want without having to add extra web pages to your site!