Here I want to describe a solution to a problem that several of my clients have requested. They want to see the associated view of a child entity directly on the main form's UI.
This should be pretty easy, after all we can just place an IFrame directly on the form and then show the view but I wanted to go over the process step by step for people.
Just to note, this wouldn't be a supported customization because we are going to hit the DOM in an unsupported way :)
Step 1: Customize your entities as you see fit. For this example I'm going to use the Account entity with a 1:N relationship with a custom child entity, "Building". In my next blog post I'll show how to hide the Add Existing Button in a way that works with this solution as well as the normal associated views.
Step 2: your going to need to get some details from the DOM, so open up an Account and press Ctrl+N to open a new window so we can get the full power of the IE Dev toolbar. This is just one of many techniques that you can use to yank out the element IDs that you need.
This is what the form looks like before we continue:
The goal is to place the associated Building grid view directly under the Address information on the main UI so we need to pull out the ID of the associated element's navigation link.
Navigate to the Buildings Associated View and then Open up the Developer Tools (IE 8) or the IE Dev Toolbar (IE 7) and click to select the area just to the left of the actual Grid. Then locate the iframe element and get the tabSet value from the SRC attribute.
Step 3: Add the IFrame to the main UI.
Set the URL to "about:blank"
Uncheck the "Restrict cross-frame scription". In my next blog post I'm going to remove the Add Existing Button here so this will be required, but otherwise your safe to leave it checked.
Set the Scrolling to Never, the grid will have it's own scroll bars
Uncheck the Display border
Step 4: Add the following magic JavaScript to the form's OnLoad event.
// We only want the IFrame to display for existing records!
// It cannot safely exist on the create form
var CRM_FORM_TYPE_UNDEFINED = 0;
var CRM_FORM_TYPE_CREATE = 1;
var CRM_FORM_TYPE_UPDATE = 2;
var CRM_FORM_TYPE_READONLY = 3;
var CRM_FORM_TYPE_DISABLED = 4;
var CRM_FORM_TYPE_BULKEDIT = 6;
// this will be used to remove the entire frame on new records that have not yet been saved.
// after the record is saved all this code will be executed again so we will have it when
// the form is refreshed
function RemoveIFrame(frame) {
var rows = 1;
if (!("undefined" == typeof (frame.parentElement.rowSpan) ||
"unknown" == typeof (frame.parentElement.rowSpan) ||
null == frame.parentElement.rowSpan)) {
rows = parseInt(frame.parentElement.rowSpan);
if (isNaN(rows)) rows = 1;
}
for (var ix = 1; ix < rows; ix++) {
frame.parentElement.parentElement.nextSibling.parentElement.removeChild(frame.parentElement.parentElement.nextSibling);
}
frame.parentElement.parentElement.parentElement.removeChild(frame.parentElement.parentElement);
}
switch (crmForm.FormType) {
case CRM_FORM_TYPE_UPDATE:
case CRM_FORM_TYPE_READONLY:
case CRM_FORM_TYPE_DISABLED:
document.all.IFRAME_Buildings.allowTransparency = "allowtransparency";
document.all.IFRAME_Buildings.src = "areas.aspx?oId=" +
crmForm.ObjectId +
"&oType=" +
crmFormSubmit.crmFormSubmitObjectType.value +
"&security=" +
crmFormSubmit.crmFormSubmitSecurity.value +
"&tabSet=ims_account_ims_building";
break;
case CRM_FORM_TYPE_CREATE:
case CRM_FORM_TYPE_BULKEDIT:
case CRM_FORM_TYPE_UNDEFINED:
RemoveIFrame(document.all.IFRAME_Buildings);
break;
}
Notice that the name of the IFrame is used three times in the switch statement and that the name of the tabSet that we got earlier is used once in the switch statement.
The final results:
Enjoy!
- Daniel Westlake