MS CRM IFrame Magic
We all know how easy and it is to work with MS CRM UIs. How you can add fields, and make them drop down lists, option buttons, check boxes all pretty simple. But what if the client asks for buttons, indicators grid views in the Window. The answer is an IFrame.
One of my clients had a requirement to compare the sales cycle stages and activities done for a particular sales opportunity with the standard sales process and provide an indication to see whether the follow-up process is on target with the estimated closing date. The green indicator next to the estimated close date in the above screen capture shows that information visually. It turns green of the opportunity is on track, and turns yellow and red if not.
In an other occasion, one of the support companies using MS CRM 3.0 wanted to have multiple contacts mapped out to a case. Since CRM 3.0 doesn’t allow creation of relationships between system entities and multiple relationships between the same entities I had to find alternative ways to achieve this.
The above picture has a pick list which is populated with the contact names from the same organization (account) as customer. which keeps this information. How is this possible?
Actually, the green indicator and the pick list are actually not on the CRM form. These are loaded in Iframes which are not made visible with a bit of tips and tricks. Checkout the form designer for the above form. You can clearly see the Iframe there.
Creating the IFrame
Now how do you make it seem like its on the CRM form? Simple, Adjust the Iframe properties as below:
1. Enter Standard configuration such as Name and URL etc.
2. You can choose to enter a label name for the Iframe but opt not to display the label on the form
3. From Row layout select the number of rows that you want to set as height for your Iframe. This depends on whet you are planning to display. If this is a small indicator or a field it could simply be 1 row. If what you are showing is like a report part or a grid view, which can be really cool show you may use as many rows as needed.
4. Opt not to display the border of the Iframe.
Now that you have created the Iframe, its time to worry about what to display.
Creating the ASP.net Page thats embedded in to the IFrame
Key thing is to style the page in such a way that it appears similar to the CRM UI Style.
1. Get rid of page borders etc in order to ensure that the new control is perfectly aligned with the controls on the CRM form.
2. Add the Background color #EAF3FF to the page which is the background color of CRM Form
3. For all the controls displaying text, font is Tahoma, Size 11px, Color Black. Almost all controls have a 1px wide solid border colored #6699CC
Much of these information can be found in the CRM4 Ux Design Guide which comes with SDK.
Passing values to IFrame
You may pass any value to the Iframe using a similar Jscript as below which can be used on Form Load, or any Change Event of Any Field
//When the schema name of the field is ‘customerid’
var keyField = crmForm.all.customerid.DataValue;
var subjField = crmForm.all.name.DataValue;
//Pass the Value to the Iframe
crmForm.all.IFRAME_myIF.src='http://localhost:8081/IFpage.aspx?keyfd='+keyField+'&subject=' + subjField;
Await, for the 2nd part of the article: Addressing Complications in passing Values from Iframes to CRM form.