Adding form labels using HTML web resources

Occasionally, I have a requirement where a user must complete one of two fields on the form. This presents some challenges since you can’t make them both required. Additionally, you need a visual indicator that one selection or the other need to be selected.

Here is a sample of how such a configuration would exist on the form.


Creating a web resource

In order to display HTML on the form, we must first create a web resource which will contain the HTML. Here’s the Web Resource Record:


And here are the contents:

<body style="border-bottom: 0px; 
    border-left: 0px; 
    border-top: 0px; 
    border-right: 0px; 
    padding-bottom: 0px; 
    padding-top: 0px;
    padding-left: 0px; 
    padding-right: 0px; 
    font-family: Segoe UI, Tahoma, Arial;
    font-size: 11px; 
    font-weight: bold; 
    background-color: #f6f8fa;">

    <label id="Label1">

This HTML contains the same styles as the CRM 2011 forms and has a label containing the text to display on the form.

Now we need to imbed this web resource on our form.

For this demonstration, I’m using a custom, test entity.


Adding a web resource to a CRM Form

From within the Form Editor, click the Insert Tab, then choose Web Resource. The General configuration of the web resource needs to look like this:



Click the Formatting tab to change the formatting of the web resource to look like this:


Note: For reasons that I have yet to determine, you need to set the Number of Rows value to a minimum of 2. A setting of 1 seems to be too small and the text is not displayed correctly.

The resulting web resource on the form looks like this:



A little JavaScript

Finally, to make sure the user enters one of the two choices, we need to add a little JavaScript tied to the Form’s OnSave event:


function OnSave(executionObj)
    if (Xrm.Page.getAttribute("new_choice1").getValue() == null &&
        Xrm.Page.getAttribute("new_choice2").getValue() == null)
        alert("You must enter data into either Choice 1 or Choice 2");


The Form Property configuration looks like this:


Note: Make sure the Pass execution context as first parameter is checked.




Display an HTML Web Resource in a Form with No Border

Leave a Reply 13 comments