Adding a custom button to CRM 2011 Form

Adding a button to a CRM Form is quite challenging as we don’t have any IDE to design it. But still it’s possible using JavaScript.
Here’s the JavaScript code for that.
// Create the button, using the new_custombutton field as a container
        CreateButtonCRM5(‘swpmt_cancelddi’, ‘Cancel DDI’, ’75 px’, ’16_cancel.png’, CustomClickFunction);


// Custom Function
function CustomClickFunction() {
    var response = confirm(“DDI Status is to be changed to ‘Cancelling’. Do you want to continue?”);
    if (response) {
        Xrm.Page.getAttribute(‘swpmt_ddistatus’).setValue(4);
    }
}


// Add a button to the CRM Form – Begin


// CODE
// Create Dynamic Button for CRM 2011
function removeChildNodes(ctrl) {
    while (ctrl.childNodes[0]) {
        ctrl.removeChild(ctrl.childNodes[0]);
    }
}


function CreateButtonCRM5(fieldName, buttonText, buttonWidth, iconName, clickEvent) {
    functiontocall = clickEvent;
    crmForm.all.item(fieldName + “_c”).style.display = “none”;


    var li = document.createElement(“LI”);
    li.setAttribute(‘id’, fieldName + ‘LI’);
    li.setAttribute(‘className’, ‘ms-crm-Menu’);
    li.setAttribute(‘title’, buttonText);
    li.setAttribute(‘onclick’, functiontocall);
    li.setAttribute(‘onmousedown’, push_custom_button);
    li.setAttribute(‘onmouseup’, release_custom_button);
    li.style.width = buttonWidth;
    li.style.cursor = “hand”;
    li.style.textAlign = “center”;
    li.style.overflow = “hidden”;


    var span = document.createElement(“span”);
    span.setAttribute(‘className’, ‘ms-crm-Menu-Label’);
    span.setAttribute(‘id’, fieldName + ‘Span’);
    span.style.cursor = “hand”;
    li.appendChild(span);
    li.onmouseover = function () { span.setAttribute(‘className’, ‘ms-crm-Menu-Label-Hovered’); }
    li.onmouseout = function () { span.setAttribute(‘className’, ‘ms-crm-Menu-Label’); }


    var a = document.createElement(“a”);
    a.setAttribute(‘id’, fieldName + ‘A’);
    a.setAttribute(‘className’, ‘ms-crm-Menu-Label’);
    a.onclick = function () { return false; }
    a.setAttribute(‘target’, ‘_self’);
    a.setAttribute(‘href’, ‘javascript:onclick();’);
    a.style.cursor = “hand”;
    span.appendChild(a);


    var img = document.createElement(“img”);
    img.setAttribute(‘id’, fieldName + ‘Img’);
    img.setAttribute(‘className’, ‘ms-crm-Menu-ButtonFirst’);
    img.setAttribute(‘src’, ‘/_imgs/ico/’ + iconName);
    img.style.cursor = “hand”;


    var span2 = document.createElement(“span”);
    span2.setAttribute(‘id’, fieldName + ‘Span2’);
    span2.setAttribute(‘className’, ‘ms-crm-MenuItem-TextRTL’);
    span2.innerText = buttonText;
    span2.style.cursor = “hand”;
    a.appendChild(img);
    a.appendChild(span2);


    removeChildNodes(crmForm.all.item(fieldName + “_d”));
    crmForm.all.item(fieldName + “_d”).appendChild(li);
}


function push_custom_button() {
    window.event.srcElement.style.marginLeft = “1px”;
    window.event.srcElement.style.marginTop = “1px”;
}


function release_custom_button() {
    window.event.srcElement.style.marginLeft = “0px”;
    window.event.srcElement.style.marginTop = “0px”;
}


// Add a button to the CRM Form – End

Author: Indika Abayarathne

MSc in IT [University of Colombo] Solutions Architect | Consultant Technologies: Power Platform | Dynamics CE | Azure View all posts by Indika Abayarathne