みなさん、こんにちは。
今回から Dynamics CRM 2016 SDK の新機能より、クライアントサイド
SDK の機能を紹介します。今回はオートコンプリートを紹介します。
概要
オートコンプリート機能は、参照フィールドと似た体験を、テキスト
フィールドでも利用できるよものです。ユーザーがタイプした文字列
を都度取得し、それに対応する候補を以下のように表示できます。
※日本語のように入力後、変換を確定する入力方法は対応していません。
入力中の文字列取得
入力中の文字は、Xrm.Page.getControl("<control name>") に対して、
getValue() 関数を実行することで取得できます。
関数のアタッチ
文字入力時にトリガーされる関数は GUI からアタッチできないため、
以下のコードでアタッチする必要があります。
Xrm.Page.getControl("<control name>").addOnKeyPress(<function>);
またここで指定した関数には実行コンテキストが引数として自動で
渡され、<context>.getEventSource() 関数にて元のコントロールを
取得することができます。
すでにアタッチ済みの関数をデタッチするには、コントロールに
対して removeOnKeyPress(<function>)関数を実行します。
候補の表示/非表示
候補の一覧は、Xrm.Page.getControl("<control name>") に対して
showAutoComplete(<候補のセット>) を実行する事で呼び出せます。
渡す候補のセットは候補の一覧である results、候補一覧の右下に
出ているリンクを作る commands を含みます。
results は id, icon, fields を持ったオブジェクトの配列として定義され、
field は最大 3 列のデータが表示されます。
commands は id, label, action を含みます。label には表示する名前、
action にはリンクをクリックした際の関数を指定します。
候補の表示を隠したい場合は hideAutoComplete() 関数を実行します。
スクリプトの作成
では早速スクリプトを作ってみましょう。
1. ブラウザで Microsoft Dynamics CRM に接続します。
2. 設定 | カスタマイズ | システムのカスタマイズを開きます。
3. 左ペインより 「Web リソース」を選択して「新規」ボタンを
クリックします。
4. 「名前」と「表示名」に autoCompleteSample.js と入力します。
「種類」で「スクリプト (JScript)」を選択し、「テキストエディター」
をクリックします。
5. エディターが開いたら、以下の関数を追加します。これは
ユーザーが文字を入力したタイミングで都度呼び出される
関数となります。
// 文字入力時に呼ばれる関数
// 引数にコンテキストが渡される
function keyPressFcn(ext)
{
// 入力引数より元のコントロールを取得
var sourceControl = ext.getEventSource()
// ユーザーの入力文字を取得
var userInput = sourceControl.getValue();
// 候補の作成
resultSet = {
// 候補の一覧
results: new Array(),
// 候補一覧右下のリンク情報
commands: {
id: "sp_commands",
label: "ここをクリック！",
action: function () {
alert('クリックされました');
}
}
}
// ダミーの候補を 5 件作成
for (i = 0; i < 5; i++)
{
resultSet.results.push({id: i, fields: ['サンプル候補' + i, '入力した文字' + userInput, 'その他']});
}
// 候補の表示
sourceControl.showAutoComplete(resultSet);
}
6. 続けて以下の関数を追加します。この関数を OnLoad で
呼び出して、上記の関数をイベントにアタッチします。
function attachOnKeyPress() {
// 名前コントロールにイベントをアタッチ
Xrm.Page.getControl("name").addOnKeyPress(keyPressFcn);
}
7. 「OK」をクリックします。エディターが閉じたら「公開」を
クリックします。
フォームに設定
作成したスクリプトを以下の手順でフォームに設定します。
1. 既定のソリューションより、エンティティ | 取引先企業 | フォーム
を選択し、メインフォームを開きます。
2. 「フォームのプロパティ」をクリックします。
3. フォームライブラリで「追加」ボタンをクリックします。
4. 先ほど作成した new_autoCompleteSample.js 検索して選択します。
5. イベントハンドラーでフォームの OnLoad イベントが選択されている
状態で「追加」ボタンをクリックします。
6. attachOnKeyPress 関数を指定して、「OK」をクリックします。
7. 「OK」をクリックしてフォームのプロパティを閉じます。
8. 「保存」ボタンをクリック後、「公開」をクリックします。
9. 公開が完了したらフォームエディターを閉じます。
動作確認
最後に動作の確認です。
1. 営業 | 取引先企業に移動して、「新規」ボタンをクリックします。
2.「取引先企業名」に入力をします。日本語入力ではトリガーされない
ため、アルファベット入力を行います。
3. 右下の「ここをクリック！」リンクをクリックします。
メッセージが表示されることを確認します。
4. 再度文字を入力後、任意の候補を選択します。選択したものが
入力されることを確認します。
まとめ
現状日本語入力に対応していない制限があるため、郵便番号や管理
番号など、直接入力を行うフィールドでの利用に限定されますが、
うまく活用すれば応用が効く機能だと思います。
SDK でより詳細なサンプルが提供されていますので、以下リンクより
ご確認ください。
Sample: Auto-complete in CRM controls
- 中村 憲一郎
※本情報の内容（添付文書、リンク先などを含む）は、作成日時点でのものであり、予告なく変更される場合があります
![image_thumb[4]](http://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-30-98-metablogapi/7002.image_5F00_thumb_5B00_4_5D005F00_thumb.png "image_thumb[4]")
![image_thumb[9]](http://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-30-98-metablogapi/8446.image_5F00_thumb_5B00_9_5D005F00_thumb.png "image_thumb[9]")
![image_thumb[11]](http://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-30-98-metablogapi/4617.image_5F00_thumb_5B00_11_5D005F00_thumb.png "image_thumb[11]")
![image_thumb[13]](http://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-30-98-metablogapi/0435.image_5F00_thumb_5B00_13_5D005F00_thumb.png "image_thumb[13]")
![image_thumb[17]](http://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-30-98-metablogapi/0334.image_5F00_thumb_5B00_17_5D005F00_thumb.png "image_thumb[17]")
