Sometime, your business requirement need add some buttons in the form sub-grid like picture below (Account form, sub-grid Contacts).
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.