Dynamics CRM 2016 SDK 新機能: クライアントサイドスクリプトその 1 - オートコンプリート

Article
01/11/2016

みなさん、こんにちは。

今回から 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. 既定のソリューションより、エンティティ | 取引先企業 | フォーム
を選択し、メインフォームを開きます。