ポスト
AppComponent、作っていますか？
SkyVisualEditorで生成するVisaulforceページはSalesforceコンソールに対応していますが、Open CTIには対応しておりません。
今回はLightning Experience環境のコンソールや標準ページレイアウトにある電話番号項目と同じように、SkyVisualEditorで生成するVisaulforceページでも電話番号項目がリンクになり、クリックするとソフトフォンでの発信を可能にするAppComponentの例を公開します。
技術的な背景
Salesforceが提供するVisualforceのCTI連携方法として一般的にはsupport:clickToDialを使って電話番号項目を表示する方法がありますが、SkyVisualEditorでは項目の表示にapex:outputField を利用しておりますので、そのままでは対応できません。
また、今主流になりつつあるLightningコンソールに関しては、Salesforceから公開されているOpen CTIやConsoleのAPIにはclickToDial機能を提供されておらず、Javascriptのみでの機能追加も出来ませんので、このブログではSkyVisualEditorが生成するVisualforceページに直接コードを挿入できるAppComponentの仕組みを活用して、暫定的な対応を行います。
下準備
Open CTIやコンソールについての基本的な説明については本稿では割愛させていただきます まずは下準備として、下記のURL及びリンク先を参考からOpen CTI デモアダプタをインストールし、ソフトフォンの準備をします。
次にSkyVisualeditorでデプロイしたVisualforceページを任意のオブジェクトのレコードページに配置します。 レコードページの編集または新規作成画面において、標準コンポーネント内のVisualforceを配置し表示したいVisualforceページを選択することでページを配置します。（配置箇所は任意）
前述の通りこの時点ではまだCTIに対応しておりませんので、電話番号はリンクになっておらずソフトフォンとの連携が出来ません。
AppComponentの実装
AppComponentの開発について詳しく知りたい方はAppComponentの開発ドキュメントも併せてご参照ください。https://info.skyvisualeditor.com/developer/develop/
このサンプルではシンプルさを重視するためDirectComponentという仕組みを利用し、XMLにそのままプログラムを乗せた形で定義しています。
...(AppComponentのヘッダー部分を省略)
<AppComponents>
<AppComponent name="ClickToDialRegister">
<Title>ClickToDial登録</Title>
<Description></Description>
<Layout>inline</Layout>
<Height value="50" resizable="false"/>
<Width value="50" resizable="false"/>
<PutablePlaces anyPlace="true">
</PutablePlaces>
<DirectComponent>
<DirectComponentBody><![CDATA[
<div>
<script>
jQuery(document).ready(function(){
//生成したsupport:clickToDialタグを指定の項目と差し替える
var phoneField = "%%%PhoneField%%%";
var tgt = jQuery('[id$=' + phoneField + ']');
tgt.replaceWith(jQuery('[id$=' + phoneField + '_CTIAppcom]'));
});
</script>
<!--指定した項目と対となるsupport:clickToDialを生成-->
<support:clickToDial id="%%%PhoneField%%%_CTIAppcom" number="{!record.%%%PhoneFieldName%%%}" ></support:clickToDial>
</div>]]></DirectComponentBody>
</DirectComponent>
<Properties>
<IDSelector name="PhoneField" label="Phone Field" isRequired="true" target="field" tooltip="電話番号項目を指定"/>
<String name="PhoneFieldName" label="API Name" isRequired="true" tooltip="電話番号項目API名"/>
</Properties>
</AppComponent>
</AppComponents>
</ComponentDefinition>上記のAppComponent.xmlをSalesforce組織に配置した後は下図のように、AppcomponentのプロパティからCTI連携したい電話番号項目を選択し再度デプロイします。
出来上がり
デプロイ後、指定した電話番号項目がリンクとなり、クリックするとソフトフォンからダイヤルされることが可能になります。
今回のブログで提示したサンプルはsupport:clickToDialをそのまま生成し動的にDOMを差し替える形で実装しました。少々乱暴な方法ですが、AppComponentという機能が必要な時にすぐSkyVisualEditorの機能を拡張できる仕組みの利用方法の一例として参考になれば幸いです。
※最初はハッキング寄りな手法を提示しましたが、より低いリスクで実装できたので本日(2018/04/02)修正しました。
