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:

<html>
<head>
</head>
<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">
        OR
    </label>
</body>
</html>

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");

        executionObj.getEventArgs().preventDefault();
    }
}

The Form Property configuration looks like this: