Tag Archives: CTI

How To – Series 2: How to make Phone Number field as CTI integrable or make IFrame look alike Label on Crm Form

There are situations, where you want to display an IFrame which looks like label on crm form. These type of implementations sometimes targets to have CTI integrations with them. Here I want to share with you one of the approaches to implement that. Below is the screenshot of what actually I want to get finally:
Here I am displaying Business phone of the contact in an IFrame which looks like a label on the form.
1.       Create an HTML page with style properties set to as follows:
<html>
<body style=”background-color: #eaf3ff; font-size:0.7em; font-family:Tahoma, Verdana, Arial; font-style:normal”>
</body>
</html>
Here, I am setting background color of the HTML page to be default CRM form’s color(i.e. #eaf3ff), font size to 0.7em(em is preferable than px for IE) and font family to be CRM form’s default i.e Tahoma, Verdana, Arial. So that, our HTML form which will become source for the IFrame will look alike as Crm Fom.
2.       Deploy above HTML page to ISV folder(ISVContactSampleAppBusinessPhone.html).
3.       Create a Section in the crmForm with formatting properties as:
i.                    Layout:  Fixed-width Column
ii.                   Column Format: Two columns(1:1)
So that we can make our IFrame to occupy only one column in the crm form instead entire row.
4.       Create an IFrame and name it as IFRAME_MyBusinessPhone with the following properties
i.                     URL: ISVContactSampleAppBusinessPhone.html
ii.                   Label it as MyBusinessPhone and check it to display label on the form
iii.                  Select Number of rows as “1” and uncheck “Automatically expand to use available space” so that IFrame occupies only one row.
iv.                 Select scrolling as “Never” and uncheck to “Display Border”.
v.                   Add this IFrame to earlier created section.
5.       Go to form onLoad event and add following code:
if(crmForm.all.telephone1.DataValue!=null)
{
document.getElementById(‘IFRAME_MyBusinessPhone_d’).innerHTML='<div style=”margin-top:2px; margin-left:2px”>’+crmForm.all.telephone1.DataValue+'</div>’;
}
else
{
document.getElementById(‘IFRAME_ MyBusinessPhone _d’).innerHTML='<div style=”margin-top:2px; margin-left:2px”></div>’;
}
Here I am giving div style margin as 2px so that it will be in align with IFrame’s label.
Finally, a simple IFrame and a HTML page with few properties set to will make a Magic….!!!!!!