Add editable embedded form on parent CRM form

Few days ago one of my senior colleague asked me if we can embed editable form on parent CRM form. For example, embedding an editable Contact form inside of Account form. Well, I haven’t done this before but wanted to give it a try.

This is a very unusual scenario but I was able to accomplish this.

To implement this scenario you need to add an IFrame on the parent form and make sure to uncheck “Restrict cross-frame scripting, where supported”.

Now, you will need to write a javascript that will be added to the parent form (in this case Account form). This javascript will run on parent Form’s OnLoad event and will identify the primary contact id and frame the URL that needs to be set on the IFrame. You may also need to handle the null exceptions.

Edit the form to add IFrame

Edit the parent CRM Form as per your needs to add IFrame. I have added a separate tab and added the IFrame in that tab.

Once you add the IFrame, modify the property of the IFrame to make sure “Restrict cross-frame scripting” is unchecked.

Write javascript

Now either create a new web-resource or update the existing web-resource to add the below code snippet that forms the URL which needs to be set on the IFrame.

The name of my IFrame added on the form is IFRAME_ContactForm. And I want to show the Contact form for the selected primary contact on the Account. Hence, I retrieve the Id of that attribute (primarycontactid). To get the CRM instance URL you need to use Global Context that has a method named “getClientUrl“.  Finally, you will need to add navbar = off and cmdbar = false. These are very important attributes in the Url.

To form the URL basically you will need following:

1. Client Url – get this using globalContext.getClientId()
2. Logical Name of the entity – in this example it is contact
3. Embedded Form Id – You can get this by opening the form customization and fetching the Id from the Url
4. Record Id – This is an attribute on the form. If there is no data then you can skip this part.

IFrame URL –

globalContext.getClientUrl()+”/main.aspx?etn=contact&extraqs=formid%3d1FED44D1-AE68-4A41-BD2B-F13ACAC4ACFA&id=” + contactId[0].id + “&pagetype=entityrecord&navbar=off&cmdbar=false”

function populateIFrame(executionContext){
   var formContext = executionContext.getFormContext(); // get formContext
   var frame = Xrm.Page.ui.controls.get("IFRAME_ContactForm");

   var globalContext = Xrm.Utility.getGlobalContext();
   var contactId = formContext.getAttribute("primarycontactid").getValue();

   if(contactId)
   {
      var url = globalContext.getClientUrl()+"/main.aspx?etn=contact&extraqs=formid%3d1FED44D1-AE68-4A41-BD2B-F13ACAC4ACFA&id=" + contactId[0].id + "&pagetype=entityrecord&navbar=off&cmdbar=false";
      frame.setSrc(url);
   }
   else
   {
      var url = globalContext.getClientUrl()+"/main.aspx?etn=contact&extraqs=formid%3d1FED44D1-AE68-4A41-BD2B-F13ACAC4ACFA&pagetype=entityrecord&navbar=off&cmdbar=false";
      frame.setSrc(url);
   }
}

Add javascript to the form

Once your javascript has been created/updated in CRM; navigate to the parent CRM form and add the javascript along with an OnLoad event.

Making it work with unified interface

To make it work on unified interface you will have to change the javascript. Currently there is no supported way to identifying web vs unified interface client dynamically.

The only change will be the URL formation for unified interface. Notice that I have used “getCurrentAppUrl” method.

function populateIFrame(executionContext){
	var formContext = executionContext.getFormContext(); // get formContext
	var frame = Xrm.Page.ui.controls.get("IFRAME_ContactForm");
	
	var globalContext = Xrm.Utility.getGlobalContext();
	var contactId = formContext.getAttribute("primarycontactid").getValue();
	
	if(contactId)
	{
		/*For unified interface client*/
		var url = globalContext.getCurrentAppUrl()+"&etn=contact&id=" + contactId[0].id + "&pagetype=entityrecord&navbar=off&cmdbar=false";
		
		frame.setSrc(url);
	}
	else
	{
		var url = globalContext.getClientUrl()+"/main.aspx?etn=contact&extraqs=formid%3d1FED44D1-AE68-4A41-BD2B-F13ACAC4ACFA&pagetype=entityrecord&navbar=off&cmdbar=false";
		frame.setSrc(url);
	}
}

In action

Web client

Final output will be something like this on a web client.

Unified interface

Final output will be something like this on a unified interface client.