Dynamics 365のブログ
2018.09.21

Dynamics 365 に Javascript のコードを埋め込んでみる

Dynamics 365 カスタマイズ

25893020
Author: Takafumi Noguchi
 LinkedIn

Dynamics 365 のフォームには、Web リソースを挿入することができます。Webリソースは、HTML、Javascript、画像ファイルや Silverlight アプリケーションを追加できるので、フォームで比較的柔軟にカスタマイズを行うことが可能です。

Customer Engagement の Web リソース


今回は、フォームに Javascript のコードを埋め込み、もし「電話」フィールドが空白の場合は、「Fax」を読み取り専用にしてみます。このくらい簡単なことであれば、業務ルールですぐできてしまうのですが、今回はテストということで、やってみます。

 

目次

  • フォームに javascript を追加しよう
  • 追加した javascript をページ起動時に実行させる

フォームに javascript を追加しよう

まずは、取引先企業のレコードを開いて、フォームの編集画面を開いてみます。

 

 

フォームの編集画面は、「設定」-「システムのカスタマイズ」からも遷移できますが、このようにレコードを開いて、フォームを編集するほうが楽です。

 

 

右上の「フォームのプロパティ」をクリックします。

 

 

「イベント」タブの「フォーム ライブラリ」がフォーム上で追加されている Webリソース一覧です。ここに新たに Javascript を追加すると、フォームを開いた時(OnLoad)、保存時(OnSave)、フィールドの値を変更した時(OnChange)などをトリガーにスクリプトを実行することができるようになります。

 

 

それでは、新規追加をしてみましょう。「フォーム ライブラリ」の「+追加」ボタンをクリックします。

 

 

今回は新しく、Webリソースを追加するので、「新規」をクリックします。

 

 

「名前」や「表示名」を任意の値で入力して、「種類」を “スクリプト(JScript)” とします。そして「テキスト エディター」をクリックします。

 

 

ここで、通常の javascript コードを入力するのですが、Dynamics 365 のフィールドに対して読み取り専用に設定するコントロールは、setDisabled を利用します。

 

setDisabled (クライアント API 参照)

 

今回は、以下のようにしてみました。

function LockFaxNumber()
{ 
   var Phone = Xrm.Page.getAttribute("telephone1").getValue(); //電話

  if(Phone == null && Phone != "undefined")
   {
     Xrm.Page.getControl("fax").setDisabled(true);
    } 
  else{
     Xrm.Page.getControl("fax").setDisabled(false);
   }    
  console.log("filed lock is done");
}

 

スクリプト設定が完了したので、「OK」をクリックします。

フォームのプロパティ画面で、作成した javascript が表示されているので、「追加」をクリックして、フォームにスクリプトを追加します。

 

 

これでフォームに追加されました。

 

 

追加した javascript をページ起動時に実行させる

 

フォームに追加した javascript をページ起動時(OnLoad)で実行してみます。まず、「イベント ハンドラー」で「+追加」ボタンをクリックします。

 

 

「ライブラリ」に今回作成した javascript の Web リソース名、「関数」にスクリプトの function 名 を設定します。

 

 

「依存関係」のタブをクリックして、スクリプト内で利用しているフィールドを選択します。今回は、「FAX」と「代表電話」を選択しています。そして「OK」をクリックします。

 

 

この依存関係を設定されたフィールドは、フォーム上でロックされます。これは、間違ってフォーム上からフィールドを削除して、スクリプトエラーが発生することを防ぎます。

 

 

これですべての準備が整いましたので、「OK」をクリックして、「フォームのプロパティ」を閉じます。そして、「下書きとして保存」からの「公開」をクリックしましょう。

 

 

それでは、取引先企業のページを更新してみます。「電話」が空白なので、「Fax」にロックがかかっています。

 

 

「電話」に値をいれて、もう一度ページを更新してみましょう。「Fax」が入力できるようになりました。成功ですね。

 

今回は、イベントハンドラーを 「OnLoad」のみで設定したので、ページの更新が必要でしたが、たとえば、値が変わったタイミングでスクリプトが動作するようにしたい場合は、フィールドのプロパティを開いて、「OnChange」のイベントで、上記手順と同様に「+追加」ボタンからスクリプトを追加してください。

 

 

この記事では、 javascript の基本設定をご紹介しました。もう少し凝ったことを、また別の記事でやってみようと思うので、お楽しみに。

それでは!

この記事を読んだ方は他にこんな記事を読んでいます。

  • Dynamics 365 ポータルアドオンの利用Dynamics 365 ポータルアドオンの利用
  • Dynamics 365 プロセスの基本操作Dynamics 365 プロセスの基本操作
  • Dynamics 365 エンティティを管理するDynamics 365 エンティティを管理する
  • Dynamics 365 フィールドセキュリティを設定Dynamics 365 フィールドセキュリティを設定
  • Dynamics 365 のWebリソースやプロセスのカスタマイズDynamics 365 のWebリソースやプロセスのカスタマイズ
  • Dynamics 365 計算フィールドの活用Dynamics 365 計算フィールドの活用

人気の記事

    Ribbon Workbench:フィールド値でボタンを表示・非表示にする

    Ribbon Workbench:フィールド値でボタンを表示・非表示にする

    • 2020.05.5
    • Dynamics 365 カスタマイズ [More]
    Dynamics 365 アプリの設定

    Dynamics 365 アプリの設定

    • 2017.10.26
    • Dynamics 365 の初期設定 [More]
    オンプレミスの SQL Server からデータを取得する

    オンプレミスの SQL Server からデータを取得する

    • 2019.06.11
    • 他システム連携
    Dynamics 365 ポータルアドオンの利用

    Dynamics 365 ポータルアドオンの利用

    • 2019.05.13
    • Dynamics 365 の初期設定
    Dynamics 365 の製品カタログで営業力を高める

    Dynamics 365 の製品カタログで営業力を高める

    • 2018.02.6
    • Dynamics 365 for Sales [More]
    Dynamics 365 ダッシュボードで情報の可視化を行う

    Dynamics 365 ダッシュボードで情報の可視化を行う

    • 2018.07.10
    • Dynamics 365 for Sales [More]
Dynamics 365のブログ / Dynamics 365 カスタマイズ / Dynamics 365 に Javascript のコードを埋め込んでみる
Dynamics 365のブログ

© Copyright ANDAZE. All rights reserved.