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.
[Read More]