Introduction to new Visualforce tag

Introduction to new VisualForce Tag support:clickToDial

Summer ’13 introduced a new computer-telephony integration (CTI) Visualforce component—support:clickToDial. The support:clickToDial component lets you add a phone field to custom Visualforce detail and edit pages. When users in organizations with Open CTI or Salesforce CRM Call Center click on the phone field, the phone number is dialed automatically and connects to the SoftPhone. Use this to, for example, specify which phone fields on custom pages users can click to automatically call customers.

The following examples will guide you through the usage of the new CTI tag.

Example1: Using it in the pageblocktable with in <apex:column> tag:

<apex:page standardController="Account">

    <apex:includeScript value="/support/console/24.0/integration.js"/> <!-- you need to include this in your page for the new tag to work -->
    <apex:pageBlock title="My Content">

        <apex:pageBlockTable value="{!account.Contacts}" var="item">

            <apex:column value="{!item.name}"/> 
            <apex:column value="{!item.Title}" />
            <apex:column value="{!item.Email}" />
            <apex:column headerValue="Phone"> <support:clickToDial number="{!item.Phone}" entityId="{!item.Id}" /> </apex:column>
            <apex:column value="{!item.Phone}" /> <!-- this field is added only to show the difference -->

        </apex:pageBlockTable> 

    </apex:pageBlock> 

</apex:page>

How to run the code:

This page uses Account Standard Controller & shows the list of contacts of the account in the pageBlock Table. Copy & paste the above code into a VisualForce page named Test1. You can test the page by opening it in a browser as https://c.<na1>.visual.force.com/apex/Test1?Id=<AccountId>

Example2: Using it in a details page :

I have tried using it with <apex:outputField>, but was not successful.

<apex:page standardController="Account" tabStyle="Account">

    <apex:includeScript value="/support/console/24.0/integration.js"/><!-- you need to include this in your page for the new tag to work -->
    
    <apex:pageBlock >
        <apex:pageBlockSection title="Account Information">
            <apex:outputField value="{!account.name}"/>             
            <apex:outputField value="{!account.industry}"/>
            <!-- may be we need to apply CSS to align this properly -->
            Phone: <support:clickToDial number="{!account.phone}" entityId="{!account.Id}" />
            <apex:outputLabel value="Phone"><support:clickToDial number="{!account.phone}" entityId="{!account.Id}" /> </apex:outputLabel>
        </apex:pageBlockSection>
    </apex:pageBlock>

</apex:page>

How to run the code:

This page uses Account Standard Controller & shows the details the account in the pageBlock. Copy & paste the above code into a VisualForce page named Test2. You can test the page by opening it in a browser as https://c.<na1>.visual.force.com/apex/Test2?Id=<AccountId>

Hope this helps. Happy experimenting with support:clickToDial. I'll keep posting if I find any other successful usage of support:clickToDial.