DYNAMIC RESIZING OF IFRAME IN CRM FORM

In order to add dynamic resizing IFrame the following preconditions should be met 1. IFrame source URL should have its own Onload function which is called during IFrame loading 2. IFrame resizing depend only on hide and show of sections tabs and attributes (i.e. some user action)

Obj100

For on Tab State change (Expanded or Collapsed state) IFrame resizing for child form, In the Onload of child form Add the following Codes: (The codes are committed as IFrameResize.js in SVN or can be taken from here: ).

STEPS:
Lets say the name of IFrame in which we want to display a child form is IFRAME_POC_Child1. In the Onload function of Child1, we will first determine if the child form is opened in a separate window, or in an IFrame. To check this add an IF condition as If (window.parent.parent.document.getElementById("IFRAME_POC_Child1") != null) { //Do Something } This if condition return true for an IFrame. If the child form contains only tabs and no other dynamic fields, then you can add this code for resizing of IFrame for tab expansion and collapsing. If (window.parent.parent.document.getElementById("IFRAME_POC_Child1") != null){ //Get all the tabs form CRM form var tabs = Xrm.Page.ui.tabs.get(); //for all tabs in CRM form for (var i in tabs) { var selector = "#tab"+ i + " .ms-crm-InlineTabHeader a,#tab"+ i +" .ms-crm-InlineTabBorder a"; $(selector).click(function(i){ //Set on click function here if user expands or collapses the tab }); } } Adding any code in the click function in the above code will be executed every time the tab is Expanded or collapsed.

But we want to do separate actions if tab expands and a separate action if tab is collapsed. So to check this we will add a check condition here in the click function. var currentTabState = Xrm.Page.ui.tabs.get()[i].getDisplayState(); if (currentTabState == "collapsed") { //Do action if current state is changed from collapsed to expanded } else if (currentTabState == "expanded") { //Do action if current state is changed from expanded to collapsed } So the overall code becomes like If (window.parent.parent.document.getElementById("IFRAME_POC_Child1") != null){ //Get all the tabs form CRM form var tabs = Xrm.Page.ui.tabs.get(); //for all tabs in CRM form for (var i in tabs) { var selector = "#tab"+ i + " .ms-crm-InlineTabHeader a,#tab"+ i +" .ms-crm-InlineTabBorder a"; $(selector).click(function(i){ var currentTabState = Xrm.Page.ui.tabs.get() [i].getDisplayState(); if (currentTabState == "collapsed") { //Do action if current state is changed from collapsed to expanded } else if (currentTabState == "expanded") { //Do action if current state is changed from expanded to collapsed } }); } }

Finally to set the height of the IFrame we will get the old height and set the new height as Old height +/- height difference. If (window.parent.parent.document.getElementById("IFRAME_POC_Child1") != null) { //Get all the tabs form CRM form var tabs = Xrm.Page.ui.tabs.get(); //for all tabs in CRM form for (var i in tabs) { var selector = "#tab"+ i + " .ms-crm-InlineTabHeader a,#tab"+ i +" .ms-crm-InlineTabBorder a"; $(selector).click(function(i){ var currentTabState = Xrm.Page.ui.tabs.get() [i].getDisplayState(); var theFrame = $("#contentIFrame", parent.document.body); var id = "#" + "tab" + i + " " + "table.stdTable"; var oldHeight = theFrame[0].ownerDocument.frames.frameElement.clientHeight;

tabHeight = $(id).height(); if (currentTabState == "collapsed") { theFrame[0].ownerDocument.frames.frameElement.style.heig ht =oldHeight + tabHeight; } else if (currentTabState == "expanded") { try{ theFrame[0].ownerDocument.frames.frameEleme nt.style.height =oldHeight - tabHeight; }catch(e){ theFrame[0].ownerDocument.frames.frameEleme nt.style.height =oldHeight; } } }); } } This final set of code when called on Onload of child form will enable simple resizing of IFrame if there is no hidden fields. Now, if your form contains option set or radio button which on selection displays extra fields then this case will be handled complexly with a check condition for the option set included in tab state checking condition. if (currentTabState == "collapsed") { if ($("#RadioButtonDivgmoes_marketingiocampaigns input[value=1]").is(":checked")) { tabHeight = 60; theFrame[0].ownerDocument.frames.frameElement.style.height =oldHeight + tabHeight; } else if ($("#RadioButtonDivgmoes_marketingiocampaigns input[value=2]").is(":checked")){ tabHeight = 290; theFrame[0].ownerDocument.frames.frameElement.style.height =oldHeight + tabHeight; } } So finally the code will be like (Please notice $("#tab2 .ms-crm-InlineTabHeader a,#tab2 .ms-crm-InlineTabBorder a").click(function(){ is being used here where tab2 is the tab containing the dynamic fields : If (window.parent.parent.document.getElementById("IFRAME_POC_Child1") != null){ $("#tab2 .ms-crm-InlineTabHeader a,#tab2 .ms-crm-InlineTabBorder a").click(function(){ var theFrame = $("#contentIFrame", parent.document.body); var oldHeight = theFrame[0].ownerDocument.frames.frameElement.clientHeight; var currentTabState = Xrm.Page.ui.tabs.get()[2].getDisplayState();

var tabHeight; if (currentTabState == "collapsed") { if ($("#RadioButtonDivgmoes_marketingiocampaigns input[value=1]").is(":checked")) { tabHeight = 60; theFrame[0].ownerDocument.frames.frameElement.style.height =oldHeight + tabHeight; } else if ($("#RadioButtonDivgmoes_marketingiocampaigns input[value=2]").is(":checked")){ tabHeight = 290; theFrame[0].ownerDocument.frames.frameElement.style.height =oldHeight + tabHeight; } } else if (currentTabState == "expanded") { if ($("#RadioButtonDiv_RadioButtonsOptionSet input[value=1]").is(":checked")) { tabHeight = 60; try{ theFrame[0].ownerDocument.frames.frameElement.style.height =oldHeight - tabHeight; }catch(e){ theFrame[0].ownerDocument.frames.frameElement.style.height =oldHeight; } } else if ($("#RadioButtonDiv_ RadioButtonsOptionSet input[value=2]").is(":checked")){ tabHeight = 290; try{ theFrame[0].ownerDocument.frames.frameElement.style.height =oldHeight - tabHeight; }catch(e){ theFrame[0].ownerDocument.frames.frameElement.style.height =oldHeight; } } } }); } Other tabs will be handled separately in the same manner. You also need to resize the frame on the click event of the radio button as: Attach a call of function on the click event of the Radio box or dropdown selection Now in that function handle the case for resizing of IFrame based on the selected option as :

function RadioButton_Click() {

var selectedOption = GetValues("sg_radiobutton"); // '3' is the tab in which dynamically appearing fields are present var currentTabState = Xrm.Page.ui.tabs.get()[3].getDisplayState(); switch (selectedOption) { case 1: //Hide/ Display section/ attribute/ tab here HideSedction("someTab1", "someSection"); Display Section("someTab", "someSection"); // Now set the height accordingly after checking the visible attributes if (window.parent.parent.document.getElementById("IFRAME_POC_Child1") != null) { var theFrame = $("#contentIFrame", parent.document.body); //If tab state is expanded then set the height based on option selected if ( currentTabState == "expanded" ) { if ($("#RadioButtonDiv_RadioButtonsOptionSet input[value=1]").is(":checked")) { //If option1 is selected then set height to a hardcoded value. theFrame[0].ownerDocument.frames.frameElement.style.height = 1205; } else if ($("#RadioButtonDiv_RadioButtonsOptionSet input[value=2]").is(":checked")){ //If option2 is selected then set height to a hardcoded value. theFrame[0].ownerDocument.frames.frameElement.style.height = 5565; } } else { //Because tab state is collapsed , set the height to default theFrame[0].ownerDocument.frames.frameElement.style.height = 605; } } break; case 2: //Hide/ Display section/ attribute/ tab here HideSedction("someTab1", "someSection"); Display Section("someTab", "someSection"); // Now set the height accordingly after checking the visible attributes if (window.parent.parent.document.getElementById("IFRAME_POC_Child1") != null) { var theFrame = $("#contentIFrame", parent.document.body); //If tab state is expanded then set the height based on option selected if ( currentTabState == "expanded" ) { if ($("#RadioButtonDiv_RadioButtonsOptionSet input[value=1]").is(":checked")) { //If option1 is selected then set height to a hardcoded value. theFrame[0].ownerDocument.frames.frameElement.style.height = 1435; } else if ($("#RadioButtonDiv_RadioButtonsOptionSet input[value=2]").is(":checked")){ //If option2 is selected then set height to a hardcoded value.

theFrame[0].ownerDocument.frames.frameElement.style.height = 5785; } } else { //Because tab state is collapsed , set the height to default theFrame[0].ownerDocument.frames.frameElement.style.height = 855; } } break; } }