Dynamics CRM 2011 Xrm.Page サンプルライブラリ紹介 その 3


みなさん、こんにちは。

今回も引き続き、クライアントサイドスクリプトの紹介を行います。

サンプルを確認するにあたり準備があるため、こちらの記事
ご覧いただき、サンプルのインストールを行ってください。

サンプル紹介

前回までフォーム上のコントロールについてのサンプルを紹介しました。
今回はセクションとタブについてのサンプルを一部紹介します。

サンプルは以下のフォルダにあります。
SDK\SampleCode\JS\FormScripts\SDK.SectionSamples.js
SDK\SampleCode\JS\FormScripts\SDK.TabCollectionSamples.js
SDK\SampleCode\JS\FormScripts\SDK.TabSamples.js

セクション操作サンプル

セクションはタブの子要素であり、コントロールの親要素です。
Xrm.Page スクリプトで行えることはいくつかありますが、良く使われる
ものはセクションの表示/非表示、またはセクションの親/子要素の取得です。

[toggleVisibleSections 関数]
セクションの表示/非表示を切り替えます。forEach メソッドの利用方法がポイントです。

toggleVisibleSections: function () {
  // Xrm.Page.ui.tabs の get メソッドでフォーム上の全てのタブ取得
  var tabs = Xrm.Page.ui.tabs.get();

  for (var i in tabs) {
   // タブを1つ取得
   var tab = tabs[i];
   // tab.sections の forEach メソッドを利用。このメソッドではタブにある
   // セクションを、順次渡された関数で処理
   tab.sections.forEach(function (section, index) {
    // セクションが表示されているか取得
    if (section.getVisible()) {
     // 表示されている場合は非表示に
     section.setVisible(false);
    }
    else {
     // 非表示の場合は表示に
     section.setVisible(true);
    }
   });
  }
},

[getFirstControlAttribute 関数]
ページ -> タブ -> セクション -> コントロールを 1 行で取得するサンプルです。

getFirstControlAttribute: function () {
  // Xrm.Page.ui.tabs.get()[0] で、 フォーム上の一番初めのタブを取得
  // そのまま sections.get()[0] で、タブ内の一番初めのセクションを取得
  // そのまま controls.get()[0] で、セクション内の一番初めのコントロールを取得
  var firstControl = Xrm.Page.ui.tabs.get()[0].sections.get()[0].controls.get()[0];

  alert(“The attribute label of the first control on the form is ‘” + firstControl.getLabel() + “‘.”);
},

タブ操作サンプル

タブはページの子要素で、セクションの親要素です。セクションと同様に子要素の
取得や自身の表示/非表示などの操作がよくされます。

[toggleTabDisplayState 関数]
セクションと異なり、タブは折りたたみと展開が可能です。このサンプル関数でその
方法を紹介しています。

toggleTabDisplayState: function () {
// Xrm.Page.ui.tabs の get メソッドでフォーム上のすべてのタブを取得
var tabs = Xrm.Page.ui.tabs.get();

for (var i in tabs) {
  // タブを 1 つ取得
  var tab = tabs[i];
  // 表示の展開状態を取得
  var currentTabState = tab.getDisplayState();
  // 展開のステータス情報を保持する文字列を用意
  var newTabState = “”;

  // タブが展開している場合
  if (currentTabState == “expanded”) {
   // 折りたたみのステータスをセット
   newTabState = “collapsed”;
  }
  // タブが折りたたまれている場合
  else if (currentTabState == “collapsed”) {
   // 展開のステータスをセット
   newTabState = “expanded”;
  }

  // setDisplayState メソッドのステータスを渡して状態を変更
  tab.setDisplayState(newTabState);
}
},

[toggleVisibleTabs 関数]
タブも表示/非表示を切り替え可能です。

toggleVisibleTabs: function () {
  // Xrm.Page.ui.tabs の get メソッドでフォーム上のすべてのタブを取得
  var tabs = Xrm.Page.ui.tabs.get();
  for (var i in tabs) {
   // タブを 1 つ取得
   var tab = tabs[i];
   if (i > 0) {
    // 表示の状態を取得
    if (tab.getVisible()) {
     // 表示の切り替え
     tab.setVisible(false);
    }
    else {
     // 表示の切り替え
     tab.setVisible(true);
    }
   }
  }
},

まとめ

Xrm.Page.ui を利用することで、フォーム上のオブジェクトを行き来する
ことが容易にできます。コントロールからセクションを取得して、そこから
タブを取得。タブ全体を折りたたむといったことや、その逆も可能です。

尚、セキュリティの観点からは、特定のオブジェクトの表示/非表示を
切り替えたい場合は、既定で非表示を使用してください。こうすることで
スクリプトの実行にタイムラグがある場合や、エラーが発生した場合にも
オブジェクトが意図せず表示されません。

またパフォーマンスの観点からは、非表示/表示を切り替えたいものを
同じセクションやタブにまとめて、より上位のオブジェクトで表示/非表示を
切り替えてください。こうすることで、子要素の切り替えが不要になります。

セクションやタブのサンプルは他にもありますので、是非ご覧ください。

次回はナビゲーション部分を操作するサンプルスクリプトを紹介します。

‐ Dynamics CRM サポート 中村 憲一郎

Comments (0)

Skip to main content