Client-size manipulation of a Dynamics CRM Form

Question

ORIGINAL QUESTION:

I am trying to create some javascript to add to a form in Microsoft Dynamics CRM.

I have the following script which I have assigned to the forms onLoad event:

$(document).ready(function () {

    if ($('#CheckBox1').is(':checked')) {

        $('<div id="div2">Some Data Here</div>').insertAfter("#Div1");

        $('#divHeader').height('+=25px');

        var newtop = $('#divMain').position().top + 25;
        $('#divMain').css('top', newtop + 'px');
    }

});

The following is a stripped down version of the forms HTML

<div id="divHeader">
    <div id="Div1"></div>
</div>

<div id="divMain"></div>

When the form loads, what should happen is this:

<div id="divHeader">
    <div id="Div1"></div>
    <div id="Div2">Some Data Here</div>
</div>

<div id="divMain"></div>

That does happen. However, the problem is that the divHeader and divMain do not resize, so the newly added Div2 can't be seen unless the user scrolls down within the divHeader .

If I add an alert:

$(document).ready(function () {

    if ($('#CheckBox1').is(':checked')) {

        alert("Random alert");

        $('<div id="div2">Some Data Here</div>').insertAfter("#Div1");

        $('#divHeader').height('+=25px');

        var newtop = $('#divMain').position().top + 25;
        $('#divMain').css('top', newtop + 'px');
    }

});

The whole thing works perfectly. How do I get this to work without the alert?

---

UPDATE 1:

setTimeout also works instead of using an alert .

$(document).ready(function () {

    setTimeout(function () {
        if ($('#CheckBox1').is(':checked')) {

            $('<div id="div2">Some Data Here</div>').insertAfter("#Div1");

            $('#divHeader').height('+=25px');

            var newtop = $('#divMain').position().top + 25;
            $('#divMain').css('top', newtop + 'px');

        }
    }, 5000);

});

So it seems $(document).ready doesn't seem to do it's job properly. In both cases alert or setTimeout , the form gets extra time to finish loading before the div tags are resized.

Answer 1

It is entirely unsupported to do DOM manipulations in Dynamics CRM. See Do Not Access the DOM .

You will instead need to use supported methods of manipulating the form (ie Xrm.Page ). While it is not possible to dynamically add/remove content on a CRM-form, you can show and hide elements. As I understand it, you are trying to show some content if a boolean field (presented as a checkbox) on the form is true.

This can be done by adding the control that you want to show/hide to your form (that control can either be one of the standard CRM-fields or a custom web resource, depending on your requirements). You would then write a bit of JavaScript to show/hide the control in question when your boolean attribute changes its value:

function onload() {
    Xrm.Page.getAttribute("booleanField").addOnChange(showMoreStuffInHeader);
    showMoreStuffInHeader();
}

function showMoreStuffInHeader() {
    var visible = Xrm.Page.getAttribute("booleanField").getValue();
    Xrm.Page.getControl("someDataHereControl").setVisible(visible);
}

Answer 2

Use Jquery Plugin Wait until element exists Pluging will wait for element to appear in DOM and then fire given handler function.

$(document).ready(function () {

    $('#CheckBox1').waitUntilExists(function () { //  OR $('#Div1').waitUntilExists(function ()
        if ($('#CheckBox1').is(':checked')) {

            $('<div id="div2">Some Data Here</div>').insertAfter("#Div1");

            $('#divHeader').height('+=25px');

            var newtop = $('#divMain').position().top + 25;
            $('#divMain').css('top', newtop + 'px');

        }
    });

});