Add more buttons on the form subgrid

 Posted on August 10, 2016

Sometime, your business requirement need add some buttons in the form sub-grid like picture below (Account form, sub-grid Contacts). Add more buttons

How I can do that

1. Prepare 2 web-resource png image 16x16 file.

  • 1 for normal button
  • 1 for hover button

2. Copy function below to your main js web-resource file.

function createButton(grid, buttonName, buttonTooltip, buttonImage, buttonImageHover, callback) {
    if (grid == null || grid.length == 0) return;
    if (buttonName == null || buttonName.length == 0) return;
    if (buttonImage == null || buttonImage.length == 0) return;
    var dom = (Xrm == undefined || Xrm.Internal == undefined || Xrm.Internal.isTurboForm() == undefined || Xrm.Internal.isTurboForm() == false) ? document : parent.document;
    var button = dom.getElementById(grid + "_addImageButton");
    if (button == null || button.parentNode == null || button.parentNode.parentNode == null) return;
    var tooltip = "";
    if (buttonTooltip != null && buttonTooltip.length > 0)
        tooltip = " title='" + buttonTooltip + "' alt='" + buttonTooltip + "' ";
    var div = dom.createElement("div");
    div.className = "ms-crm-contextButton";
    div.innerHTML = "<a href='#' id='" + buttonName +"' style='display:block;cursor:pointer;'" + tooltip + "><img id='"+ buttonName +"Image' src='" + buttonImage + "'" + tooltip + "></a>";
    button.parentNode.parentNode.appendChild(div);
    if (buttonImageHover != null) {
        dom.getElementById(buttonName).onmouseover = function () {
            dom.getElementById(buttonName + "Image").src = buttonImageHover;
        }
        dom.getElementById(buttonName).onmouseout = function () {
            dom.getElementById(buttonName + "Image").src = buttonImage;
        }
    }
    dom.getElementById(buttonName).onclick = callback;
}

3. On the on-load form, add the following code to add button to form sub-grid.

createButton("Contacts", "btnViewChart", "View Chart", "../WebResources/pl_chart.png", "../WebResources/pl_chart_hover.png", function() {
    alert("View Chart Click");
});

Function parameters

  • grid: is the name of the sub-grid you add on form, in this case: Contacts, (required)
  • buttonName: because you can add more buttons, so you need enter the unique buttonName, in this case: btnViewChart (required)
  • buttonTooltip: the tooltip of this button, in this case: View Chart (optional)
  • buttonImage: the normal image button that you prepare in step 1, in this case: ../WebResources/pl_chart.png (required)
  • buttonImageHover: the hover button that you prepare in step 1, in this case: ../WebResources/pl_chart_hover.png (optional)
  • callback: a callback function after user click on button. (required)

4. Published and tested. I already tested on CRM2016 SP1 and CRM2016 Online.

NOTE

UnSupported code, use it with your own risk.

Dynamics365  UnSupported 

See also