モデル駆動型アプリでJavaScriptを活用し、フォームの動作をカスタマイズする方法を解説します。Webリソースとしてスクリプトを登録し、フォームイベントと連携させる一連の流れを確認していきます。

実装の概要

クライアントスクリプトの導入には、以下の3つのステップが必要です。

• 業務要件を満たすJavaScriptコードの作成
• コードをWebリソースとしてアップロード
• フォームイベントと関数を紐づけ

ステップ1：JavaScriptコードの作成

外部エディタ（VS Codeなど）でコードを記述します。以下に、名前空間を持つスクリプトの例を示します。

名前空間の定義

グローバル汚染を防ぐため、名前空間で関数を囲みます。

var Contoso = window.Contoso || {};

グローバル変数の準備

実行ユーザー情報など、スクリプト全体で利用する値を定義します。

var noticeId = "_contosoNotice";
var operator = Xrm.Utility.getGlobalContext().userSettings.userName;
var greeting = operator + "さん、スクリプトが実行されました！";

OnLoadイベント用処理

フォーム読み込み時に通知を表示し、5秒後に自動消去します。

this.onFormLoad = function (ctx) {
    var form = ctx.getFormContext();
    form.ui.setFormNotification(greeting, "INFO", noticeId);
    
    setTimeout(function () {
        form.ui.clearFormNotification(noticeId);
    }, 5000);
};

OnChangeイベント用処理

取引先名に特定の文字列が含まれる場合、関連フィールドを自動設定します。

this.onNameChanged = function (ctx) {
    var form = ctx.getFormContext();
    var nameVal = form.getAttribute("name").getValue();
    
    if (nameVal && nameVal.toLowerCase().includes("contoso")) {
        form.getAttribute("websiteurl").setValue("https://www.contoso.com");
        form.getAttribute("telephone1").setValue("03-1234-5678");
        form.getAttribute("description").setValue("自動設定されたサンプルデータ");
    }
};

OnSaveイベント用処理

保存完了時にダイアログを表示します。executionContextは不要です。

this.onFormSave = function () {
    Xrm.Navigation.openAlertDialog({ text: "保存が完了しました。" });
};

ステップ2：Webリソースへの登録

1. 環境の設定 > カスタマイズを開く
2. システムのカスタマイズを選択
3. ソリューションエクスプローラーでWebリソースを選択し、新規作成
4. 名前・表示名を入力し、種類にスクリプト (JScript)を選択
5. ファイルアップロードまたはテキストエディタでコードを貼り付け
6. 保存後、公開を実行

ステップ3：フォームとの紐づけ

取引先フォームを開き、フォームプロパティからイベントハンドラを設定します。

各ハンドラ設定後、保存と公開を忘れずに実行してください。

動作確認

ブラウザを更新し、以下を検証します。

1. 取引先レコードを開くと、ユーザー名付きの通知が5秒間表示される
2. 取引先名に「Contoso」を含めると、Webサイト・電話番号・説明が自動入力される
3. 保存ボタンを押すと、「保存が完了しました。」のダイアログが表示される

完全なサンプルコード

var Contoso = window.Contoso || {};
(function () {
    var noticeId = "_contosoNotice";
    var operator = Xrm.Utility.getGlobalContext().userSettings.userName;
    var greeting = operator + "さん、スクリプトが実行されました！";

    this.onFormLoad = function (ctx) {
        var form = ctx.getFormContext();
        form.ui.setFormNotification(greeting, "INFO", noticeId);
        setTimeout(function () {
            form.ui.clearFormNotification(noticeId);
        }, 5000);
    };

    this.onNameChanged = function (ctx) {
        var form = ctx.getFormContext();
        var nameVal = form.getAttribute("name").getValue();
        if (nameVal && nameVal.toLowerCase().includes("contoso")) {
            form.getAttribute("websiteurl").setValue("https://www.contoso.com");
            form.getAttribute("telephone1").setValue("03-1234-5678");
            form.getAttribute("description").setValue("自動設定されたサンプルデータ");
        }
    };

    this.onFormSave = function () {
        Xrm.Navigation.openAlertDialog({ text: "保存が完了しました。" });
    };
}).call(Contoso);